Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to style tables, figures, and form fields with Bootstrap 5.

Captions

We can add a caption to the top of the table with the caption-top class:

<table class="table caption-top">
  <caption>List of people</caption>
  <thead class="table-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>james</td>
      <td>smith</td>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>mary</td>
      <td>jones</td>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry</td>
      <td>50</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>footer</th>
      <td>footer</td>
      <td>footer</td>
      <td>footer</td>
    </tr>
  </tfoot>
</table>

Responsive Tables

We can make tables responsive with the table-responsive class

To make it always responsive, we can use the table-responsive class:

<div class="table-responsive">
  <table class="table">
    <thead class="table-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>james</td>
        <td>smith</td>
        <td>20</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>mary</td>
        <td>jones</td>
        <td>20</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td colspan="2">Larry</td>
        <td>50</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>footer</th>
        <td>footer</td>
        <td>footer</td>
        <td>footer</td>
      </tr>
    </tfoot>
  </table>
</div>

We make the table always responsive with the class in a div outside the table.

Also, we can make them responsive at a given breakpoint.

For example, we can write:

<div class="table-responsive-sm">
  <table class="table">
    <thead class="table-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>james</td>
        <td>smith</td>
        <td>20</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>mary</td>
        <td>jones</td>
        <td>20</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td colspan="2">Larry</td>
        <td>50</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>footer</th>
        <td>footer</td>
        <td>footer</td>
        <td>footer</td>
      </tr>
    </tfoot>
  </table>
</div>

to make it responsive when the screen is wide enough to hit the sm breakpoint or wider.

sm can be substituted with md , lg , xl , or xxl .

#software-development #javascript #technology #programming #web-development #bootstrap 5