Bootstrap Tables
HTML tables are used to represent data in a row-and-column manner. The Bootstrap tables provide numerous predefined table classes that are used to enhance the appearance of the basic HTML table quickly.
Bootstrap 5 Table Classes
There are numerous predefined Bootstrap table classes that are assigned to the <table> element to create different types of tables. These classes are: .table, .table-striped, .table-dark, .table-bordered, .table-borderless, .table-active, .table-hover, .table-sm, etc.
There are the following types of Bootstrap 5 tables.
- Basic Table
- Striped Table
- Dark table
- Bordered Table
- Borderless Table
- Bordered Table
- Active Table
- Small Table
- Responsive Table
Basic Table
The basic table has 8px cell padding by default and horizontal dividers. To create it, simply add .table class to the <table> element.
| # | Fruits | Rate |
|---|---|---|
| 1 | Mango | 50$ |
| 2 | Orange | 60$ |
| 3 | Grapes | 20$ |
General Syntax
<table class="table"></table>
Striped Rows
To create alternate colored i.e. (striped) rows within <tbody>, add .table class followed by an additional .table-striped class to the <table> element.
| # | First Name | Last Name |
|---|---|---|
| 1 | Mithlesh | Kumar |
| 2 | Ankita | Maurya |
| 3 | Ashish | Singh |
General Syntax
<table class="table table-striped"></table>
Dark Striped Table
Use the .table-dark and the .table-striped to the .table element, to create a dark-striped table.
| # | First Name | Last Name |
|---|---|---|
| 1 | Mithlesh | Kumar |
| 2 | Ankita | Maurya |
| 3 | Ashish | Singh |
General Syntax
<table class="table table-dark table-striped"></table>
Bordered Table
To add borders on all the sides of the table and cells, use table-bordered and table classes.
| # | First Name | Last Name |
|---|---|---|
| 1 | Mithlesh | Kumar |
| 2 | Ankita | Maurya |
| 3 | Ashish | Singh |
General Syntax
<table class="table table-bordered"></table>
Contextual Classes
Contextual classes are used to color the whole table, table rows, or individual table cells.
| # | First Name | Last Name |
|---|---|---|
| 1 | Mithlesh | Kumar |
| 2 | Ankita | Maurya |
| 3 | Ashish | Singh |
In the given below general syntax, * represents one of the following options { primary | secondary |success | danger | warning| info | light | dark }.
General Syntax
<!-- On tables -->
<table class="table-*">...</table>
<!-- On rows -->
<tr class="table-*">...</tr>
<!-- On cells (`td` or `th`) -->
<tr><td class="table-*">...</td></tr>
| Bootstrap 5 Color Classes | Description |
|---|---|
| .table-primary | Blue color that indicates important action |
| .table-success | Green color that specifies successful action |
| .table-danger | Red color that specifies negative or danger action |
| .table-info | Light blue color that indicates neutral action |
| .table-warning | Orange color that specifies warning |
| .table-active | It displays dark grey color to the table row and table cell |
| .table-secondary | It displays grey that indicates less important |
| .table-light | Light grey table |
| .table-dark | Dark grey table |
Table Head Color
Contextual classes table-* can be added to the table thead element to change only the background color of the table header.
For example, apply .table-light or .table-dark class to <thead> element to create light or dark color table headers respectively.
| # | First Name | Last Name |
|---|---|---|
| 1 | Mithlesh | Kumar |
| 2 | Ankita | Maurya |
| 3 | Ashish | Singh |
General Syntax
<thead class="table-*"></thead>
Responsive Tables
The responsive table automatically adds a horizontal scrollbar when the viewport width of the device is smaller than a given breakpoint.
Follow the following rules to create a Bootstrap 5 responsive table.
-
To create a responsive table in Bootstrap for all the breakpoints, simply place the table inside the external wrapper, i.e.
<div>, and assign.table-responsiveclass. - To make a responsive table for a specific breakpoint, put the table inside the external container and assign the
.table-responsive-{sm|md|lg|xl|xxl}class. From the specified breakpoint and up, the table will behave normally and not scroll horizontally.
You can make a decision about when the table should have a horizontal scroll bar according to the width of the viewport.
| Class | Viewport Width |
|---|---|
.table-responsive-sm |
< 576px |
.table-responsive-md |
< 768px |
.table-responsive-lg |
< 992px |
.table-responsive-xl |
< 1200px |
.table-responsive-xxl |
< 1400px |
| # | First Name | Last Name | Father Name | High School | Intermediate | Graduation | Skills | Jobs | Salary | Country | State | District | Zip Code | City/Town |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Smith | Jane | Web Designer | St. Peters | JN Gergs | St. Josef | B.tech | Web designer | 1000$ | India | UP | Jalaun | 457123 | Rampur |
General Syntax
<!-----Responsive Table For All Breakpoints------>
<div class="table-responsive">
<table class="table"></table>
</div>
<!-----Responsive Table For A Specific Breakpoint------>
<div class="table-responsive-{sm | md | lg | xl | xxl}">
<table class="table"></table>
</div>
