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
HTML
<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>| Bootstrap Tables Options | Class | Description |
|---|---|---|
| Inverse table | .table-inverse |
You can also invert the colors—with light text on dark backgrounds using this class. |
| Inverse table with info background | .bg-* |
You can also invert different colors—with light text on dark backgrounds with info, success, warning and danger classes. |
| Table head options | .thead-[default/inverse] |
Similar to default and inverse tables, use one of two modifier classes to make <thead>s appear light or dark gray. |
| Table head options with primary background | .bg-* |
Use this class to make custom heading background to thead. You can also use Modern Admin color palette classes for background. |
| Striped rows | .table-striped |
Use this class to add zebra-striping to any table row within the <tbody>. |
| Bordered table | .table-bordered |
Use this class for borders on all sides of the table and cells. |
| Bordered striped | .table-striped.table-bordered |
Use this class to add zebra-striping to any table row within the <tbody>. |
| Hoverable rows | .table-hover |
Use this class to enable a hover state on table rows within a <tbody>. |
| Contextual classes | .table-[active/*] |
Use contextual classes to color table rows or individual cells. You can use color options from THEME_COLOR |
| Responsive tables | .table-responsive |
Use this class to create responsive tables by wrapping any .table to make them scroll horizontally on small devices. |
| Reflow | .table-reflow |
Turn traditional tables on their side by using this class. |
Table border classes allow you to set different types of table border like row, column & both borders. Also border less and color borders.
| Tables Border Options | Class | Description |
|---|---|---|
| Table row borders | .table |
This is a default table border style by bootstrap and attached to this class. |
| Table column borders | .table-column |
Use this class with .table for table with column border. |
| Both borders | .table-bordered |
Use this class with .table for both borders table. |
| Borderless table | .table-borderless |
Use this class with .table for borderless table. |
| Solid border | .border-solid |
Use this class to the table body row. This border style works only with row borders. |
| Double border | .border-double |
Use this class to the table body row. This border style works only with row borders. |
| Border color | .border-bottom-* |
you can set any of predefined colors by adding this class to the table row. |
Different types of tables sizing examples like extra large, large, default, small & extra small.
| Tables Sizing Options | Class | Description |
|---|---|---|
| Extra large table | .table-xl |
Use this class to the .table to create a table with extra large spacing. Extra larger table all rows have 1.25rem height. |
| Large table | .table-lg |
Use this class to the .table to create a table with large spacing. Larger table all rows have 0.9rem height. |
| Default table | .table-de |
Use this class to the .table to create a table with default spacing. Default table all rows have 0.75rem height. |
| Small table | .table-sm |
Use this class to the .table to create a table with small spacing. Small table all rows have 0.6rem height. |
| Extra Small table | .table-xs |
Use this class to the .table to create a table with extra small spacing. Extra small table all rows have 0.4rem height. |
Table styling classes help you to style table row background & border color, header and footer background color and table formatting purpose.
| Tables Styling Options | Class | Description |
|---|---|---|
| Default styling | .table |
By default any table with this class has transparent background color. |
| Table header/footer styling | .bg-* |
To use bootstrap brand color in the table header/footer, add this class to the header/footer row. |
| Contingent classes | .bg-* |
Use this class to table row. You can also use lighten/darken colors with .bg-lighten-* or .bg-darken-* color. |
Some more options for table stylings are as below:
Some Components used in tables also.
Some more options for using components are as below: