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

Bordered Table

To create border around table and in cells use .table-bordered class together with .table class.

Bordered Striped

To create zebra strip like appearance on even rows use .table-striped class on table.

Bootstrap Table Hover

The class .table-hover enables a hover effect on table row within <tbody>.

Bootstrap Table Borderless

The class .table-borderless removes all borders from the table.

Dark Table

You can create dark background and light text table by adding an extra bootstrap class .table-dark to <table> element.

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.

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.

Points to remember:

1. Use .table class to create a basic bootstrap table.
2. To create border around table and cell use .table-bordered class.
3. To get zebra-strips on row use .table-striped class.
4. For borderless table use .table-borderless class.
5. .table-hover creates a hover effect on the table.
6. Use .table-dark class to create a dark table.
7. For creating the dark head of table use .thead-dark and to get light head use .thead-light in <thead> tag.