Tables

Base Components are usually small helper components to build Block Components.
These Components can be easily used and customized in any blocks.

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

Copy code

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

Copy code

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

Copy code

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

Copy code

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

Copy code

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

Copy code

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.