Category: Bootstrap

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.

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

Lists

Bootstrap 5 removes the default list-style and left margin of list items.

This only applies to immediate children list items.

The class has to be added to nested lists.

For example, we can wire:

`<ul class="list-unstyled">  
  <li>Lorem ipsum dolor sit amet</li>  
  <li>`Duis id nunc dignissim`</li>  
  <li>Nulla volutpat aliquam velit  
    <ul>  
      <li>Phasellus iaculis neque</li>  
      <li>` Suspendisse potenti. Aliquam erat volutpat.`</li>  
    </ul>  
  </li>  
  <li>`Pellentesque habitant morbi tristique senectus`</li>  
  <li>Aenean sit amet erat nunc</li>  
  <li>Eget porttitor lorem</li>  
</ul>`

to add a nested list.

We added the list-unstyled class to add an unstyled list.

Inline

We can remove a list’s bullets and apply some light margin with the combination of the .list-inline and .list-inline-item classes:

`<ul class="list-inline">  
  <li class="list-inline-item">`Lorem ipsum dolor sit amet, consectetur adipiscing elit.`</li>  
  <li class="list-inline-item">`Pellentesque quis nunc ultricies enim ullamcorper pretium at cursus tellus.`</li>  
  <li class="list-inline-item">` Ut convallis quis lacus in volutpat. Pellentesque volutpat dui et enim mattis`</li>  
</ul>`

We add the classes to make the items display inline with margins.

Description List Alignment

To make a list with description, we can use the dl , dt , and dd tags with the width styles.

For example, we can write:

`<dl class="row">  
  <dt class="col-sm-3">Description lists</dt>  
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>  
  
  <dt class="col-sm-3">Euismod</dt>  
  <dd class="col-sm-9">  
    <p>`Lorem ipsum dolor sit amet, consectetur adipiscing elit.`</p>  
    <p>`ellentesque quis nunc ultricies enim ullamcorper pretium at cursus tellus. Curabitur sit amet leo arcu. Integer vitae tincidunt odio. Duis id nunc dignissim.`</p>  
  </dd>  
  
  <dt class="col-sm-3">`Maecenas imperdiet sapien augue, ac malesuada metus ultrices et.`</dt>  
  <dd class="col-sm-9">`Aliquam erat volutpat. Quisque rutrum commodo felis imperdiet fermentum. Integer hendrerit dictum augue dapibus semper. In ac nisi consectetur`.</dd>  
  
  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>  
  <dd class="col-sm-9">`Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.`</dd>  
  
  <dt class="col-sm-3">Nesting</dt>  
  <dd class="col-sm-9">  
    <dl class="row">  
      <dt class="col-sm-4">Nested definition list</dt>  
      <dd class="col-sm-8">`Aenean dolor augue, vulputate non mattis eu, lacinia viverra ex.`</dd>  
    </dl>  
  </dd>  
</dl>`

We have the list with the dt and dd tags with the column classes to set the width of them.

Images

We can add responsive images with the img element and the .img-fluid class.

For example, we can write:

`<img src="`http://placekitten.com/200/200`" class="img-fluid" alt="cat">`

Image Thumbnails

To add thumbnails, we use the .img-thumbnail class:

`<img src="`http://placekitten.com/200/200`" class="img-thumbnail" alt="cat">`

Aligning Images

We can align images with the float-left or float-right classes:

<img src="http://placekitten.com/200/200" class="rounded float-left" alt="cat">  
<img src="http://placekitten.com/200/200" class="rounded float-right" alt="cat">

To make it aligned centered horizontally, we can write:

`<img src="`http://placekitten.com/200/200`" class="rounded mx-auto d-block" alt="cat">`

We used the mx-auto class to make the image centered.

Also, we can use the text-center class to do the same thing:

<div class="text-center">  
  <img src="http://placekitten.com/200/200" class="rounded" alt="cat">  
</div>

Picture

The picture element can be used to specify multiple sources of images.

So we can write:

`​<picture>  
  <img src="`http://placekitten.com/200/200`" class="img-fluid img-thumbnail" alt="cat 1">  
  <img src="`http://placekitten.com/201/201`" class="img-fluid img-thumbnail" alt="cat 2">  
</picture>`

We put the img elements in the picture tags.

And we’ve to add the img-* classes ion the img tag rather than the picture tag.

Conclusion

We can style lists and images with Bootstrap 5.

It comes with the classes for us to do so.

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

Color Picker

We can add a color picker with the type attribute set to color .

For example, we can write:

<div class="mb-3">
  <label for="color-input" class="form-label">Color picker</label>
  <input type="color" class="form-control form-control-color" id="color-input" value="#563d7c" title="Choose your color">
</div>

to add a color picker to our app.

We add the .form-control and .form-control-color to add the Bootstrap styles for the color picker.

Datalists

Bootstrap 5 has styles for data lists.

A datalist lets us enter options and if there’s a match, we can select it.

To add one, we can write:

<div class="mb-3">
  <label for="exampleDataList" class="form-label">Fruit</label>
  <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
  <datalist id="datalistOptions">
    <option value="apple">
    <option value="orange">
    <option value="lemon">
    <option value="pear">
    <option value="grape">
  </datalist>
</div>

to add a data list input with a datalist with a bunch of options that we can choose from.

Bootstrap 5 provides consistent styling with the form-control class.

Select

We can style select elements with Bootstrap.

To style it, we can use the .form-select class.

For example, we can write:

<select class="form-select">
  <option selected>select a fruit</option>
  <option value="1">apple</option>
  <option value="2">orange</option>
  <option value="3">grape</option>
</select>

to create a drop-down with Bootstrap styles.

Dropdown Sizing

The size of a dropdown can be changed with Bootstrap classes.

We can use the form-select-lg to make it large and form-select-sm to make it small.

For example, we can write:

<select class="form-select form-select-lg">
  <option selected>select a fruit</option>
  <option value="1">apple</option>
  <option value="2">orange</option>
  <option value="3">grape</option>
</select>

to make the dropdown large and:

<select class="form-select form-select-sm">
  <option selected>select a fruit</option>
  <option value="1">apple</option>
  <option value="2">orange</option>
  <option value="3">grape</option>
</select>

to make it small.

The multiple attribute is also supported by Bootstrap:

<select class="form-select" multiple>
  <option selected>select a fruit</option>
  <option value="1">apple</option>
  <option value="2">orange</option>
  <option value="3">grape</option>
</select>

The size attribute can be adjusted to only display the given number of items at once:

<select class="form-select" size='3' multiple>
  <option selected>select a fruit</option>
  <option value="1">apple</option>
  <option value="2">orange</option>
  <option value="3">grape</option>
</select>

Checkboxes

Bootstrap 5 provides classes to let us add consistent styles for checkboxes.

To do that, we can use the .form-check class that improves the layout and behavior of the element.

For example, we can write:

<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" checked>
  <label class="form-check-label" for="orange">
    orange
  </label>
</div>

to add the checkboxes.

We have a div with the .form-check class.

Inside it, we add the input with type checkbox to add the checkbox.

They’re styles with the .form-check-input class.

To add a label, we can add the .form-check-label class to add the text beside the checkbox.

Indeterminate

We can use JavaScript to set the :indeterminate pseudoclass to make an indeterminate checkbox.

For example, we can write:

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

in our HTML code and then add:

document.getElementById("flexCheckIndeterminate").indeterminate = true;

in our JavaScript to make an indeterminate checkbox.

Disabled

We can make a checkbox disabled with the disabled attribute.

For example, we can write:

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

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

We added 2 checkboxes with the disabled attribute to disable them.

checked makes it checked.

Conclusion

We can add datalists, color pickers, and checkboxes to our app.

Boottstrap 5 provides all the styles.

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

Spinners

Spinners lets us add the loading state of a component or page with Bootstrap spinners.

It doesn’t use JavaScript to implement it.

Border Spinner

We can add a border spinner with the spinner-border class:

<div class="spinner-border">  
  <span class="sr-only">Loading...</span>  
</div>

We added the spinner-border class and the span with the sr-only class for screen readers.

Colors

We can apply different colors to spinners.

For example, we can write:

<div class="spinner-border text-primary">  
  <span class="sr-only">Loading...</span>  
</div>  
<div class="spinner-border text-secondary">  
  <span class="sr-only">Loading...</span>  
</div>  
<div class="spinner-border text-success">  
  <span class="sr-only">Loading...</span>  
</div>  
<div class="spinner-border text-danger">  
  <span class="sr-only">Loading...</span>  
</div>  
<div class="spinner-border text-warning">  
  <span class="sr-only">Loading...</span>  
</div>  
<div class="spinner-border text-info">  
  <span class="sr-only">Loading...</span>  
</div>  
<div class="spinner-border text-light">  
  <span class="sr-only">Loading...</span>  
</div>  
<div class="spinner-border text-dark">  
  <span class="sr-only">Loading...</span>  
</div>

We add text-* classes to add the colors to the spinner.

Growing Spinner

We can add a growing spinner with the spinner-grow class.

For example, we can write:

<div class="spinner-grow">  
  <span class="sr-only">Loading...</span>  
</div>

We can also change the color with various classes:

<div class="spinner-grow text-primary">  
  <span class="sr-only">Loading...</span>  
</div>  
<div class="spinner-grow text-secondary">  
  <span class="sr-only">Loading...</span>  
</div>  
<div class="spinner-grow text-success">  
  <span class="sr-only">Loading...</span>  
</div>  
<div class="spinner-grow text-danger">  
  <span class="sr-only">Loading...</span>  
</div>  
<div class="spinner-grow text-warning">  
  <span class="sr-only">Loading...</span>  
</div>  
<div class="spinner-grow text-info">  
  <span class="sr-only">Loading...</span>  
</div>  
<div class="spinner-grow text-light">  
  <span class="sr-only">Loading...</span>  
</div>  
<div class="spinner-grow text-dark">  
  <span class="sr-only">Loading...</span>  
</div>

Alignment

We can change the alignment of the spinner.

For instance, we can add margins to them:

<div class="spinner-border m-5">  
  <span class="sr-only">Loading...</span>  
</div>

The placement can be set with the justify-content-* classes:

<div class="d-flex justify-content-center">  
  <div class="spinner-border">  
    <span class="sr-only">Loading...</span>  
  </div>  
</div>

We can also have floats:

<div class="clearfix">  
  <div class="spinner-border float-right">  
    <span class="sr-only">Loading...</span>  
  </div>  
</div>

float-right puts the spinner on the right.

We can also set text-align :

<div class="text-center">  
  <div class="spinner-border">  
    <span class="sr-only">Loading...</span>  
  </div>  
</div>

Size

We can change the size of the spinner.

We can add the spinner-border-sm or spinner-grow-sm classes to make a smaller spinner:

<div class="spinner-border spinner-border-sm">  
  <span class="sr-only">Loading...</span>  
</div>  
<div class="spinner-grow spinner-grow-sm">  
  <span class="sr-only">Loading...</span>  
</div>

We can also change the size:

<div class="spinner-border" style="width: 5rem; height: 5rem;">  
  <span class="sr-only">Loading...</span>  
</div>  
<div class="spinner-grow" style="width: 5rem; height: 5rem;">  
  <span class="sr-only">Loading...</span>  
</div>

Buttons

We can add spinners to buttons.

For example, we can write:

<button class="btn btn-primary" type="button" disabled>  
  <span class="spinner-border spinner-border-sm"></span>  
  <span class="sr-only">Loading...</span>  
</button>  
<button class="btn btn-primary" type="button" disabled>  
  <span class="spinner-border spinner-border-sm"></span>  
  Loading...  
</button>

We add the spinner so inside the button and it’ll be displayed.

Also, we can do the same with the growing spinner:

<button class="btn btn-primary" type="button" disabled>  
  <span class="spinner-grow spinner-grow-sm"></span>  
  <span class="sr-only">Loading...</span>  
</button>  
<button class="btn btn-primary" type="button" disabled>  
  <span class="spinner-grow spinner-grow-sm"></span>  
  Loading...  
</button>

Conclusion

We can add spinners to display loading progress.

It’s implemented with HTML and CSS only so JavaScript isn’t required.