Cannot see the content inside the 'Tab' component in react-bootstrap

Question

I'm using the Tabs component of the react-bootstrap framework. When I put an example:

<div>
   <p> AAAAAAA </p>
</div>

inside Tab I don't see anything in this tab.

<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
  <Tab eventKey="home" title="Home">
    <div>
      <p>sssssssssssssssssss</p>
    </div>
  </Tab>
  <Tab eventKey="profile" title="Profile">
    <div>
      <img src="https://cdn.pixabay.com/photo/2019/08/03/12/22/hot-air-balloons-4381674__340.jpg" alt="picture"/>
    </div>
  </Tab>
  <Tab eventKey="contact" title="Contact" disabled>
  </Tab>
</Tabs>

Demo here: https://stackblitz.com/edit/react-ufa6nq?file=index.js

Answer 1

You have added three bootstrap css in your project. Two css links are added in index.html file and one in index.js file.

Remove import 'bootstrap/dist/css/bootstrap.css'; line from index.js file and remove one of the bootstrap.min.css link from index.html file.

Here I have updated the working code for you.
https://stackblitz.com/edit/react-bootstrap-tabs-3gt7r7

Hope this will work for you!

Answer 2

Here the issue is react-bootstrap version.

You have react-bootstrap v0.32.4 , which is based on bootstrap 3 . So removing bootstrap 4 from your code will fix the issue.

Demo

---

To work with bootstrap 4.x you need to install react-bootstrap v1.0.0-beta.10 .

You can check this here , on the header itself.

---

Note: By default stackBlitz is installing react-bootstrap v0.32.4 (the older version), and not the new version. For this you can raise a query in stackBlitz community .