Bootstrap Table

A basic Bootstrap 5 table has a light padding and horizontal dividers.

The .table class adds basic styling to a table:

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

Striped Rows

The .table-striped class adds zebra-stripes to a table.

Bordered Table

The .table-bordered class adds borders on all sides of the table and cells.

Hover Rows

The .table-hover class adds a hover effect (grey background color) on table rows.

Black/Dark Table

The .table-dark class adds a black background to the table.

Dark Striped Table

Combine .table-dark and .table-striped to create a dark, striped table.

Hoverable Dark Table

The .table-hover class adds a hover effect (grey background color) on table rows.

Borderless Table

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

Contextual Classes

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

Small Table

The .table-sm class makes the table smaller by cutting cell padding in half.

Responsive Tables

The .table-responsive class adds a scrollbar to the table when needed (when it is too big horizontally)

Key points of Bootstrap Table

1. Table Classes

• .table: Base class for styling a table.
• .table-striped: Adds zebra-striping to the table rows for a better visual distinction.
• .table-bordered: Adds borders to all table cells.
• .table-hover: Highlights rows on hover.
• .table-sm: Makes the table more compact by reducing cell padding.

2. Responsive Tables

• Use the class .table-responsive to make tables scrollable horizontally on small screens. Wrap your <table> element in a <div class="table-responsive">.

3. Contextual Classes

• .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, .table-dark
• These classes can be used on or elements to style specific rows or cells.

4. Table Head and Footers

• Use <thead> and <tfoot> to define table headers and footers.
• You can apply contextual classes to headers and footers as well.

5. Border Variants

• .table-borderless: Removes borders from the table for a cleaner look.
• .table-bordered: Adds a border to each cell, improving the table's visibility.

6. Captions

• Use the <caption> element to add a title or description to the table. The caption appears at the top of the table by default.

7. Allignment and Text Styling

• .text-center, .text-left, .text-right
• Additionally, you can use classes like .font-weight-bold to style text.