Bootstrap 5 Table Design Example – Stylish & Responsive Code

Mastering Bootstrap 5 Table Design: A Comprehensive Guide

In the realm of web development, Bootstrap has long been a trusted ally, providing a robust set of tools to streamline our workflow. With the release of Bootstrap 5, tables have received a significant facelift, offering more customization options and improved responsiveness. Let's delve into the world of Bootstrap 5 table design, exploring its features, components, and best practices.

Understanding Bootstrap 5 Tables

At its core, a Bootstrap 5 table is an HTML table wrapped in a .table class. This class applies basic styling, including consistent cell padding, border, and color. However, Bootstrap 5 goes beyond basic styling, offering a suite of utility classes to customize your tables.

Table Variants

Bootstrap 5 introduces table variants, allowing you to change the appearance of your tables with just a class. The available variants include:

• .table-primary: Applies a blue background color.
• .table-secondary: Applies a gray background color.
• .table-success: Applies a green background color.
• .table-danger: Applies a red background color.
• .table-warning: Applies a yellow background color.
• .table-info: Applies a light blue background color.
• .table-light: Applies a white background color with dark text.
• .table-dark: Applies a dark background color with light text.

Table Sizing

Bootstrap 5 allows you to adjust the size of your tables using responsive utility classes. The available sizes include:

• .table-sm: Applies smaller font sizes and tighter padding.
• .table-lg: Applies larger font sizes and looser padding.

Responsive Tables

Responsiveness is a key feature of Bootstrap 5 tables. By default, Bootstrap 5 makes tables responsive by stacking the columns on small screens. However, you can also use the .table-responsive class to make tables scrollable on small screens.

Horizontal Scrolling

If you prefer horizontal scrolling on small screens, you can use the .table-responsive-sm, .table-responsive-md, .table-responsive-lg, or .table-responsive-xl classes. These classes apply horizontal scrolling only on the specified screen size and above.

Customizing Table Components

Bootstrap 5 allows you to customize various table components, including table headers, table bodies, and table footers. You can use the following classes to style these components:

• .thead-dark: Applies a dark background to the table header.
• .thead-light: Applies a light background to the table header.
• .tbody-bg: Applies a background color to the table body.
• .tfoot-bg: Applies a background color to the table footer.

Styling Table Cells

You can also style individual table cells using the following classes:

• .align-top: Aligns the cell content to the top.
• .align-middle: Aligns the cell content to the middle.
• .align-bottom: Aligns the cell content to the bottom.
• .text-start: Applies left text alignment.
• .text-center: Applies center text alignment.
• .text-end: Applies right text alignment.

Example: A Bootstrap 5 Table

Let's bring all these concepts together and create a Bootstrap 5 table.

In this example, we've created a dark table with a hover effect. The table header has a dark background, and the table footer has a light background. The cells are aligned to the middle and have left text alignment.