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 .

Customizing in SASS

The table style presets can be changed in SASS.

The $table-striped-bg-factor, $table-active-bg-factor and $table-hover-bg-factor variables are used to determine the contrast in table variants.

Theme colors are lightened by the $table-bg-level variable.

Figures

We can add figures with captions with the figure tag.

The figcaption tag adds a caption for the figure.

Bootstrap 5 provides classes to make styling them easier.

For example, we can write:

<figure class="figure">  
  <img src="http://placekitten.com/200/200" class="figure-img img-fluid rounded" alt="cat">  
  <figcaption class="figure-caption">A cat.</figcaption>  
</figure>

With Bootstrap 5’s text utilities, aligning the figure captions are easy:

<figure class="figure">  
  <img src="http://placekitten.com/200/200" class="figure-img img-fluid rounded" alt="cat">  
  <figcaption class="figure-caption text-right">A cat.</figcaption>  
</figure>

With the text-right class, we aligned the caption to the right.

Form Controls

We can add form controls with Bootstrap 5 styles with the included classes.

For example, we can write:

<div class="mb-3">  
  <label for="email" class="form-label">Email address</label>  
  <input type="email" class="form-control" id="email" placeholder="name@example.com">  
</div><div class="mb-3">  
  <label for="text" class="form-label">Example textarea</label>  
  <textarea class="form-control" id="text" rows="3"></textarea>  
</div>

to add some form controls.

We have the form-control class to add the form control styles.

form-label class add the form label styles.

Sizing

To change the size of the controls, we can use the .form-control-lg and .form-control-sm classes:

<div class="mb-3">  
  <label for="email" class="form-label">Email address</label>  
  <input type="email" class="form-control-lg" id="email" placeholder="name@example.com">  
</div>

We make the form control large with the form-control-lg class.

Likewise, we can make them smaller with the .form-control.sm class:

<div class="mb-3">  
  <label for="email" class="form-label">Email address</label>  
  <input type="email" class="form-control-sm" id="email" placeholder="name@example.com">  
</div>

Readonly

We can add the readonly boolean attribute to prevent users from changing the input value of the form.

For example, we can write:

<div class="mb-3">  
  <label for="email" class="form-label">Email address</label>  
  <input type="email" class="form-control" id="email" placeholder="name@example.com" readonly>  
</div>

The form input will be grayed out.

Readonly Plain Text

If we want to have a readonly form field without the any styles, then we can use the .form-control-plaintext class to make the field display as plain text.

For example, we can write:

<div class="mb-3">  
  <label for="email" class="form-label">Email address</label>  
  <input type="email" class="form-control-plaintext" id="email" placeholder="name@example.com" readonly>  
</div>

Now there’re no borders and other things displayed.

Conclusion

We can add styles to tables, figures, and form fields.