Bootstrap 5 table
Bootstrap 5 tables display data in a grid format similar to row and column layouts. Using Bootstrap 5 tables, you can dramatically enhance the appearance of basic HTML tables. It is a user interface function to interact with user and system information.
Basic table
Bootstrap 5 table requires a table tag with the “table” class to get the default table format. The table includes table head and table body data using bootstrap 5 tags.
Syntax
The following syntax shows default table format using bootstrap 5 classes.
- The table header uses the <thead> (table header) and <th> (table heading data) with <tr> (table row) tag.
- The table body uses the <tbody> (table body) and <td> (table data) with <tr> (table row) tag.
Example
The following example uses four column for the table header and four rows for the table body. Here, we can use basic table format using bootstrap 5 table class.
Output
The below output image shows the default table format of the given an example.
Basic table classes
We can see some bootstrap 5 table classes in detail. The basic bootstrap 5 table requires a table tag with the class to get the basic table format. The border and hover effect is a basic requirement of the table.
- The “table” class creates the default table on the web page.
- The “table-hover” class uses to highlight table rows where the mouse arrow is pointed.
- The “table-bordered” class displays a border around the table (including rows and columns).
- The “table-striped” class displays the table in strip format. These table rows display in light grey and white color.
Syntax
The following syntax shows basic table format using bootstrap 5 classes.
- The table tag uses multiple basic classes simultaneously to display several styles.
Example
The following example uses four-column for the table header and four rows for the table body. Here, we can use basic table format using bootstrap 5 table classes. The table uses a hover effect, a striped style with a border.
Output
The below output image shows the basic table format of the given an example.
Bootstrap 5 small table
Bootstrap 5 small table shows a small size of the columns than the default size of the table. The “table-sm” class uses with “table” class by default, but we can use other Bootstrap 5 table classes.
Syntax
The following syntax shows small size table using bootstrap 5 classes.
Example
The following example uses four columns for the table header and three rows for the table body. Here, we can use small size table format using bootstrap 5 table class.
Output
The below output image shows the small size table giving an example.
Contextual table
Bootstrap 5 contextual tables provide several classes to show eye-catch tables. Bootstrap 5 table requires a table tag with the contextual table class to get a different color table format. This table color conveys some message or meaning of the table data.
Syntax
The following table shows us the table/table column’s color and class in detail.
| Bootstrap 5 table color | Description |
|---|---|
| “table-primary” | This class shows table is important and shown in blue color. |
| “table-secondary” | This class shows the table is secondary and shown in grey color. |
| “table-light” | This class shows in a light grey color table (visible on dark background). |
| “table-dark” | This class shows in a dark grey color table. |
| “table-info” | This class shows a table that is informative and shown in sky blue color. |
| “table-warning” | This class conveys a warning table shown in yellow color. |
| “table-success” | This class conveys a success table shown in green color. |
| “table-danger” | This class conveys a danger or alert table shown in red color. |
| “table-active” | This class shows in a dark grey color table. |
Example
The following example uses four rows for the table header and the table body. Here, we can use different contextual color using bootstrap 5 table classes. Here, table uses contextual class in the <tr> tag to show table row in particular color.
Output
The below table image shows a contextual table of the given an example.
Bootstrap 5 dark table
Bootstrap 5 table shows the table’s dark color (black or dark grey) and its data. The “table-dark” class uses with the “table” class by default, but we can use other Bootstrap 5 table classes. The bootstrap 5 tables can use the hover effect or striped table format with a border.
Syntax
The following syntax shows dark color table using bootstrap 5 classes.
- The “table-dark” class shows the black background color of the table.
- The table information is displayed in white color.
The following syntax shows dark color with a striped table using bootstrap 5 classes.
- The “table-dark” class shows the table’s black and grey background color.
- The table information is displayed in white color of both background colors.
Example
The following example uses four columns for the table header and four rows for the table body. Here, we can use table format using bootstrap 5 table classes.
Output
The table below shows a dark color table and dark striped table output.
Table Header color
Bootstrap 5 table shows the table’s header in contextual color using classes. For example, the “table-dark” class displays a dark color header with white color text. The header color does not affect the table body.
Syntax
The following syntax shows dark header table using bootstrap 5 classes.
The following syntax shows yellow header table using bootstrap 5 classes.
Example
The following example shows two tables with different header color. The “table-dark” and “table-warning” classes use in the <thead> tag.
Output
The below output image shows the table header color of the given an example.
Bootstrap 5 borderless table
Bootstrap 5 table shows the borderless table and its information. The “table-borderless” class uses with “table” class by default, but we can use other basic table classes.
Syntax
The following syntax shows borderless table using bootstrap 5 classes.
Example
The following example uses four columns for the table header and three rows for the table body.
Output
The below output image shows the borderless table format of the given an example.
Responsive table
Bootstrap 5 table requires a table tag with the responsive table class to be placed in different device sizes. This table displays small, medium, large, extra-large, and double extra-large size devices. Bootstrap 5 uses the “table-responsive” class by default. The table becomes scrollable for small size devices.
Syntax
The following syntax shows responsive table using bootstrap 5 classes.
The following table shows us responsive table classes in detail.
| Bootstrap 5 responsive table | Description |
|---|---|
| “table-responsive” | This bootstrap 5 table class is used for responsive tables by default. It works on all sizes of devices. |
| “table-responsive-sm” | This class is used to display responsive tables for small size devices. The devices width upto 576 px (greater than 576px). |
| “table-responsive-md” | This class is used to display responsive tables for medium size devices. The devices width upto 768 px (greater than 768px). |
| “table-responsive-lg” | This class uses to display responsive tables for large size devices. The devices width upto 992 px (greater than 992px). |
| “table-responsive-xl” | This class is used to display responsive tables for extra large size devices. The devices width upto 1200 px (greater than 1200px). |
| “table-responsive-xxl” | This class is used to display responsive tables for double extra-large size devices. The devices width upto 1400 px (greater than 1400px). |
Example
The following example uses four rows for the table header and the table body. Here, we can use different contextual color using bootstrap 5 table classes. Here, table uses responsive class in the <div> tag to show scrollable table. The <table> tag uses in the <div> tag with the its information.
Output
The table below shows a responsive format of the bootstrap 5 table output.
Conclusion
Bootstrap 5 table shows the information to interact with the user. The table is essential to function on the web page to convey information simply and easily. Bootstrap 5 table provides various classes to display in different formats. We can use multiple classes in the single tag to include multiple styles in one table.