Bootstrap 5 Tables


Bootstrap 5 provides a powerful and flexible system for creating responsive and stylish tables on your web pages. You can create tables for various purposes, such as displaying data, pricing tables, and more.

Basic Table

Example 
<table class="table">
  ...
</table>
Try it Yourself

Bordered Table

Add .table-bordered for borders on all sides of the table and cells.

Example 
<table class="table table-bordered">
  ...
</table>
Try it Yourself

Striped Rows

The .table-striped class adds zebra-stripes to a table.

Example 
<table class="table table-striped">
  ...
</table>
Try it Yourself

Hoverable rows

The .table-hover class adds a hover effect (grey background color) on table rows.

Example 
<table class="table table-hover">
  ...
</table>
Try it Yourself

These hoverable rows can also be combined with the striped class.

Example 
<table class="table table-hover table-striped">
  ...
</table>
Try it Yourself

Dark Table

The .table-dark class adds a black background to the table.

Example 
<table class="table table-dark">
  ...
</table>
Try it Yourself

Hoverable Dark Table

Combine .table-dark and .table-striped to create a dark, hoverable table.

Example 
<table class="table table-dark table-hover">
  ...
</table>
Try it Yourself

Borderless Table

Add .table-borderless class to removes borders from the table.

Example 
<table class="table table-borderless">
  ...
</table>
Try it Yourself

Dark Table Without Border

Combine .table-dark and .table-borderless to create a dark, hoverable table.

Example 
<table class="table table-dark table-borderless">
  ...
</table>
Try it Yourself

Table Color Classes

Use contextual classes to color whole tables(<table>), table rows(<tr>) or individual cells (<td>).

Example 
<!-- On tables -->
<table class="table table-primary">...</table>
<table class="table table-secondary">...</table>
<table class="table table-success">...</table>
<table class="table table-danger">...</table>
<table class="table table-warning">...</table>
<table class="table table-info">...</table>
<table class="table table-light">...</table>
<table class="table table-dark">...</table>

<!-- On rows -->
<tr class="table table-primary">...</tr>
<tr class="table table-secondary">...</tr>
<tr class="table table-success">...</tr>
<tr class="table table-danger">...</tr>
<tr class="table table-warning">...</tr>
<tr class="table table-info">...</tr>
<tr class="table table-light">...</tr>
<tr class="table table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table table-primary">...</td>
  <td class="table table-secondary">...</td>
  <td class="table table-success">...</td>
  <td class="table table-danger">...</td>
  <td class="table table-warning">...</td>
  <td class="table table-info">...</td>
  <td class="table table-light">...</td>
  <td class="table table-dark">...</td>
</tr>
Try it Yourself

Small Table

Add .table-sm to make any table more compact by cutting all cell padding in half.

Example 
<table class="table table-sm">
  ...
</table>
Try it Yourself

Captions

The <caption> element is used to define a title or caption for a table. By default caption will be displayed in the bottom of the table. You can also put the caption on the top of the table with .caption-top.

Example 
<table class="table table-sm">
 <caption>User Details</caption>
 ...
</table>

<!-- Caption on top of table -->

<table class="table table-sm caption-top">
 <caption>User Details</caption>
 ...
</table>
Try it Yourself

Responsive Table

To create responsive tables, you can use the table-responsive class along with other Bootstrap table classes. To make a table responsive, wrap it in a <div> element with the .table-responsive class.

The table-responsive class ensures that horizontal scrolling is applied when the table content overflows the viewport on smaller screens. You can combine the .table-responsive class with other table classes to style the table as needed.

Example 
<div class="table-responsive">
 <table class="table">
  ...
 </table>
</div>
Try it Yourself

Responsive Table at specific Breakpoints(screen size)

To make a table responsive only at specific breakpoints(screen size), use the breakpoint-specific responsive classes along with the .table-responsive class.

  • .table-responsive-sm
  • .table-responsive-md
  • .table-responsive-lg
  • .table-responsive-xl
  • .table-responsive-xxl
Example 
<div class="table-responsive-sm">
 <table class="table">
  ...
 </table>
</div>
Try it Yourself