Basic Tables

Add .table to any <table> element for basic styling with horizontal dividers. The .table class adds basic padding and borders to table elements.

Default

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

Inverse

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

Table head

Similar to default and inverse tables, use one of two modifier classes to make <thead>s appear custom, dark gray, white and themed.

Dark

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

Light

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

Table rows

Add .table-striped to add zebra-striping to any table, and add .table-dark for inverse pattern

Pattern

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

Pattern inverse

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

Table Responsive

Make table responsive with .table-responsive. Maximum breakpoint can be applied by adding .table-responsive-sm, .table-responsive-md, .table-responsive-lg, .table-responsive-xl, .table-responsive-xxl, or .table-responsive-xxxl

#	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

Table Bordered

Add .table-bordered for borders on all sides of the table and cells. Border color utilities can be added to change colors.

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

Table Hover

Add .table-hover to enable a hover state on table rows within a <tbody>. You can also add .table-dark for dark tables.

Hoverable

#	First Name	Last Name	Username
1	Jhon	Stone	@jhon
2	Lisa	Nilson	@lisa
3	Larry	the Bird	@twitter

Inverse

#	First Name	Last Name	Username
1	Jhon	Stone	@jhon
2	Lisa	Nilson	@lisa
3	Larry	the Bird	@twitter

Contextual classes

Use contextual classes to color table rows or individual cells. See the full list of color selection

#	First Name	Last Name	Username
1	Lisa	Nilson	@lisa
2	Lisa	Nilson	@lisa
3	Nick	looper	@king
4	Joan	thestar	@joan
5	Sean	coder	@coder
6	Sean	coder	@coder

Table Small

Add .table-sm to make tables more compact by cutting cell padding in half. See the full list of color selection to add backgrounds as well

Compact

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

With background

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

Table nano

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