Bootstrap Carousel is not working in my react project. I've tried everything but it's still not working

Question

    {  
       <Jumbotron>
            <h3>A safe space to share your thoughts.</h3>
            <NewPost/>
            <Carousel>
                <Carousel.Item>
                    <Carousel.Caption>
                        <h3>
                        "The greatest glory in living lies not in never falling, but in rising every time 
    we fall."
                        </h3>
                        <p>-Nelson Mandela</p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item>
                    <Carousel.Caption>
                        <h3>
                        "When you reach the end of your rope, tie a knot in it and hang on."
                        </h3>
                        <p>-Franklin D. Roosevelt</p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item>
                    <Carousel.Caption>
                        <h3>
                        "In the end, it's not the years in your life that count. It's the life in your 
    years."
                        </h3>
                        <p>-Abraham Lincoln</p>
                    </Carousel.Caption>
                </Carousel.Item>
            </Carousel>
        </Jumbotron>
}
 

I want to add carousel in the jumbotron. it compiles successfully but doesn't appear on the screen. it just shows arrows but not the content please help.

Answer 1

As explain in the react bootstrap doc :

Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit.

You need to add a div (for example) before your <Carousel.Caption> in each <Carousel.Item> like this:

 <Carousel.Item>
            <div className="d-block w-100" style={{ height: "400px" }} />
            <Carousel.Caption>
              <h3>
                "The greatest glory in living lies not in never falling, but in
                rising every time we fall."
              </h3>
              <p>-Nelson Mandela</p>
            </Carousel.Caption>
          </Carousel.Item>