CODEWITHSUNDEEP
reactjshtml-tablereact-bootstrapreact-bootstrap-table
Hamdan Salih
Hamdan Salih

Reputation: 60

Why isn't react-bootstrap table not working

i wanted to create a table using react-bootstrap .so installed react-bootstrap by npm install react-bootstrap boostrap then i imported the Table from react-bootstrap and rendered the table but it is not styled?

why isn't this working ?

import { Table } from 'react-bootstrap'

<Table striped bordered hover>
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Chest No.</th>
    </tr>        
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>No one</td>
      <td>101</td>
    </tr>
  </tbody>
</Table>

this table in not styled (no hover, no strip ........)

Upvotes: 0

Views: 825

Answers (2)

G Sriram
G Sriram

Reputation: 555

Have you imported the bootstrap CSS file? If not, you could import it in your index.js file.

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

or

Download bootstrap.min.css. Then import it

import 'path-to-bootstrap/bootstrap.min.css';

Upvotes: 1

Josal
Josal

Reputation: 344

I think you forgot to import bootstrap. Add the following line inside your index.js file

import "bootstrap/dist/css/bootstrap.css";

Here is a working example.

Upvotes: 1

Related Questions