Bootstrap 5 Tables: A Complete Guide"

In Bootstrap 5, creating and styling tables is simple and flexible with a variety of built-in table classes. These classes help you quickly design tables with different styles, colors, borders, and responsive behavior.

Basic Table
Striped Rows
Bordered Table
Hoverable Rows
Responsive Table
Small Table
Dark Table
Contextual Classes
Aligning Content
Combining Styles

Basic Table:

To create a basic table, use the .table class:

Example

Try it yourself

Striped Rows:

Add the table-striped class to create striped rows for better readability.

Example

Try it yourself

Bordered Table:

Add the table-bordered class to create borders to all table cells.

Example

Try it yourself

Hoverable Rows:

Add the table-hover to highlight rows when hovered.

Example

Try it yourself

Responsive Table:

To make tables scrollable on smaller screens, wrap them in .table-responsive.

Example

Try it yourself

Small Table:

Use .table-sm to make a more compact table with smaller cell padding.

Example

Try it yourself

Table with Dark Theme:

Use .table-dark for a dark background with light text.

Example

Try it yourself

Contextual Classes:

Add row or cell-level styling with contextual classes:

Class	Description
.table-primary	Blue background
.table-secondary	Gray background
.table-success	Green background
.table-danger	Red background
.table-warning	Yellow background
.table-info	Light blue background
.table-light	Light background
.table-dark	Dark background

Example

Try it yourself

Aligning Content:

Use alignment classes inside table cells.

Class Name	Alignment
.text-start	Left align
.text-center	Center align
.text-end	Right align

Example

Try it yourself

Combining Styles:

Combine multiple classes for a styled table:

Example

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.