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.

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.

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.