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.

.table-striped

Adds zebra-stripes to a table

.table-bordered

Adds borders on all sides of the table and cells

.table-borderless

Add .table-borderless for a table without borders.

.table-hover

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

.table-sm

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;
}