Dashboard
Cards & Widgets
Charts
Forms
UI Elements
Tables
Maps
Mailbox
Pages

Basic Tables

A collection basic to advanced table design that you can use to your data.

Basic Table

Using the most basic table markup.

Name Position Salary
Tiger Nixon System Architect $320,800
Garrett Winters Accountant $170,750
Ashton Cox Junior Technical Author $86,000
Cedric Kelly Senior Javascript Developer $433,060
Airi Satou Accountant $162,700

Source Code

<table class="table">
  <thead>..</thead>
  <tbody>...</tbody>
</table>
Striped Rows

Add zebra-striping to any table row.

Name Position Salary
Tiger Nixon System Architect $320,800
Garrett Winters Accountant $170,750
Ashton Cox Junior Technical Author $86,000
Cedric Kelly Senior Javascript Developer $433,060
Airi Satou Accountant $162,700

Source Code

<table class="table table-striped">
  <thead>..</thead>
  <tbody>...</tbody>
</table>
Bordered Table

Add borders on all sides of the table and cells.

Name Position Salary
Tiger Nixon System Architect $320,800
Garrett Winters Accountant $170,750
Ashton Cox Junior Technical Author $86,000
Cedric Kelly Senior Javascript Developer $433,060
Airi Satou Accountant $162,700

Source Code

<table class="table table-bordered">
  <thead>..</thead>
  <tbody>...</tbody>
</table>
Hoverable Rows

To enable a hover state on table rows.

Name Position Salary
Tiger Nixon System Architect $320,800
Garrett Winters Accountant $170,750
Ashton Cox Junior Technical Author $86,000
Cedric Kelly Senior Javascript Developer $433,060
Airi Satou Accountant $162,700

Source Code

<table class="table table-hover">
  <thead>..</thead>
  <tbody>...</tbody>
</table>
Color Variations for Table Header

A custom color for the head of the tables.

Name Position Salary
Tiger Nixon System Architect $320,800
Garrett Winters Accountant $170,750
Ashton Cox Junior Technical Author $86,000
Name Position Salary
Tiger Nixon System Architect $320,800
Garrett Winters Accountant $170,750
Ashton Cox Junior Technical Author $86,000

Source Code

<table class="table table-bordered">
  <thead class="bg-info">..</thead>
  <tbody>...</tbody>
</table>
Full Color Variations for Table

A custom color for the head of the tables.

Name Position Salary
Tiger Nixon System Architect $320,800
Garrett Winters Accountant $170,750
Ashton Cox Junior Technical Author $86,000
Name Position Salary
Tiger Nixon System Architect $320,800
Garrett Winters Accountant $170,750
Ashton Cox Junior Technical Author $86,000

Source Code

<!-- available in 10 color variations -->
<table class="table table-bordered table-primary">
  <thead>..</thead>
  <tbody>...</tbody>
</table>