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 with Bootstrap 5.

Tables

Bootstrap table styles are opt-in because of the widespread of use of tables in other UI components.

The table styles aren’t inherited in Bootstrap.

So nested tables can be styles independently of the parent.

For example, we can use the table class to style tables.

We can create a simple table by writing:

<table class="table">
  <thead>
    <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>
</table>

Variants

There are many styling variants for a table.

We can style them with the following classes:

<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

They also work on rows:

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

And they also work on table cells:

<tr>
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

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