Bootstrap Tables

Basic Tables

Using the most basic table markup, 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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Example 2: Minimal Table with no outer spacing.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@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.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Inverse table

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Striped rows with inverse table

Use .table-inverse 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.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Inverse table with info background

You can also invert the colors—with light text on dark backgrounds—with .bg-info, .bg-success, .bg-warning and .bg-danger classes.

To set the light background color use .bg-[color] class where [color] is the value of your selected color from chameleon color palette. So for teal color background class will be .bg-teal. Refer HTML markup line no 1. Background color class is a optional if you don't it will take white background default.

To set the selected background color lighten use .bg-lighten-[*] class where [*] is the value between '1-5' of your selected lighten color from chameleon color palette. So for color lighten 4 background class will be .bg-lighten-4. Refer HTML markup line no 1. Background lighten color class is a optional if you don't it will take white background default.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Table head options

Similar to default and inverse tables, use one of two modifier classes .thead-default or .thead-inverse to make <thead>s appear light or dark gray.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Table head options with primary background

Use background classes bg-* to make custom thead background. You can also use Chameleon Admin color palette classes for background.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Mark	Otto	@TwBootstrap
3	Jacob	Thornton	@fat
4	Larry the Bird		@twitter

Bordered striped

Use .table-striped with .table-bordered to add zebra-striping to any table row within the <tbody>.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Mark	Otto	@TwBootstrap
3	Jacob	Thornton	@fat
4	Larry the Bird		@twitter

Bordered Table Inverse

Use .table-inverse with .table-bordered to add zebra-striping to any table row within the <tbody>.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Mark	Otto	@TwBootstrap
3	Jacob	Thornton	@fat
4	Larry the Bird		@twitter

Hoverable rows

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Contextual classes

Use contextual classes to color table rows or individual cells.

Class	Description
`.table-active`	Applies the hover color to a particular row or cell
`.table-success`	Indicates a successful or positive action
`.table-info`	Indicates a neutral informative change or action
`.table-warning`	Indicates a warning that might need attention
`.table-danger`	Indicates a dangerous or potentially negative action

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
4	Larry	the Bird	@twitter
5	Larry	the Bird	@twitter
6	Larry	the Bird	@twitter
7	Larry	the Bird	@twitter
8	Larry	the Bird	@twitter
8	Larry	the Bird	@twitter

Contextual classes inverse

Regular table background variants are not available with the inverse table, however, you may use text or background utilities to achieve similar styles.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
4	Larry	the Bird	@twitter
5	Larry	the Bird	@twitter
6	Larry	the Bird	@twitter
7	Larry	the Bird	@twitter
8	Larry	the Bird	@twitter
8	Larry	the Bird	@twitter

Captions

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

List of users
#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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}.

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

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	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
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	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
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

Breakpoint specific

Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

#	Table heading	Table heading	Table heading	Table heading	Table heading
1	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell

#	Table heading	Table heading	Table heading	Table heading	Table heading
1	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell

#	Table heading	Table heading	Table heading	Table heading	Table heading
1	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell

#	Table heading	Table heading	Table heading	Table heading	Table heading
1	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell