Search code examples
reactjsreact-bootstrap

Text inside react bootstrap "Carousel.Caption" not visible

<Carousel.Item>
      <Carousel.Caption>
      <h3>AHJHSJ SHS</h3>
      <p>Lorem ipsum dolor sit amet</p>
      </Carousel.Caption>
</Carousel.Item>

However if i remove Carousel.Caption tag..then both "h3" and "p" tag getting rendered on browser.

Solution

  • Problem was that i was trying to use Carousel.Item without the image tag. Caption doesnt get visible if i dont use image tag.

    Looks like Captions get visible on top of image and if there is no image, nothing will be shown.

    Below code will work fine :

    <Carousel.Item>
    <img
      className="d-block w-100"
      src={img_path}
      alt="First slide"
    />
    <Carousel.Caption>
      <h3>First slide label</h3>
      <p>Nulla aretra augue mollis interdum.</p>
    </Carousel.Caption>
</Carousel.Item>