Bootstrap 4
BS 4 Spinner
Previous Page
Next Page

Bootstrap 4 Spinners

Bootstrap 4 spinners show the loading state of the components.

Steps to create bootstrap 4 spinners.

  • Add .spinner-border to the spinner loader container base class.

Example

General Syntax 

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

Source Code 

          <div class="container text-center mt-4">
  <h3 class="text-center">Bootstrap Spinner</h3>
  <div class="spinner-border">
    <span class="sr-only">Loading...</span>
  </div>
</div>
Try it now

Source Code: Output

Bootstrap Spinner

Note:Bootstrap spinner is used to show loading state of the web componet inside the web project.

Bootstrap spinners are used to show the loading state of the web component.

Colored Spinners

Follow the following steps to create bootstrap 4 colored spinners.

  • Add .spinner-border to spinner loader container.
  • To create colored spinner, use .text-* to the spinner container.
  • Following are the text utility color classes:.text-primary,.text-secondary,.text-success,.text-danger,.text-warning,.text-info,.text-light,,text-dark.

General Syntax 

      <div class="spinner-border text-*" role="status">
  <span class="sr-only">Loading...</span>
</div>
Try it now

Source Code 

          <div class="container text-center mt-4">
  <h2 class="text-center my-5">Colored Spinners</h2>
  <div class="row">
    <div class="col">
      <div class="spinner-border text-primary" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
    <div class="col">
      <div class="spinner-border text-secondary" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
  </div>
</div>
Try it now

Source Code: Output

Colored Spinners

Remember: Bootstrap provides different text utilities classes that is used to provide different color to the spinners.

Growing spinner

Growing spinners glows repeatedly after a certain time duration.It does not spin.To make growing spinner,add .spinner-grow tp spinner container.

Example

General Syntax 

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

Source Code 

          <div class="container text-center mt-4">
  <h2 class="text-center my-5">Growing Spinners</h2>
  <div class="row">
    <div class="col">
      <div class="spinner-grow text-primary" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
    <div class="col">
      <div class="spinner-grow text-secondary" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
  </div><!--/row-->
</div><!--/container-->
Try it now

Source Code: Output

Growing Spinners

Note: To create growing spinner,assign .spinner-grow to the spinner container.

Colored Growing Spinner

Steps to create colored growing spinners:

  • Add .spinner-grow to spinner loader container.
  • To create colored spinner, add additional .text-* to the spinner container.
  • Following are the text utilities color classes:.text-primary,.text-secondary,.text-success,.text-danger,.text-warning,.text-info,.text-light,,text-dark.

Example

General Syntax 

      <div class="spinner-grow text-*">
  <span class="sr-only">Loading...</span>
</div>
Try it now

Source Code 

          <div class="container text-center mt-4">
  <h2 class="text-center my-5">Growing Spinners</h2>
  <div class="row">
    <div class="col">
      <div class="spinner-grow text-secondary" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
    <div class="col">
      <div class="spinner-grow text-success" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
    <div class="col">
      <div class="spinner-grow text-danger" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
  </div><!--/row-->
</div><!--/container-->
Try it now

Source Code: Output

Growing Spinners

Note: Use bootstrap text utility classes to make colorful growing spinners.

Spinner Size

To create smaller spinner size ,use either .spinner-border-sm or .spinner-grow-sm class.

Example

General Syntax 

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

Source Code 

          <div class="container text-center mt-4">
  <h2 class="text-center">Spinner Size</h2>
  <div class="row">
    <div class="col">
      <div class="spinner-border text-primary spinner-border-sm" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
    <div class="col">
      <div class="spinner-border text-secondary spinner-border-sm" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
  </div><!--/row-->
</div><!--/container-->
Try it now

Source Code: Output

Spinner Size

Note: In the above example, use .spinner-grow-sm or .spinner-border-sm to make smaller spinner size.

Spinner Buttons

To create spinner button, place .spinner-border element within <button>.

General Syntax 

      <button class="btn btn-*">
   <span class="spinner-border spinner-border-sm"></span>
</button>
Try it now

Source Code 

          <div class="container text-center mt-4">
  <h2 class="text-center my-5">Spinner Buttons</h2>
  <div class="row">
    <div class="col mb-2">
      <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
      </button>
    </div>
    <div class="col mb-2">
      <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
        Loading..
      </button>
    </div>
    <div class="col mb-2">
      <button class="btn btn-primary" disabled>
        <span class="spinner-border spinner-border-sm"></span>
        Loading..
      </button>
    </div>
    <div class="col mb-2">
      <button class="btn btn-primary" disabled>
        <span class="spinner-grow spinner-grow-sm"></span>
        Loading..
      </button>
    </div>
  </div>
</div>
Try it now

Source Code: Output

Spinner Buttons

Note: Spinner button can be created easily by assigning spinner inside the button.

Bootstrap 4 Spinners: Alignment

flexbox utilities, float utilities, or text alignment are very helpful utilities class that placed spinner to any where in the web page.

Spinner Alignment Using Flex Utility Classes

Example

Center Alignment

General Syntax 

      <div class="d-flex justify-content-center">
  <div class="spinner-border"></div>
</div>
Try it now

Source Code 

          <div class="container text-center mt-4">
  <h2 class="text-center">Growing Spinner Alignment</h2>
  <div class="row">
    <div class="col-sm-12 col-12">
      <!-- Center Alignment -->
      <div class="d-flex justify-content-center">
        <div class="spinner-border" role="status">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
    </div><!--/col-sm-12 col-12"-->
  </div><!--/row-->
</div><!--/container-->
Try it now

Source Code: Output

Growing Spinner Alignment

Note:In the above example flexbox utility class is used to align the spinners.

Spinner Alignment Using Float

example

General Syntax 

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

Source Code 

          <div class="container text-center mt-4">
  <h2 class="text-center">Spinner Alignment Using Float</h2>
  <div class="clearfix">
    <div class="spinner-border float-right" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
</div>
Try it now

Source Code: Output

Spinner Alignment Using Float

Note: In the above example, .float-right is used to align the spinner to the right of the web page.

Spinner Alignment Using Text Utility Classes

Example

General Syntax 

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

Source Code 

          <div class="container text-center mt-4">
  <div class="text-center">
    <div class="spinner-border" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
</div>
Try it now

Source Code: Output

Note: In the above example, .text-center is used to align the spinner to the right of the web page.

Online Test / Quiz

Question set 1

Web Tutorials

Bootstrap 4 Spinners
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Tutorials
HTML JAVASCRIPT CSS BOOTSTRAP 5
Performance Evalution
HTML Quiz/Test CSS Quiz/Test Bootstrap 4 Quiz/Test Bootstrap 5 Quiz/Test
Practical Approach
Coaching Software Computer Software Skill Management Software School Management Software