Bootstrap 4 Spinners

Bootstrap 4 spinners show the loading state of the components.

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

Steps to create bootstrap spinner.

  • Step: Add .spinner-border to spinner loader container base class.

Example

Loading...

General Syntax

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

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col mb-4">
      <div class="spinner-border text-primary"></div>
    </div>
    <div class="col mb-4">
      <div class="spinner-border text-success"></div>
    </div>
    <div class="col mb-4">
      <div class="spinner-border text-info"></div>
    </div>
  </div>
  <!--/row-->
</div>
<!--/container-->	
	
Try it yourself

Source Code : Output

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

Colored Spinners

  • Step1: Add .spinner-border to spinner loader container.
  • Step2: To create colored spinner,use .text-* to the spinner container.
  • Step3: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-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
	  

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col mb-4">
      <div class="spinner-border text-primary"></div>
    </div>
    <div class="col mb-4">
      <div class="spinner-border text-success"></div>
    </div>
    <div class="col mb-4">
      <div class="spinner-border text-info"></div>
    </div>
  </div>
  <!--/row-->
</div>
<!--/container-->	
	
Try it yourself

Source Code : Output

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

Loading...
Loading...
Loading...

General Syntax

		<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
	  
Try It Now

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col mb-4">
      <div class="spinner-grow text-primary" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
    <div class="col mb-4">
      <div class="spinner-grow text-success" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
    <div class="col mb-4">
      <div class="spinner-grow text-info" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
  </div>
  <!--/row-->
</div>
<!--/container-->	
	
Try it yourself

Source Code : Output

Loading...
Loading...
Loading...

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

Spinner Size

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

Example

General Syntax

		<div class="spinner-grow spinner-grow-sm"></div>
<div class="spinner-border spinner-border-sm"></div>
	  
Try It Now

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col mb-4">
      <div class="spinner-border spinner-border-sm"></div>
    </div>
    <div class="col mb-4">
      <div class="spinner-grow spinner-grow-sm"></div>
    </div>
  </div>
  <!--/row-->
</div>
<!--/container-->	
	
Try it yourself

Source Code : Output

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-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
	  

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col mb-4">
      <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
      </button>
    </div>
    <div class="col mb-4">
      <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
        Loading..
      </button>
    </div>
    <div class="col mb-4">
      <button class="btn btn-primary" disabled>
        <span class="spinner-border spinner-border-sm"></span>
        Loading..
      </button>
    </div>
    <div class="col mb-4">
      <button class="btn btn-primary" disabled>
        <span class="spinner-grow spinner-grow-sm"></span>
        Loading..
      </button>
    </div>
  </div>
  <!--/row-->
</div>
<!--/container-->	
	
Try it yourself

Source Code : Output

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

Spinner 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

Center Alignment
Loading...

General Syntax

		<div class="d-flex justify-content-center"></div>
	  

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col mb-4">
      <div class="d-flex justify-content-center">
        <div class="spinner-border" role="status">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
    </div>
  </div>
  <!--/row-->
</div>
<!--/container-->	
	
Try it yourself

Source Code : Output

Loading...

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

Spinner Alignment Using Float

example
Loading...

General Syntax

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

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col mb-4">
      <div class="spinner-border float-right" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
  </div>
  <!--/row-->
</div>
<!--/container-->	
	
Try it yourself

Source Code : Output

Loading...

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

Loading...

General Syntax

		<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>
	  
Try It Now

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col mb-4">
      <div class="text-center">
        <div class="spinner-border" role="status">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
    </div>
  </div>
  <!--/row-->
</div>
<!--/container-->	
	
Try it yourself

Source Code : Output

Loading...

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

Our Tutorials

Bootstrap 4 Spinners
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS