BBS5 Tables

BS5 Tables

Bootstrap 5 provides a basic table style with light padding and horizontal dividers. The .table class adds basic styling to a table.

Table Classes

• .table-striped adds zebra-stripes to a table
• .table-bordered adds borders on all sides of the table and cells
• .table-hover adds a hover effect (grey background color) on table rows
• .table-dark adds a black background to the table
• .table-borderless removes borders from the table
• .table-sm makes the table more compact by cutting cell padding in half
• .table-responsive makes the table responsive (adds a scrollbar if the screen is too small)

Contextual Classes

Contextual classes can be used to color table rows (<tr>) or table cells (<td>):

• .table-primary, .table-success, .table-danger, etc.

<table class="table">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
  </tbody>
</table>

<table class="table table-striped">...</table>

<table class="table table-bordered">...</table>

<table class="table table-hover">...</table>

<tr class="table-primary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-info">...</tr>
<tr class="table-warning">...</tr>