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 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 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.
Reflow .table-reflow Turn traditional tables on their side by using this class.

Bordered Tables

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.

Table Sizing

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

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:

Tables Styling Example URL
Table header styling https://demos.pixinvent.com/stack-html-admin-template/html/ltr/vertical-menu-template/table-styling.html#header-styling
Table footer styling https://demos.pixinvent.com/stack-html-admin-template/html/ltr/vertical-menu-template/table-styling.html#footer-styling
Contingent classes https://demos.pixinvent.com/stack-html-admin-template/html/ltr/vertical-menu-template/table-styling.html#contingent
Custom row colors https://demos.pixinvent.com/stack-html-admin-template/html/ltr/vertical-menu-template/table-styling.html#row-color
Custom table formatting https://demos.pixinvent.com/stack-html-admin-template/html/ltr/vertical-menu-template/table-styling.html#table-formatting
Table formatting options https://demos.pixinvent.com/stack-html-admin-template/html/ltr/vertical-menu-template/table-styling.html#formatting-options

Table Components

Some Components used in tables also.

Some more options for using components are as below:

Component Example URL
UI components https://demos.pixinvent.com/stack-html-admin-template/html/ltr/vertical-menu-template/table-components.html#ui
Alerts https://demos.pixinvent.com/stack-html-admin-template/html/ltr/vertical-menu-template/table-components.html#alerts
Callouts https://demos.pixinvent.com/stack-html-admin-template/html/ltr/vertical-menu-template/table-components.html#callouts
Progress https://demos.pixinvent.com/stack-html-admin-template/html/ltr/vertical-menu-template/table-components.html#progress
Checkboxes https://demos.pixinvent.com/stack-html-admin-template/html/ltr/vertical-menu-template/table-components.html#checkbox
Radio Buttons https://demos.pixinvent.com/stack-html-admin-template/html/ltr/vertical-menu-template/table-components.html#radio
Select https://demos.pixinvent.com/stack-html-admin-template/html/ltr/vertical-menu-template/table-components.html#select
Input https://demos.pixinvent.com/stack-html-admin-template/html/ltr/vertical-menu-template/table-components.html#input
Badges https://demos.pixinvent.com/stack-html-admin-template/html/ltr/vertical-menu-template/table-components.html#badges
Tooltip Triggers https://demos.pixinvent.com/stack-html-admin-template/html/ltr/vertical-menu-template/table-components.html#tooltip
Tags https://demos.pixinvent.com/stack-html-admin-template/html/ltr/vertical-menu-template/table-components.html#tags
Switch https://demos.pixinvent.com/stack-html-admin-template/html/ltr/vertical-menu-template/table-components.html#switch
Chart https://demos.pixinvent.com/stack-html-admin-template/html/ltr/vertical-menu-template/table-components.html#chart