Tables

Home → Components → Tables

Basic Table

Add Class .table

# First Name Last Name Username Role
1 Mark Otto @mark admin
2 Jacob Thornton @jacob developer
3 Larry the Bird @larry intern
3 Sansa Stark @sansa member
Dark or Inverse Table

Add Class .table-dark.

# First Name Last Name Username Role
1 Mark Otto @mark admin
2 Jacob Thornton @jacob developer
3 Larry the Bird @larry intern
3 Sansa Stark @sansa member
Table head options

Add Class .thead-light or .thead-dark to thead.

# First Name Last Name Username Role
1 Mark Otto @mark admin
2 Jacob Thornton @jacob developer
# First Name Last Name Username Role
1 Mark Otto @mark admin
2 Jacob Thornton @jacob developer
Striped Table

Add Class .table-striped to table.

# First Name Last Name Username Role
1 Mark Otto @mark admin
2 Jacob Thornton @jacob developer
3 Larry the Bird @larry intern
4 Sansa Stark @sansa member
4 Cersei Lannister @cersei ruler
Hoverable Table

Add Class .table-hover

Invoice User Country Date Amount Status
Invoice#AS2469 Mark Otto USA Dec 13, 2017 $450.89 completed
Invoice#AS2470 Jacob Thornton UK Dec 10, 2017 $4150.67 Paid
Invoice#AS2471 Larry Bird AUS Dec 09, 2017 $2120.00 Shipped
Invoice#AS2472 Sansa Stark EU Dec 08, 2017 $3540.10 COD
Bordered Table

Add Class .table-bordered

Task Progress Deadline Action
Design the Fench
Nov 05, 2017
Office Renewation
Jan 05, 2018
Supplies and Purchases
Dec 15, 2017
Health and Safety
Dec 20, 2017
Migrate to New Location
Dec 25, 2017
Sales Report Analytics
Dec 15, 2017
Responsive Table

Add Class .table-responsive

Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

# Table heading 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 Table cell
2 Table cell 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 Table cell

We design delightful digital experiences

Read more about what we do and our philosophy of design. Judge for yourself The work and results we’ve achieved for other clients, and meet our highly experienced Team who just love to design, develop and deploy. Tell Us Your Story
Tell Us Your Story