tutorialstonight logo
A Platform To Learn To Code

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

Run the code

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

Run the code

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

Run the code

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

Run the code

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

Run the code

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

Run the code

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

Run the code

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

Run the code

points to remember 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.
Bootstrap 4 Alert