Bootstrap 5 Table - Examples, Template, Responsive, HTML

Bootstrap 5 offers pre-designed table templates that you can customize to match your website’s design aesthetic. Creating tables with Bootstrap 5 is straightforward using HTML markup and Bootstrap’s predefined CSS classes. You can easily define table headers, rows, and columns, as well as apply styling and formatting using Bootstrap’s utility classes.

Table of Contents

Bootstrap 5 Table Overview

Bootstrap 5 provides a comprehensive set of utilities and components for creating responsive and visually appealing tables.

Here’s an overview of Bootstrap 5 table features:

Responsive Design: Bootstrap 5 tables are responsive by default, meaning they automatically adjust their layout and size to fit different screen sizes, from large desktops to mobile devices.
Basic Structure: Bootstrap 5 tables follow a basic HTML structure with <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td> elements to organize and display data effectively.
Table Variants: Bootstrap 5 provides various table variants that you can apply to customize the appearance of tables, including striped, bordered, hoverable, dark-themed, and small tables.
Table Responsiveness: You can make tables scrollable horizontally or vertically on smaller screens using the .table-responsive class. This ensures that all table content remains accessible even on devices with limited screen space.
Utility Classes: Bootstrap 5 offers a range of utility classes for styling tables, such as text alignment, table sizing, text color, background color, and more. These classes allow you to quickly apply styles without writing custom CSS.
Customization Options: You can customize the appearance of tables further by combining Bootstrap’s predefined classes with your CSS styles. This flexibility enables you to achieve the desired visual presentation for your tables.
Integration with Other Components: Bootstrap 5 tables seamlessly integrate with other Bootstrap components and utilities, such as forms, buttons, dropdowns, and modal dialogs. This integration enables you to create interactive and dynamic user interfaces.

Overall, Bootstrap 5 provides a robust and flexible framework for creating modern and responsive tables that meet the diverse needs of web developers and designers. Whether you’re building a simple data table or a complex dashboard, Bootstrap 5’s table features offer the tools you need to create professional-looking tables with ease.

Bootstrap 5 Table Templates

Bootstrap 5 offers a variety of table templates that developers can use to create responsive and visually appealing tables for their web projects. Here are some Bootstrap 5 table templates with brief descriptions:

1) Basic Table Template:

The basic table template provides a simple, clean layout for displaying tabular data. It includes responsive classes to ensure the table adapts well to different screen sizes.

<thead>

<tr>

<th>First Name</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>john@example.com</td>

</tr>

<!– Additional rows here –>

</tbody>

</table>

2) Striped Table Template:

This template adds alternating background colors to the table rows, making it easier for users to distinguish between rows. It is useful for improving readability, especially with large datasets.

<!– Table content –>

</table>

3) Bordered Table Template:

The bordered table template adds borders to the table cells, creating a distinct visual separation between rows and columns. This can help improve the table’s overall appearance and structure.

<!– Table content –>

</table>

4) Hoverable Table Template:

With the hoverable table template, table rows change color when hovered over with the cursor, providing visual feedback to users. It enhances interactivity and makes the table more engaging to interact with.

<!– Table content –>

</table>

5) Responsive Table Template:

The responsive table template ensures that the table is fully responsive and mobile-friendly. It automatically adjusts its layout and appearance to fit smaller screens, allowing users to view and interact with the table on various devices.

<!– Table content –>

</table>

</div>

6) Dark Table Template:

This template features a dark-themed table design, with light text on a dark background. It provides a modern and stylish look, suitable for websites and applications with a darker color scheme.

<!– Table content –>

</table>

7) Small Table Template:

The small table template reduces the padding and font size of the table elements, making it more compact and space-efficient. It is ideal for displaying tables with a lot of data in a limited space.

<!– Table content –>

</table>

8) Scrollable Table Template:

The scrollable table template allows users to scroll horizontally to view additional columns beyond the viewport width. It is useful for tables with many columns that may not fit within the available screen space.

<!– Table content –>

</table>

</div>

These Bootstrap 5 table templates provide developers with a solid foundation for creating functional and visually appealing tables for their web projects. They can be easily customized and extended to meet specific design and functionality requirements.

Bootstrap 5 Table Responsive

To create a responsive table in Bootstrap 5, you can use the .table-responsive class along with the standard Bootstrap table classes. Here’s how you can do it:

<thead>

<tr>

<th scope=”col”>First Name</th>

<th scope=”col”>Username</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

<td>Smith</td>

<td>@jane_smith</td>

</tr>

<!– Additional rows go here –>

</tbody>

</table>

</div>

In this example:

The outer <div> element has the class table-responsive, which makes the table scroll horizontally on smaller screens.
Inside the <div>, a <table> element with the class table is used to create a basic Bootstrap table.
The <thead> element contains the table header row (<tr>) with table header cells (<th>).
The <tbody> element contains the table body rows (<tr>) with table data cells (<td>).
Each row (<tr>) consists of data cells corresponding to each column header.

You can customize the table further by adding Bootstrap table classes like table-striped, table-bordered, table-hover, etc., to achieve different styles and functionalities as needed.

Remember to include the necessary Bootstrap CSS and JavaScript files in your project to ensure that the Bootstrap styles and responsive behavior are applied correctly.

Bootstrap 5 Table HTML

Below is an example of a basic HTML structure for a Bootstrap 5 table:

<!DOCTYPE html>

<head>

<title>Bootstrap 5 Table Example</title>

<!– Bootstrap CSS –>

</head>

<body>

<h2>Bootstrap 5 Table Example</h2>

<thead>

<tr>

<th>First Name</th>

<th>Username</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

<td>Smith</td>

<td>@jane_smith</td>

</tr>

</tbody>

</table>

</div>

<!– Bootstrap JS (Optional, for dropdowns, modals, etc.) –>

</body>

</html>

In this HTML code:

We include the Bootstrap CSS and JavaScript files from a CDN (Content Delivery Network).
Inside the <body> tag, we create a <div> with the class container to center the content and provide padding.
Inside the <div>, we have a <h2> heading and a <table> element with the class table.
The <thead> section contains a table header row (<tr>) with table header cells (<th>).
The <tbody> section contains table body rows (<tr>) with table data cells (<td>).
Each row (<tr>) represents a record, and each cell (<td>) contains data corresponding to the column headers.
Finally, we include the Bootstrap JS file (optional) for additional functionality like dropdowns, modals, etc.

Also Read: Bootstrap 4 Form: Tutorial and Examples

Bootstrap 5 Table Column Width

In Bootstrap 5, you can control the column width of a table using predefined width classes or custom CSS. Below are examples demonstrating how to set column widths in a Bootstrap 5 table:

1) Using Predefined Width Classes:

<thead>

<tr>

<th style=”width: 20%”>Column 1</th>

<th style=”width: 30%”>Column 2</th>

<th style=”width: 50%”>Column 3</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<!– Additional rows –>

</tbody>

</table>

2) Using Custom CSS:

<style>

.custom-table th:nth-child(1),

.custom-table td:nth-child(1) {

width: 20%;

}

.custom-table th:nth-child(2),

.custom-table td:nth-child(2) {

width: 30%;

}

.custom-table th:nth-child(3),

.custom-table td:nth-child(3) {

width: 50%;

}

</style>

<thead>

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<!– Additional rows –>

</tbody>

</tabl

In both examples:

We specify the width of each column using either inline style attributes (for inline styling) or custom CSS classes (for external styling).
Adjust the percentages (20%, 30%, 50%) according to your desired column widths.
Replace “Column 1”, “Column 2”, “Column 3” with your actual column headings, and “Cell 1”, “Cell 2”, “Cell 3” with your table data.

Choose the method that best suits your project requirements and styling preferences.

Bootstrap 5 Table Codepen

Here’s a simple Bootstrap 5 table example implemented in CodePen:

<!DOCTYPE html>

<head>

<title>Bootstrap 5 Table Example</title>

<!– Bootstrap CSS –>

</head>

<body>

<h2>Bootstrap 5 Table Example</h2>

<thead>

<tr>

<th>First Name</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>john@example.com</td>

</tr>

<tr>

<td>Smith</td>

<td>jane@example.com</td>

</tr>

<tr>

<td>Michael</td>

<td>Johnson</td>

<td>michael@example.com</td>

</tr>

</tbody>

</table>

</div>

<!– Bootstrap JS (optional) –>

</body>

</html>

Also Read: Bodyparser: Middleware in Node.js

Bootstrap 5 Table Examples

Here are some Bootstrap 5 table examples with explanations:

1) Basic Table:

<thead>

<tr>

<th>First Name</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>john@example.com</td>

</tr>

<!– Additional rows –>

</tbody>

</table>

Explanation: This is a basic Bootstrap 5 table with headers (th) and rows (tr). It displays information such as a user’s ID, first name, last name, and email address.

2) Striped Table:

<!– Table content –>

</table>

Explanation: The table-striped class adds zebra-striping to the table rows for better readability. Each odd row is shaded to improve visual distinction.

3) Hoverable Table:

<!– Table content –>

</table>

Explanation: The table-hover class adds a hover effect to table rows. When a user hovers over a row, it changes color to indicate interactivity.

4) Bordered Table:

<!– Table content –>

</table>

Explanation: The table-bordered class adds borders to all table cells and the table itself, providing a clear visual separation between rows and columns.

5) Responsive Table:

<!– Table content –>

</table>

</div>

Explanation: The table-responsive class ensures that the table is horizontally scrollable on smaller screens to prevent overflow. It enables users to view all table content without sacrificing readability.

6) Dark Table:

<!– Table content –>

</table>

Explanation: The table-dark class applies a dark theme to the table, making it suitable for applications with a darker color scheme.

7) Small Table:

<!– Table content –>

</table>

Explanation: The table-sm class reduces the padding and font size of the table, making it more compact and suitable for displaying large amounts of data in a confined space.

8) Borderless Table:

<!– Table content –>

</table>

Explanation: The table-borderless class removes all borders from the table, creating a seamless and minimalist appearance.

9) Sticky Header Table:

<!– Table content –>

</table>

</div>

Explanation: Adding custom CSS to make the table header sticky ensures that the header remains visible as the user scrolls through the table content, improving usability.

10) Striped and Hoverable Table:

<!– Table content –>

</table>

Explanation: Combining the table-striped and table-hover classes creates a table with alternating row colors and hover effects for improved readability and interactivity.

For Latest Tech Related Information, Join Our Official Free Telegram Group : PW Skills Telegram Group

Bootstrap 5 Table FAQ's

What is a Bootstrap 5 table?

A Bootstrap 5 table is a responsive and customizable HTML table component provided by the Bootstrap framework. It allows developers to create structured data tables with various features such as pagination, sorting, and styling.

What are some common classes used with Bootstrap 5 tables?

Some common classes used with Bootstrap 5 tables include table-striped (for adding zebra-striping to the table), table-bordered (for adding borders to all cells), table-hover (for adding hover effect to rows), and table-dark (for applying a dark theme to the table).

How can I add pagination to a Bootstrap 5 table?

Bootstrap 5 doesn't provide built-in pagination functionality for tables. However, you can manually implement pagination using JavaScript or server-side logic to limit the number of rows displayed per page and provide navigation controls.

Can I customize the appearance of a Bootstrap 5 table?

Yes, you can customize the appearance of a Bootstrap 5 table using custom CSS. You can override default styles or add your own styles to achieve the desired look and feel for your table.

Are there any JavaScript plugins available for enhancing Bootstrap 5 tables?

Yes, there are several JavaScript plugins available for enhancing Bootstrap 5 tables with features like sorting, filtering, and pagination. Some popular plugins include DataTables, Bootstrap Table, and Tabulator.