Bootstrap Tables
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
Bootstrap Tables
❮ Previous
Next ❯
Bootstrap Basic Table
A basic Bootstrap table has a light padding and only horizontal dividers.
The .table class adds basic styling to a table:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Try it Yourself »
Striped Rows
The .table-striped class adds zebra-stripes to a table:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Try it Yourself »
Bordered Table
The .table-bordered class adds borders on all sides of the table and cells:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Try it Yourself »
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
Hover Rows
The .table-hover class adds a hover effect (grey background color) on table rows:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Try it Yourself »
Condensed Table
The .table-condensed class makes a table more compact by cutting cell padding in half:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Try it Yourself »
Contextual Classes
Contextual classes can be used to color table rows (<tr>) or table cells (<td>):
Example
| Firstname | Lastname | |
|---|---|---|
| Default | Defaultson | def@somemail.com |
| Success | Doe | john@example.com |
| Danger | Moe | mary@example.com |
| Info | Dooley | july@example.com |
| Warning | Refs | bo@example.com |
| Active | Activeson | act@example.com |
Try it Yourself »
The contextual classes that can be used are:
| Class | Description |
|---|---|
.active | Applies the hover color to the table row or table cell |
.success | Indicates a successful or positive action |
.info | Indicates a neutral informative change or action |
.warning | Indicates a warning that might need attention |
.danger | Indicates a dangerous or potentially negative action |
Responsive Tables
The .table-responsive class creates a responsive table. The table will then
scroll horizontally on small devices (under 768px). When viewing on anything
larger than 768px wide, there is no difference:
Example
<div class="table-responsive">
<table class="table">
...
</table>
</div> Try it Yourself »
Test Yourself with Exercises!
Exercise 1 »
Exercise 2 »
Exercise 3 »
Exercise 4 »
Exercise 5 »
Exercise 6 »
Complete Bootstrap Table Reference
For a complete reference of all table classes, go to our complete
Bootstrap Tables Reference.
❮ Previous
Next ❯