Category: HTML

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>

Accented Tables

We can add the .table-striped class to add zebra striping to table rows within the tbody .

For example, we can write:

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

Stripes also work with other table variants:

<table class="table table-dark table-striped">  
  <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>

Hoverable Rows

To make rows hoverable, we can add the table-hover class:

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

Now we see the row that we hovered on highlighted.

The hover effect can be combined with stripes:

<table class="table table-striped table-hover">  
  <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>

Active Tables

We can highlight a table row or cell with the table-active class:

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

We add the table-active class on the cell so it’ll be highlighted.

This also works with other variants:

<table class="table table-success">  
  <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 class="table-active">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>

The styling works by setting the background with the --bs-table-bg property.

Then the gradient on the table is added with the background-image: linear-gradient(var( — bs-table-accent-bg), var( — bs-table-accent-bg)); CSS property.

When .table-striped , .table-hover or .table-active classes are added, the --bs-table-accent-bg is set to semitransparent color to change the color of the background.

--bs-table-accent-bg color with the highest contrast is generated for the highlights.

Text and border colors are generated the same way.

Table Borders

We can add borders with the table-bordered class:

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

Conclusion

We can add tables with various effects like stripes, hover, and various colors.

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.

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 radio buttons, checkboxes, and file inputs with Bootstrap 5.

Radio Buttons and Checkboxes without Labels

We can add radio buttons and checkboxes without labels.

To do that, we can write:

<div>
  <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="">
</div>

<div>
  <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="">
</div>

to add them.

Toggle Buttons

Bootstrap lets us turn checkboxes and radio buttons into toggle buttons.

To do that, we can write:

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">toggle</label>

to add the toggle button.

It’ll display differently depending on if it’s toggled on or off.

The id of the input and the for attribute of the label have to match.

Radio Toggle Buttons

We can do the same for radio buttons.

For example, we can write:

<div class="btn-group">
  <input type="radio" class="btn-check" name="options" id="apple" autocomplete="off" checked>
  <label class="btn btn-secondary" for="apple">apple</label>

<input type="radio" class="btn-check" name="options" id="orange" autocomplete="off">
  <label class="btn btn-secondary" for="orange">orange</label>

<input type="radio" class="btn-check" name="options" id="grape" autocomplete="off">
  <label class="btn btn-secondary" for="grape">grape</label>
</div>

to add a button group.

Each button is a group is a radio button.

We use the btn-group class to style the button group.

The input type is set to radio .

btn-check is the class to make them display as toggle buttons.

And the id of the input has to match the for attribute value of the label .

Outlined Styles

The toggle can have outlined styles instead of a background color.

For example, we can write:

<div class="btn-group">
  <input type="radio" class="btn-check" name="options" id="apple" autocomplete="off" checked>
  <label class="btn btn-outline-secondary" for="apple">apple</label>

<input type="radio" class="btn-check" name="options" id="orange" autocomplete="off">
  <label class="btn btn-outline-secondary" for="orange">orange</label>

<input type="radio" class="btn-check" name="options" id="grape" autocomplete="off">
  <label class="btn btn-outline-secondary" for="grape">grape</label>
</div>

to make the buttons that aren’t chosen display an outline.

We add the word outline in the class name for the label.

For checkboxes, we can write:

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">apple</label><br>

to make the toggle button displayed with outline styles instead of a background color.

File Browser

Bootstrap 5 provides a file browser to let users select a file.

For example, we can write:

<div class="form-file">
  <input type="file" class="form-file-input" id="customFile">
  <label class="form-file-label" for="customFile">
    <span class="form-file-text">Choose a file...</span>
    <span class="form-file-button">Browse</span>
  </label>
</div>

to add a file input with an input with the type set to file .

Also, we add the label with the form-file-label class.

Inside it, we add our placeholder, which is the span with the form-file-text class.

We also have a span with the form-file-button class to display a button we can click to show the file browser to let us select a file.

To disable the file input, we can add the disabled prop to the input.

For example, we can write:

<div class="form-file">
  <input type="file" class="form-file-input" id="customFile" disabled>
  <label class="form-file-label" for="customFile">
    <span class="form-file-text">Choose file...</span>
    <span class="form-file-button">Browse</span>
  </label>
</div>

to disable the file input.

If we have longer placeholder text, it’ll be truncated with an ellipsis added at the end:

<div class="form-file">
  <input type="file" class="form-file-input" id="customFile">
  <label class="form-file-label" for="customFile">
    <span class="form-file-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nunc ultricies enim ullamcorper pretium at cursus tellus. Curabitur sit amet leo arcu. Integer vitae tincidunt odio. Duis id nunc dignissim, fringilla lacus ut, rutrum ligula. Morbi euismod accumsan augue, sit amet finibus ipsum ultrices ac. Ut convallis quis lacus in volutpat. Pellentesque volutpat dui et enim mattis, egestas posuere nisl maximus. Aenean commodo laoreet enim, sit amet tincidunt nisl porttitor non. Ut vestibulum mauris urna, eget consectetur tellus maximus at. Suspendisse pharetra ut erat sed euismod.
    </span>
    <span class="form-file-button">Browse</span>
  </label>
</div>

Conclusion

We can style radio buttons and checkboxes as toggle buttons.

Also, Bootstrap 5 comes with its own file input.

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 radio buttons and checkboxes with Bootstrap 5.

Radio Buttons

Bootstrap 5 also provides styles for radio buttons.

To add them, we can write:

<div class="form-check">
  <input class="form-check-input" type="radio" name="fruit" id="apple">
  <label class="form-check-label" for="apple">
    apple
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="fruit" id="orange" checked>
  <label class="form-check-label" for="orange">
    orange
  </label>
</div>

We set the type attribute to radio .

And we set the name of both radio buttons to be the same so that we can select between them.

Also, we use the form-check class to style the radio button.

Inside the divs we use the form-check-input and form-check-label classes as we did with checkboxes.

Disabled Radio Buttons

We can disable radio buttons with the disabled attribute.

Then we won’t be able to interact with them.

They’ll also be lighter than usual.

For example, we can write:

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="apple" disabled>
  <label class="form-check-label" for="apple">
    apple
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="orange" checked disabled>
  <label class="form-check-label" for="orange">
    orange
  </label>
</div>

Switches

We can add switches with the form-check and form-switch classes.

The type of the inputs are set to checkbox .

For example, we can write:

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="apple">
  <label class="form-check-label" for="apple">apple</label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="orange" checked>
  <label class="form-check-label" for="orange">orange</label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="grape" disabled>
  <label class="form-check-label" for="grape">grape</label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="lemon" checked disabled>
  <label class="form-check-label" for="lemon">lemon</label>
</div>

We use the form-check and form-switch classes on the div.

And we use the form-check-input class to style the checkbox.

The form-check-label class is applied to the checkbox label.

Default (Stacked)

Checkboxes are stacked on top of each other by default.

For example, if we have:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="apple">
  <label class="form-check-label" for="apple">
    apple
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="orange" disabled>
  <label class="form-check-label" for="orange">
    orange
  </label>
</div>

Then we 2 checkboxes stacked on top of each other.

Likewise, if we have multiple radio buttons, they’ll also be stacked on top of each other:

<div class="form-check">
  <input class="form-check-input" type="radio" name="fruit" id="apple" value="apple" checked>
  <label class="form-check-label" for="apple">
    apple
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="fruit" id="orange" value="orange">
  <label class="form-check-label" for="orange">
    orange
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="fruit" id="banana" value="banana" disabled>
  <label class="form-check-label" for="banana">
    banana
  </label>
</div>

We have multiple radio buttons with the usual classes.

We didn’t have to do anything to make them stacked in addition to that.

Inline

To make checkboxes inline, we just add the form-check-line class to make them inline.

For example, we can write:

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" value="" id="apple">
  <label class="form-check-label" for="apple">
    apple
  </label>
</div>

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" value="" id="orange" disabled>
  <label class="form-check-label" for="orange">
    orange
  </label>
</div>

We add the form-check-inline class to each checkbox div to make them inline.

With radio buttons, we can do the same thing:

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="fruit" id="apple" value="apple" checked>
  <label class="form-check-label" for="apple">
    apple
  </label>
</div>

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="fruit" id="orange" value="orange">
  <label class="form-check-label" for="orange">
    orange
  </label>
</div>

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="fruit" id="banana" value="banana" disabled>
  <label class="form-check-label" for="banana">
    banana
  </label>
</div>

We just add them to the div.

Conclusion

We can style radio buttons and checkboxes with Bootstrap 5 styles.

It comes with many styles that we can use to style them our way.

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 without Borders

We can create a table without borders with the .table-borderless class:

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

It also works with other variants:

<table class="table table-dark table-borderless">
  <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>

Small Tables

We can use the .table-sm class to make a table more compact by reducing the padding in half:

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

This also works with other table variants:

<table class="table table-dark table-sm">
  <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>

Vertical Alignment

The vertical alignment of tables can be changed with Bootstrap 5 classes.

They can be changed in cells, tables, or table rows:

<table class="table table-sm table-dark">
  <div class="table-responsive">
    <table class="table align-middle">
      <thead>
        <tr>
          ...
        </tr>
      </thead>
      <tbody>
        <tr class="align-bottom">
          ...
        </tr>
        <tr>
          <td>...</td>
          <td class="align-top">aligned to the top.</td>
          <td>...</td>
        </tr>
      </tbody>
    </table>
  </div>
</table>

We have the align-top , align-middle , and align-bottom classes to make the alignments.

Nesting

Border styles, active styles, and table variants aren’t inherited by nested tables.

For example, we can write:

<table class="table table-striped">
  <thead>
    <tr class="align-bottom">
      <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>
      <td colspan="4">
        <table class="table align-bottom">
          <thead>
            <tr class="align-bottom">
              <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>
      </td>
    </tr>
  </tbody>
</table>

to apply styles to nested tables.

The styles have to be applied to each table individually.

Table Head

We can use the .table-light or .table-dark classes to make the thead appear light or dark gray.

For example, we can write:

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

to make the table heading light gray.

We can make it dark gray with the table-dark class:

<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>
</table>

Table Foot

We can add a footer to a table with the tfoot element.

For example, we can write:

<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>

to add a footer.

Captions

We can add the caption tag to add a caption to label the table.

For example, we can write:

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

to add a label to the bottom of the table.

Conclusion

We can add tables with various styles.

Nested tables have to have styles applied to them individually.