BOOTSTRAP 4 TABLE
The Bootstrap provides a bunch of classes to style your HTML table and enhance its look. This section covers bootstrap table styling with examples.
Bootstrap Table
Use of table is widespread like in calendars, date picker, telephone directory, etc so, bootstrap has designed its table to be very flexible.
To create a basic table use .table
class on your HTML table. It creates a light padding and horizontal dividers
Id | User | Age |
---|---|---|
A1 | Jean | 25 |
A2 | Leo | 32 |
A3 | Jimmy | 21 |
Exmple: Basic table
Bordered Table
To create border around table and in cells use .table-bordered
class together with .table
class.
Id | User | Age |
---|---|---|
A1 | Jean | 25 |
A2 | Leo | 32 |
A3 | Jimmy | 21 |
Exmple: Table bordered
Bordered Striped
To create zebra strip like appearance on even rows use .table-striped
class on table.
Id | User | Age |
---|---|---|
A1 | Jean | 25 |
A2 | Leo | 32 |
A3 | Jimmy | 21 |
Exmple: Table striped
Bootstrap Table Hover
The class .table-hover
enables a hover effect on table row within <tbody>.
Id | User | Age |
---|---|---|
A1 | Jean | 25 |
A2 | Leo | 32 |
A3 | Jimmy | 21 |
Exmple: Table hover effect
Bootstrap Table Borderless
The class .table-borderless
removes all borders from the table.
Id | User | Age |
---|---|---|
A1 | Jean | 25 |
A2 | Leo | 32 |
A3 | Jimmy | 21 |
Exmple: Borderless Table
Dark Table
You can create dark background and light text table by adding an extra bootstrap class .table-dark
to <table> element.
Id | User | Age |
---|---|---|
A1 | Jean | 25 |
A2 | Leo | 32 |
A3 | Jimmy | 21 |
Exmple: Dark Table
You can also use .table-stripped
, .table-bordered
, .table-hover
and .table-borderless
with .table-dark
class to get those effect in dark table.
Here is an example of dark table hover.
Id | User | Age |
---|---|---|
A1 | Jean | 25 |
A2 | Leo | 32 |
A3 | Jimmy | 21 |
Exmple: Dark Table Hover
Dark and Light Table Head
Similarly, like the dark and light table, you can create a dark head and light head using bootstrap classes.
To create dark head use .thead-dark
class and to create light head use .thead-light
class in <thead> tag.
Id | User | Age |
---|---|---|
A1 | Jean | 25 |
A2 | Leo | 32 |
A3 | Jimmy | 21 |
Exmple: Dark Head Table
- Use
.table
class to create a basic bootstrap table. - To create border around table and cell use
.table-bordered
class. - To get zebra-strips on row use
.table-striped
class. - For borderless table use
.table-borderless
class. .table-hover
creates a hover effect on the table.- Use
.table-dark
class to create a dark table. - For creating the dark head of table use
.thead-dark
and to get light head use.thead-light
in <thead> tag.