Bootstrap 4 Tables
Clash Royale CLAN TAG#URR8PPP googletag.cmd.push(function() googletag.display('div-gpt-ad-1422003450156-2'); );
Bootstrap 4 Tables
❮ Previous
Next ❯
Bootstrap 4 Basic Table
A basic Bootstrap 4 table has a light padding and 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 »
googletag.cmd.push(function() googletag.display('div-gpt-ad-1493883843099-0'); );
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 »
Black/Dark Table
The .table-dark class adds a black background to the table:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Try it Yourself »
Dark Striped Table
Combine .table-dark and .table-striped to create a dark, striped table:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Try it Yourself »
Hoverable Dark Table
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 »
Borderless Table
The .table-borderless class removes borders from the table:
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 the whole table (<table>),
the table rows (<tr>) or table cells (<td>).
Example
| Firstname | Lastname | |
|---|---|---|
| Default | Defaultson | def@somemail.com |
| Primary | Joe | joe@example.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 |
| Secondary | Secondson | sec@example.com |
| Light | Angie | angie@example.com |
| Dark | Bo | bo@example.com |
Try it Yourself »
The contextual classes that can be used are:
| Class | Description |
|---|---|
.table-primary | Blue: Indicates an important action |
.table-success | Green: Indicates a successful or positive action |
.table-danger | Red: Indicates a dangerous or potentially negative action |
.table-info | Light blue: Indicates a neutral informative change or action |
.table-warning | Orange: Indicates a warning that might need attention |
.table-active | Grey: Applies the hover color to the table row or table cell |
.table-secondary | Grey: Indicates a slightly less important action |
.table-light | Light grey table or table row background |
.table-dark | Dark grey table or table row background |
Table Head Colors
The .thead-dark class adds a black background to table headers, and the .thead-light class adds a grey background to table headers:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Try it Yourself »
Small table
The .table-sm class makes the table smaller 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 »
Responsive Tables
The .table-responsive class creates a responsive table: an horizontal scrollbar is added to the table on screens that are less than 992px wide (if needed). When viewing on anything
larger than 992px wide, there is no difference:
Example
<div class="table-responsive">
<table class="table">
...
</table>
</div> Try it Yourself »
You can also decide when the table should get a scrollbar, depending on screen width:
| Class | Screen width |
|---|---|
.table-responsive-sm | < 576px |
.table-responsive-md | < 768px |
.table-responsive-lg | < 992px |
.table-responsive-xl | < 1200px |
Example
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div> Try it Yourself »
<!--
Complete Bootstrap 4 Table Reference
For a complete reference of all table classes, go to our complete
Bootstrap 4 Tables Reference.
-->
❮ Previous
Next ❯