Basic Tables

Using the most basic table Leanne Grahamup, here’s how .table-based tables look in Bootstrap. You can use any example of below table for your table and it can be use with any type of bootstrap tables.

Example 1: Table with outer spacing

ID Name Email User ID
1 Leanne Graham sincere@april.biz @mdo
2 Ervin Howell shanna@melissa.tv @fat
3 Clementine Bauch nathan@yesenia.net @twitter

Example 2: Minimal Table with no outer spacing.

ID Name Email User ID
1 Leanne Graham sincere@april.biz @mdo
2 Ervin Howell shanna@melissa.tv @fat
3 Clementine Bauch nathan@yesenia.net @twitter

Inverse table

You can also invert the colors—with light text on dark backgrounds—with .table-inverse.

ID Name Email User ID
1 Leanne Graham sincere@april.biz @mdo
2 Ervin Howell shanna@melissa.tv @fat
3 Clementine Bauch nathan@yesenia.net @twitter

You can also invert the colors—with light text on dark backgrounds—with .table-dark.

ID Name Email User ID
1 Leanne Graham sincere@april.biz @mdo
2 Ervin Howell shanna@melissa.tv @fat
3 Clementine Bauch nathan@yesenia.net @twitter

Table head options

Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make <thead>s appear light or dark gray.

ID Name Email User ID
1 Leanne Graham sincere@april.biz @mdo
2 Ervin Howell shanna@melissa.tv @fat
3 Clementine Bauch nathan@yesenia.net @twitter

Table Hover Animation

Add .table-hover-animation to enable a hover stat with animation on table rows within a <tbody>.

ID Name Email User ID
1 Leanne Graham sincere@april.biz @mdo
2 Ervin Howell shanna@melissa.tv @fat
3 Clementine Bauch nathan@yesenia.net @twitter

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>. This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.

ID Name Email User ID
1 Leanne Graham sincere@april.biz @mdo
2 Ervin Howell shanna@melissa.tv @fat
3 Clementine Bauch nathan@yesenia.net @twitter

Striped rows with inverse dark

Use .table-dark with .table-striped to add zebra-striping to any inverse table row within the <tbody>. This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.

ID Name Email User ID
1 Leanne Graham sincere@april.biz @mdo
2 Ervin Howell shanna@melissa.tv @fat
3 Clementine Bauch nathan@yesenia.net @twitter

Bordered table

Add .table-bordered for borders on all sides of the table and cells. For Inverse Dark Table, add .table-dark along with .table-bordered.

ID Name Email User ID
1 Leanne Graham sincere@april.biz @mdo
2 Leanne Graham sincere@april.biz @TwBootstrap
3 Ervin Howell shanna@melissa.tv @fat
4 Clementine Bauch nathan@yesenia.net @twitter

Borderless Table

Add .table-borderless for a table without borders. It can also be used on dark tables.

ID Name Email User ID
1 Leanne Graham sincere@april.biz @mdo
2 Leanne Graham sincere@april.biz @TwBootstrap
3 Ervin Howell shanna@melissa.tv @fat
4 Clementine Bauch nathan@yesenia.net @twitter

Hoverable rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

ID Name Email User ID
1 Leanne Graham sincere@april.biz @mdo
2 Ervin Howell shanna@melissa.tv @fat
3 Clementine Bauch nathan@yesenia.net @twitter

Contextual classes

Use contextual classes to color table rows or individual cells. Read full documnetation here.

ID Name Email User ID
1 Leanne Graham sincere@april.biz @mdo
2 Ervin Howell shanna@melissa.tv @fat
3 Clementine Bauch Graham @twitter
4 Ervin nathan@yesenia.net @gmail
5 Clementine Bauch nathan@yesenia.net @messanger
6 Patricia Lebsack julianne.OConner@kory.org @twitter
7 Chelsey Dietrich lucio_Hettinger@annie.ca @messanger
8 Kurtis Weissnat telly.Hoeger@billy.biz @fat
9 Glenna Reichert chaim_McDermott@dana.io @mdo

Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding .table-responsive class on .table. Or, pick a maximum breakpoint with which to have a responsive table up to by adding .table-responsive{-sm|-md|-lg|-xl}. Read full documnetation here.

Vertical clipping/truncation

Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

Always responsive
# Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Heading 7 Heading 8 Heading 9 Heading 10 Heading 11 Heading 12 Heading 13
1 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell

Theme Customizer

Customize & Preview in Real Time
Menu Colors

Theme Layout
Light
Dark
Semi Dark

Collapse Sidebar
Collapse Menu

Navbar Colors

Footer Type

Hide Scroll To Top
Buy Now