Basic tables Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.

Basic Tables

Using the most basic table markup, here’s how .table-based tables look in SmartAdmin. You can inverse a table by using the class .table-dark

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.

Inverse

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

Custom

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

Dark

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

Themed

#	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 Bordered

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

Table Hover

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

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 Responsive

Make table responsive with .table-responsive. Maximum breakpoint can be applied by adding .table-responsive-sm, .table-responsive-ms, .table-responsive-lg, .table-responsive-xl

#	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