Spinners
The spinners are used to specify the loading state of a component or webpage. Bootstrap facilitates the various classes for creating different styles of spinners by modifying their appearance, size, and placement.
| Class | Description | Syntax |
|---|---|---|
| Border | Used to rotate the spinner | .spinner-border |
| Grow | Used for growing spinners. | .spinner-grow |
| Margin | Adds margins to the spinners. | .m- value |
| Placement | Places spinners at different positions | .d-flex |
| Size | Changes the size of the spinners. | .spinner-border-sm|md|lg|xl |
Example Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<h2 class="text-success text-center">
w3wiki
</h2>
<h5 class="text-info text-center">
Bootstrap Spinner Border
</h4>
<div class="d-flex justify-content-center">
<div class="spinner-border text-secondary"
role="status">
</div>
<span>Please Wait </span>
</div>
<br/>
<h5 class="text-info text-center">
Bootstrap Spinner Grow
</h5>
<div class="d-flex justify-content-center">
<span>
<h5>Processing</h5>
</span>
<div class="spinner-grow text-primary"
role="status">
</div>
</div>
<br/>
<h5 class="text-info text-center">
Spinner Placement using Bootstrap classes
</h5>
<br/>
<h5 class=" text-center">
Using the Text Placement Classes
</h5>
<div class="text-center">
<div class="spinner-border m-5 " role="status">
</div>
</div>
<h5 class="text-center">
Using the Flex Box Classes
</h5>
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
</div>
</div>
</body>
</html>
Bootstrap Cheat Sheet – A Basic Guide to Bootstrap
Bootstrap is a free, open-source, potent CSS framework and toolkit used to create modern and responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, websites are perfect for all browsers and all sizes of screens.
Contact Us