basic table
  1. Dashboard
  2. table
  3. basic table
Basic Table

Add class tablein table tag.

#First NameLast NameUsernameRole
1JensBrinckerBrincker123admin
2MarkHayHay123member
3AnthonyDavieDavie123developer
4DavidPerryPerry123supporter
5AnthonyDavieDavie123member
6AlanGilchristGilchrist123supporter
Table Hover

Add class table-hoverin table tag.

#ProductsPopularitySales
1Milk Powder0,-3,-2,-4,5,-4,3,-2,5,-128.76%
2Air Conditioner0,-1,1,-2,-3,1,-2,-3,1,-28.55%
3RC Cars0,3,6,1,2,4,6,3,2,158.56%
4Down Coat0,3,6,4,5,4,7,3,4,235.76%
Bordered Table

Add class table-borderedin table tag for borders on all sides of the table and cells.

TaskProgressDeadlineAction
Lunar probe project
May 15, 2015
Dream successful plan
July 1, 2015
Office automatization
Apr 12, 2015
The sun climbing plan
Aug 9, 2015
Open strategy
Apr 2, 2015
Tantas earum numeris
July 11, 2015
striped Table

Add class table-stripedin table tag.

TaskProgressDeadlineAction
Lunar probe project
May 15, 2015
Dream successful plan
July 1, 2015
Office automatization
Apr 12, 2015
The sun climbing plan
Aug 9, 2015
Open strategy
Apr 2, 2015
Tantas earum numeris
July 11, 2015
Responsive Table

Create responsive tables by wrapping any tablein table-responsive class.

InvoiceUserDateAmountStatusCountry
Order #26589Herman BeckOct 16, 2016$45.00
Paid
EN
Order #58746Mary AdamsOct 12, 2016$245.30
Shipped
CN
Order #98458Caleb RichardsMay 18, 2016$38.00
Shipped
AU
Order #32658June LaneApr 28, 2016$77.99
Paid
FR
Contextual Classes

Use classes ( .active, .success, .info, .warning, .danger )to color table rows or individual cells

#Column headingColumn headingColumn heading
1Column contentColumn contentColumn content
2Column contentColumn contentColumn content
3Column contentColumn contentColumn content
4Column contentColumn contentColumn content
5Column contentColumn contentColumn content
Table style 1

Create style tables by wrapping any table with class table table-stripedin color-bg-tableclass.

#First NameLast NameUsernameRole
1JensBrinckerBrincker123admin
2MarkHayHay123member
3AnthonyDavieDavie123developer
4DavidPerryPerry123supporter
5AnthonyDavieDavie123member
6AlanGilchristGilchrist123supporter
Table style 2

Create style tables by wrapping any table with class table table-striped table-borderedin color-bg-tableclass.

#First NameLast NameUsernameRole
1JensBrinckerBrincker123admin
2MarkHayHay123member
3AnthonyDavieDavie123developer
4DavidPerryPerry123supporter
5AnthonyDavieDavie123member
6AlanGilchristGilchrist123supporter