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.
.spinner-border
to
spinner loader container base class.
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.
.spinner-border
to spinner loader container.
.text-*
to the spinner container.
.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 spinners glows repeatedly after a certain time duration.It does not spin.To make growing spinner,add
.spinner-grow
tp spinner container.
General Syntax
<div class="spinner-grow 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-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
Note:
To create growing spinner,assign .spinner-grow
to the spinner container.
To create smaller spinner size ,use either .spinner-border-sm
or .spinner-grow-sm class
.
General Syntax
<div class="spinner-grow spinner-grow-sm"></div>
<div class="spinner-border spinner-border-sm"></div>
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.
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.
flexbox utilities, float utilities, or text alignment are very helpful utilities class that placed spinner to any where in the web page.
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
Note:In the above example flexbox utility class is used to align the spinners.
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
Note:
In the above example, .float-right
is used to align the spinner to the right of the web page.
General Syntax
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
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
Note:In the above example, .text-center
is used to align the spinner to the right of the web page.