Bootstrap Tables Documetation

Basic Tables

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

Bootstrap Tables Structure


    <table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Firstname</th>
            <th scope="col">Lastname</th>
            <th scope="col">Username</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let country of countries; index as i">
            <th scope="row">{{ i + 1 }}</th>
            <td>{{ country.firstname }} </td>
            <td>{{ country.lastname }}</td>
            <td>{{ country.username }}</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.
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 Stack 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.

Table Sizing

Tables sizing examples like default & small.

Tables Sizing Options	Class	Description
Default table	`.table`	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.