Text inside react bootstrap "Carousel.Caption" not visible-CodePudding

<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.

CodePudding user response：

I believe you are missing the {} in className

<Carousel.Item>
  <Carousel.Caption className={"cap"}>
  <h3>AHJHSJ SHS</h3>
  <p>Lorem ipsum dolor sit amet</p>
  </Carousel.Caption>
</Carousel.Item>

CodePudding user response：

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}
      alt="First slide"
    />
    <Carousel.Caption>
      <h3>First slide label</h3>
      <p>Nulla aretra augue mollis interdum.</p>
    </Carousel.Caption>
</Carousel.Item>