0

I use React Bootstrap carousel. The indicator buttons are not aligned properly and the size is also off. Is there a way to fix this?

https://i.stack.imgur.com/uwYCa.jpg

<Grid>
    <Row >
        <Col md={6} md={12}>
            <Carousel>
                <Carousel.Item>
                    <img  src="https://docs.google.com/uc?id=0B0huBtqYaof7c0dpVFdGbGl0MWs"/>

                </Carousel.Item>
                <Carousel.Item>
                    <img  src="https://docs.google.com/uc?id=0B0huBtqYaof7MVAySV9jME9TWWM"/>

                </Carousel.Item>
                <Carousel.Item >
                    <img src="https://docs.google.com/uc?id=0B0huBtqYaof7N250S3JicmxxNmM"/>

                </Carousel.Item>
                <Carousel.Item >
                    <img   src="https://docs.google.com/uc?id=0B0huBtqYaof7MDF5Vm1VYWhoY3M"/>

                </Carousel.Item>
                <Carousel.Item >
                    <img  src="https://docs.google.com/uc?id=0B0huBtqYaof7X1ROMUxRMjVsN00"/>

                </Carousel.Item>
            </Carousel>
        </Col>
    </Row>
</Grid>
2
  • Can you post your CSS?
    – Ken Stipek
    Apr 29, 2017 at 0:20
  • I havn't used any css on the carousel. I used the default example from the react-boostrap website. I don't know why it is rendering the buttons like that. Even when I'm copying the exact demo code from react boostrap, it renders exactly how I have it in the picture. Apr 29, 2017 at 23:36

1 Answer 1

0

You need to set the image heights to the height of the carousel:

<Carousel>
    <Carousel.Item>
      <img width={900} height={500} alt="900x500" src="/assets/carousel.png"/>
    </Carousel.Item>
</Carousel>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.