How to Format Tables Using Bootstrap

Bootstrap provides a nice and clean layout for building tables. If you want some light padding and horizontal dividers, add the base class: .table. Along with the base table class, you can use additional classes to style the table.


Adds zebra-stripes to a table


Adds borders on all sides of the table and cells


Add .table-borderless for a table without borders.


Adds a hover effect (grey background color) on table rows


Makes a table more compact by reducing cell padding in half

Contextual Classes

Contextual classes can be used to color table rows (<tr> or <th>) or table cells (<td>).

  • .table-active
  • .table-primary
  • .table-secondary
  • .table-success
  • .table-info
  • .table-warning 
  • .table-danger
  • .table-light
  • .table-dark

Bootstrap CSS

1. Table

.table {
width: 100%;
margin-bottom: 1rem;
color: #212529;

2. Table Bordered

.table-bordered {
border: 1px solid #dee2e6;