It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

Basic Example

For styling—light padding and only horizontal dividers—add the base class .table to any table.

Project Deadline Leader + Team Budget Status Actions
Gorgeous Rubber Mouse
Pollich, Dooley and Barrows
Saturday
Overdue
Avatar
Gilbert Mraz
MacGyver, Ferry and Deckow
$ 755.00
Paid
invoice
Practical Cotton Car
Leffler - Hammes
Friday
In 6 Days
Avatar
Estell Robel
Konopelski LLC
$ 437.00
Paid
withdrawal
Generic Wooden Hat
Gibson, Purdy and Trantow
Friday
In 6 Days
Avatar
Meredith McClure
Kris, Jones and Schmidt
$ 90.00
Paid
deposit
Gorgeous Concrete Car
MacGyver, Cronin and Lowe
Saturday
In 6 Days
Avatar
Laron Welch
Corwin - McClure
$ 151.00
Paid
payment

Striped Example

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

# First Name Last Name E-mail Nick Role
1 Dino Reichert Darron_Muller@hotmail.com Rudy_Morar86 Orchestrator
2 Irving Goodwin Leatha_Kub@hotmail.com August_Hammes Technician
3 Cheyenne Stanton Hassan69@gmail.com Justina.Barrows Coordinator
4 Emilia Hyatt Santos.Goodwin@hotmail.com Robbie91 Coordinator

Hover Example

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

# Product Name Stats Last Month
1 Sleek Concrete Soap 5,3,9,6,5,9,7,3,5,2 27.87%
2 Handmade Metal Bike 5,3,2,-1,-3,-2,2,3,5,2 54.09%
3 Generic Rubber Salad 0,-3,-6,-4,-5,-4,-7,-3,-5,-2 0.17%
4 Generic Steel Sausages 5,3,2,-1,-3,-2,2,3,5,2 100.98%

Borderd Example

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

Ticket Completion Create Deadline Actions
Right-sized grid-enabled hierarchy
60% Complete
December 15, Wednesday, 2015 July 28, Monday, 2016
Expanded asymmetric conglomeration
60% Complete
October 15, Tuesday, 2015 September 28, Thursday, 2016
Innovative global hub
60% Complete
August 15, Monday, 2015 March 28, Tuesday, 2016
Proactive hybrid knowledge user
60% Complete
January 15, Saturday, 2015 April 28, Saturday, 2016

Condensed Example

Add .table-condensed to make tables more compact by cutting cell padding in half.

# Name Price Date
Invoice #6449 Elaina Maggio $ 740.00 May 15, Wednesday, 2015
Invoice #4981 German Gorczany $ 424.00 April 15, Friday, 2015
Invoice #1233 Savannah Baumbach $ 191.00 May 15, Friday, 2015
Invoice #1501 Cloyd Haag $ 133.00 December 15, Sunday, 2015

Responsive Example

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px).

ID Name Amount Payment
#7536 Braden Muller $ 834.00 invoice
#6855 Rosemarie Lind $ 622.00 payment
#8306 Eldred Muller $ 373.00 withdrawal
#3616 Gay Marks $ 265.00 deposit

Contextual Example

Use contextual classes to color table rows or individual cells.

Invoice Name Date Price Status Country
#2497 Julia Hand December 15, Tuesday, 2015 $ 926.00 Savings Account Turkmenistan
#8657 Brett Ledner February 15, Wednesday, 2015 $ 320.00 Investment Account British Indian Ocean Territory (Chagos Archipelago)
#0351 Gerard Abernathy September 15, Thursday, 2015 $ 993.00 Checking Account Isle of Man
#4650 Golda Bernier April 15, Thursday, 2015 $ 908.00 Checking Account Andorra
#9179 Brenda Kuhlman February 15, Wednesday, 2015 $ 408.00 Investment Account Eritrea
#6160 Zackary Schmeler July 15, Saturday, 2015 $ 851.00 Investment Account Libyan Arab Jamahiriya
#2989 Vallie Hyatt March 15, Thursday, 2015 $ 106.00 Credit Card Account Montserrat
#9386 Ismael Greenfelder May 15, Wednesday, 2015 $ 750.00 Auto Loan Account Netherlands

Navbar Options

Header Layout

Sidebar Options

Content View

Footer Options

Main Color

Navbar

Sidebar