WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

Bootstrap 5 Table

Previous Next

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:

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