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>
| 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: