why bootstrap styling isnt applied on my tables in reactjs

Question

I'm trying to apply bootstrap tables in my Reactjs but it doesn't work

here is my code:

 <div>
  <h1>Games List</h1>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
        <Table striped bordered hover variant="dark">
        <thead>
          <tr>
            <th>Benzirsiz Adi</th>
            <th>Gurusen Isim</th>
            <th>Aciklama</th>
            <th>Olusturma Tarihi</th>
            <th>Bitis Tarihi</th>
            <th>Oyun Tarihi</th>
            <th>Oyun Durumu</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
        </tbody>
      </Table>
      <button> Yeni Oyna Ekle </button>
    </table>

    </div>
</div>

however I have used bootstrap in navbar and it worked fine

here is my package.json code:

    {
  "name": "imonia",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/bootstrap": "^5.0.15",
    "@types/jquery": "^3.5.5",
    "@types/popper.js": "^1.11.0",
    "@types/react-bootstrap": "^0.32.25",
    "@types/react-icons": "^3.0.0",
    "@types/react-router-dom": "^5.1.7",
    "bootstrap": "4.6.0",
    "jquery": "^3.6.0",
    "popper.js": "^1.16.1",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.0",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "web-vitals": "^1.0.1"
  },

also i have deleted the nodemodules and reinstalled it, also the bootstrap version i have deleted it and reinstalled it

but both ways doesn't work

Answer 1

There is no issue with your code and package.json. The only problem I believe you forgot is to import bootstap.min.css in your index.js file. as:

import 'bootstrap/dist/css/bootstrap.min.css';

Just copy this and paste it into your index.js file on the top. Also, don't forget to import Table in your page where there is all code for the table. It is imported as:

import { Table } from 'react-bootstrap';

Your code's output looks like: