Bootstrap Tables Navigation
Back to top

Tables

Basic Tables

Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in 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 Hover Animation .table-hover-animation Add .table-hover-animation to enable a hover stat with animation on table rows within a <tbody>.
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 Responsive tables allow tables to be scrolled horizontally with ease. Use .table-responsive along with .table.

Refer following links for usage:

Type URL
Plugin Link https://getbootstrap.com/docs/4.3/content/tables/