Basic Tables

Using the most basic table markup, here’s how .table based tables look in Bootstrap. All table styles are inherited from Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.

Bootstrap Tables Structure
                
                    <table class="table">
                      <thead>
                        <tr>
                          <th>#</th>
                          <th>Username</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th scope="row">1</th>
                          <td>Mark</td>
                        </tr>
                        <tr>
                          <th scope="row">2</th>
                          <td>Jacob</td>
                        </tr>
                      </tbody>
                    </table>
                
            

Tables List

Bootstrap Tables Options Class Description
Inverse table .table-inverse You can also invert the colors—with light text on dark backgrounds using this class.
Table Striped .table-striped Use .table-striped to add zebra-striping to any table row within the <tbody>
Bordered Table .table-bordered Add .table-bordered for borders on all sides of the table and cells.
Borderless Table .table-borderless Add .table-borderless for a table without borders.
Hoverable rows .table-hover Add .table-hover to enable a hover state on table rows within a <tbody>.
Responsive tables .table-responsive Wrap .table with .table-responsive to get responsive table.