HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
A basic Bootstrap 4 table has a light padding and horizontal dividers
A basic Bootstrap 4 table has a light padding and horizontal dividers.
The .table
class adds basic styling to a table:
Firstname | Lastname |
---|
John | Doe | john@example.com |
Mary | Moe | mary@example.com |
July | Dooley | july@example.com |
The .table-striped
class adds zebra-stripes to a table:
Firstname | Lastname |
---|
John | Doe | john@example.com |
Mary | Moe | mary@example.com |
July | Dooley | july@example.com |
The .table-bordered
class adds borders on all sides of the table and cells:
Firstname | Lastname |
---|
John | Doe | john@example.com |
Mary | Moe | mary@example.com |
July | Dooley | july@example.com |
The .table-hover
class adds a hover effect (grey background color) on table rows:
Firstname | Lastname |
---|
John | Doe | john@example.com |
Mary | Moe | mary@example.com |
July | Dooley | july@example.com |
The .table-dark
class adds a black background to the table:
Firstname | Lastname |
---|
John | Doe | john@example.com |
Mary | Moe | mary@example.com |
July | Dooley | july@example.com |
Combine .table-dark
and .table-striped
to create a dark, striped table:
Firstname | Lastname |
---|
John | Doe | john@example.com |
Mary | Moe | mary@example.com |
July | Dooley | july@example.com |
The .table-hover
class adds a hover effect (grey background color) on table rows:
Firstname | Lastname |
---|
John | Doe | john@example.com |
Mary | Moe | mary@example.com |
July | Dooley | july@example.com |
The .table-borderless
class removes borders from the table:
Firstname | Lastname |
---|
John | Doe | john@example.com |
Mary | Moe | mary@example.com |
July | Dooley | july@example.com |
Contextual classes can be used to color the whole table (<table>
),
the table rows (<tr>
) or table cells (<td>
).
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 |
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 |
The .thead-dark
class adds a black background to table headers, and the .thead-light
class adds a grey background to table headers:
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 |
The .table-sm
class makes the table smaller by cutting cell padding in half:
Firstname | Lastname |
---|
John | Doe | john@example.com |
Mary | Moe | mary@example.com |
July | Dooley | july@example.com |
The .table-responsive
class adds a scrollbar
to the table when needed (when it is too big horizontally):
<div class="table-responsive">
<table class="table">
...
</table>
</div>
You can also decide when the table should get a scrollbar, depending on screen width:
.table-responsive-sm |
< 576px |
.table-responsive-md |
< 768px |
.table-responsive-lg |
< 992px |
.table-responsive-xl |
< 1200px |
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>