You can use the text color utility classes to customize the color of spinners.

Example

Try this code »

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

— The output of the above example will look something like this:

       

---

Creating Growing Spinners

You can also create growing spinners that repeatedly grow and fade out, like this:

Example

<div class="spinner-grow">
    <span class="visually-hidden">Loading...</span>
</div>

— The output of the above example will look something like this:

Similarly, like the border spinners you can also customize the colors of growing spinners using the Bootstrap’s text color utility classes, as shown in the following example:

Example

Try this code »

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

— The output of the above example will look something like this:

       

Sizing of Spinners

You can use the class .spinner-border-sm and .spinner-grow-sm to make a smaller spinner that can quickly be used within other components such as buttons.

Example

<div class="spinner-border spinner-border-sm">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm">
    <span class="visually-hidden">Loading...</span>
</div>

— The output of the above example will look something like this:

 

Alternatively, you can use the custom CSS or inline styles to change the size as needed.

Example

<div class="spinner-border" style="width: 40px; height: 40px;">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 40px; height: 40px;">
    <span class="visually-hidden">Loading...</span>
</div>

— The output of the above example will look something like this:

 

Using Spinners within Buttons

You can also use spinners within buttons to indicate an action is currently processing or taking place.

Here’s an example where we’ve placed the spinners inside the disabled buttons.

Example

<!-- Border spinners inside buttons -->
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    Loading...
</button>	

<!-- Growing spinners inside buttons -->
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    Loading...
</button>

— The output of the above example will look something like this: Loading… Loading…

Alignment of Spinners

You can easily align the spinners to left, right or center using the flexbox, text alignment, or float utility classes. Let’s try out the following example and see how it actually works:

Example

<!-- Center align spinner using flex utilities -->
<div class="d-flex justify-content-center">
    <div class="spinner-border" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>

<!-- Center align spinner using text alignment utilities -->
<div class="text-center">
    <div class="spinner-border" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>