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.