Learn with us

In Bootstrap 5, tables can be easily created and styled using predefined table classes. Here’s how you can work with tables in Bootstrap 5:

1. Basic Table Structure:

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>Smith</td>
      <td>jane@example.com</td>
    </tr>
  </tbody>
</table>

2. Striped Table:

<table class="table table-striped">
  <!-- Table content -->
</table>

Adding the table-striped class to the table provides a striped background effect to alternate rows.

3. Bordered Table:

<table class="table table-bordered">
  <!-- Table content -->
</table>

The table-bordered class adds borders to all the cells and the table itself.

4. Hoverable Rows:

<table class="table table-hover">
  <!-- Table content -->
</table>

By adding the table-hover class, the rows change color when hovering over them.

5. Responsive Table:

<div class="table-responsive">
  <table class="table">
    <!-- Table content -->
  </table>
</div>

To make the table responsive on smaller screens, wrap it in a table-responsive container.

These are just a few examples of the table classes available in Bootstrap 5. You can further customize tables by combining different classes and using additional options such as responsive breakpoints and table sizing. Remember to consult the official Bootstrap documentation for more details and examples on working with tables in Bootstrap 5.