{% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-shortcode-nav.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/page-title/shortcode-page-title/shortcode-page-title-base.njk" %}

Bootstrap Tables

Due to the widespread use of tables across third-party widgets like calendars and date pickers, folks from Bootstap designed own tables to be opt-in. Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes. Check out the Bootstrap Table page for more information here .

Basic table

Using the most basic table markup, just add a class .table to the table tag.

#	First Name	Last Name	Username	Status
1	Mark	Otto	@mdo	Expiring
2	Jacob	Thornton	@fat	Success
3	Larry	the Bird	@twitter	Error!
4	htmlstream	Web Design	@htmlstream	Pending

{% set contentTarget = "#shortcode1" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Table inverse

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

#	First Name	Last Name	Username	Status
1	Mark	Otto	@mdo	Expiring
2	Jacob	Thornton	@fat	Success
3	Larry	the Bird	@twitter	Error!
4	htmlstream	Web Design	@htmlstream	Pending

{% set contentTarget = "#shortcode2" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Table head option

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

"Use a class .thead-inverse for dark gray and thead-default for light gray."

#	First Name	Last Name	Username	Status
1	Mark	Otto	@mdo	Expiring
2	Jacob	Thornton	@fat	Success
3	Larry	the Bird	@twitter	Error!
4	htmlstream	Web Design	@htmlstream	Pending

#	First Name	Last Name	Username	Status
1	Mark	Otto	@mdo	Expiring
2	Jacob	Thornton	@fat	Success
3	Larry	the Bird	@twitter	Error!
4	htmlstream	Web Design	@htmlstream	Pending

{% set contentTarget = "#shortcode3" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Table striped rows

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

#	First Name	Last Name	Username	Status
1	Mark	Otto	@mdo	Expiring
2	Jacob	Thornton	@fat	Success
3	Larry	the Bird	@twitter	Error!
4	htmlstream	Web Design	@htmlstream	Pending

{% set contentTarget = "#shortcode4" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Table bordered

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

#	First Name	Last Name	Username	Status
1	Mark	Otto	@mdo	Expiring
2	Jacob	Thornton	@fat	Success
3	Larry	the Bird	@twitter	Error!
4	htmlstream	Web Design	@htmlstream	Pending

{% set contentTarget = "#shortcode5" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Hoverable rows

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

#	First Name	Last Name	Username	Status
1	Mark	Otto	@mdo	Expiring
2	Jacob	Thornton	@fat	Success
3	Larry	the Bird	@twitter	Error!
4	htmlstream	Web Design	@htmlstream	Pending

{% set contentTarget = "#shortcode6" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Tables With Panel

You may cover any tables with the panel examples. You may choose any predefined Unify panels from here . All panels styles can be changed with global classes. You may also create your own style.