Just like Bootstrap 3 and Bootstrap 4 tables, you may create tables in Bootstrap 5 with various styles by utilizing built-in classes.
These include:
- Tables with contextual classes for colors
- Creating tables with striped rows
- Stripped columns
- Tables with Hovered rows
- Active Tables
- Tables with and without borders
- Add footer in a table by using tfoot tag.
You may see the demos with codes in the section below.
An example of a basic table using Bootstrap 5
Let us start the examples of Bootstrap 5 tables with a basic one. In this example, we just included the Bootstrap 5 CSS from the CDN in the head section of the web page. Four dummy rows are created for demonstration:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="m-4"> <table class="table"> <thead> <tr> <th>Serial No</th> <th>Month</th> <th>Number of Sales </th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>January</td> <td>105 </td> <td>$15,000.00</td> </tr> <tr> <td>2</td> <td>February</td> <td>95</td> <td>$12,000.00</td> </tr> <tr> <td>3</td> <td>March</td> <td>150</td> <td>$20,000.00</td> </tr> <tr> <td>4</td> <td>April</td> <td>50</td> <td>$30,00.00</td> </tr> </tbody> </table> </div> </body> </html>
The demo of the table with contextual classes
In this example, we created different colored table rows by using the built-in contextual classes for table. Different contextual classes have specific meanings and colors. For example, success represents green, danger as red, and so on. A few of the available contextual classes are:
- table-dark
- table-light
- table-primary
- table-success
- table-danger
- table-info
- table-warning
- table-active
The usage of this is shown below:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="m-4"> <table class="table"> <thead> <tr class="table-success"> <th>Serial No</th> <th>Month</th> <th>Number of Sales </th> <th>Amount</th> </tr> </thead> <tbody> <tr class="table-primary"> <td>1</td> <td>January</td> <td>105 </td> <td>$15,000.00</td> </tr> <tr class="table-light"> <td>2</td> <td>February</td> <td>95</td> <td>$12,000.00</td> </tr> <tr class="table-warning"> <td>3</td> <td>March</td> <td>150</td> <td>$20,000.00</td> </tr> <tr class="table-danger"> <td>4</td> <td>April</td> <td>50</td> <td>$30,00.00</td> </tr> </tbody> </table> </div> </body> </html>
Stripped table example with code
Creating stripped tables is pretty easy by using the .table-striped class at the table tag level. This will create table rows with zebra-stripping as shown in the demo below:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="m-4"> <table class="table table-striped"> <thead> <tr> <th>Serial No</th> <th>Month</th> <th>Number of Sales </th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>January</td> <td>105 </td> <td>$15,000.00</td> </tr> <tr> <td>2</td> <td>February</td> <td>95</td> <td>$12,000.00</td> </tr> <tr> <td>3</td> <td>March</td> <td>150</td> <td>$20,000.00</td> </tr> <tr> <td>4</td> <td>April</td> <td>50</td> <td>$30,00.00</td> </tr> </tbody> </table> </div> </body> </html>
An example of a table with hovered rows
You may use the built-in .table-hover class for making rows in the hover state. For the demo, the .table-hover is added in the table tag. A row is created with the .table-success class, so you may see the hover effect in a colored row as well:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="m-4"> <table class="table table-hover"> <thead> <tr class="table-primary"> <th>Serial No</th> <th>Month</th> <th>Number of Sales </th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>January</td> <td>105 </td> <td>$15,000.00</td> </tr> <tr> <td>2</td> <td>February</td> <td>95</td> <td>$12,000.00</td> </tr> <tr class="table-success"> <td>3</td> <td>March</td> <td>150</td> <td>$20,000.00</td> </tr> <tr> <td>4</td> <td>April</td> <td>50</td> <td>$30,00.00</td> </tr> </tbody> </table> </div> </body> </html>
An example of a bordered table
For adding borders on all sides of the table, just add the table-bordered class in the main table tag. For the demo, I just added this class to the above example (hovered table) and see the output:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="m-4"> <table class="table table-hover table-bordered"> <thead> <tr class="table-primary"> <th>Serial No</th> <th>Month</th> <th>Number of Sales </th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>January</td> <td>105 </td> <td>$15,000.00</td> </tr> <tr> <td>2</td> <td>February</td> <td>95</td> <td>$12,000.00</td> </tr> <tr class="table-success"> <td>3</td> <td>March</td> <td>150</td> <td>$20,000.00</td> </tr> <tr> <td>4</td> <td>April</td> <td>50</td> <td>$30,00.00</td> </tr> </tbody> </table> </div> </body> </html>
Borderless table example
Similarly, you may create a borderless table by using the .table-borderless class. Have a look:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="m-4"> <table class="table table-hover table-borderless"> <thead> <tr class="table-primary"> <th>Serial No</th> <th>Month</th> <th>Number of Sales </th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>January</td> <td>105 </td> <td>$15,000.00</td> </tr> <tr> <td>2</td> <td>February</td> <td>95</td> <td>$12,000.00</td> </tr> <tr class="table-success"> <td>3</td> <td>March</td> <td>150</td> <td>$20,000.00</td> </tr> <tr> <td>4</td> <td>April</td> <td>50</td> <td>$30,00.00</td> </tr> </tbody> </table> </div> </body> </html>
Specifying table head color
Want to specify table header color only? You may give the contextual class to the <thead> class. See an example below where we provided the .table-primary class to the table header:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="m-4"> <table class="table"> <thead class="table-primary"> <tr> <th>Serial No</th> <th>Month</th> <th>Number of Sales </th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>January</td> <td>105 </td> <td>$15,000.00</td> </tr> <tr> <td>2</td> <td>February</td> <td>95</td> <td>$12,000.00</td> </tr> <tr> <td>3</td> <td>March</td> <td>150</td> <td>$20,000.00</td> </tr> <tr> <td>4</td> <td>April</td> <td>50</td> <td>$30,00.00</td> </tr> </tbody> </table> </div> </body> </html>
How to create responsive tables?
You may create responsive tables using BS5 by using its built-in class.
In all of the above examples, if table data is more than the viewport space, no scrollbar will display at the table level. However, the scrollbar appears at the webpage level.
For showing the horizontal scrollbar at table level, you may specify the .table-responsive class in the div containing the table.
If you want to show the scrollbar only for certain devices like mobile and tablets and not for desktops (big screens), you may specify the breakpoint as well. To specify breakpoint for specific viewports, you may use the:
- -sm
- -md
- -lg
- -xl
- -xxl
While only using the .table-responsive class will display a horizontal scrollbar for all devices. See an example below:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="table-responsive"> <table class="table"> <thead class="table-primary"> <tr> <th>Serial No</th> <th>Month</th> <th>Number of Sales </th> <th>Amount</th> <th>Serial No</th> <th>Month</th> <th>Number of Sales </th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>January</td> <td>105 </td> <td>$15,000.00</td> <td>1</td> <td>January</td> <td>105 </td> <td>$15,000.00</td> </tr> <tr> <td>2</td> <td>February</td> <td>95</td> <td>$12,000.00</td> <td>2</td> <td>February</td> <td>95</td> <td>$12,000.00</td> </tr> <tr> <td>3</td> <td>March</td> <td>150</td> <td>$20,000.00</td> <td>3</td> <td>March</td> <td>150</td> <td>$20,000.00</td> </tr> <tr> <td>4</td> <td>April</td> <td>50</td> <td>$30,00.00</td> <td>3</td> <td>March</td> <td>150</td> <td>$20,000.00</td> </tr> </tbody> </table> </div> </body> </html>