Bootstrap 5 Spinners Placement is used to set the position of spinners where you want to place them according to the need. It uses three utilities flexbox utilities, float utilities, or text alignment to place the items.
Placement Utilities:
- Flex: It is used to set the position of spinners using flexbox placement classes.
- Float: It is used to set the position of spinners using the float placement classes.
- Text Align: It is used to set the position of spinner items using text-align placement classes.
Syntax:
- Set spinner position using flexbox
<div class="d-flex">
<div class="spinner-border" role="status">
</div>
...
</div>- Set spinner position using float:
<div class="clearfix">
<div class="spinner-border float-*" role="status">
</div>
...
</div>- Set spinner position using text-align:
<div class="text-*">
<div class="spinner-border" role="status">
</div>
...
</div>
Example 1: In this example, we will use flexbox placement classes to place the spinner elements.
HTML
<!DOCTYPE html> <html>
<head>
<title>Bootstrap 5 Spinners Placement</title>
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</head>
<body>
<div class="container text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Spinners Placement</h2>
<div class="d-flex justify-content-center">
<div class="spinner-border
spinner-border-sm"
role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
<div class="spinner-grow
spinner-grow-sm" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
</div>
<div class="d-flex justify-content-start">
<div class="spinner-border
spinner-border-md" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
<div class="spinner-grow
spinner-grow-md" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
</div>
<div class="d-flex justify-content-end">
<div class="spinner-border" style="width:2rem; height:2rem;" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
<div class="spinner-grow" style="width:2rem; height:2rem;" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will use float placement classes to place the spinner elements.
HTML
<!DOCTYPE html> <html>
<head>
<title>Bootstrap 5 Spinners Placement</title>
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</head>
<body>
<div class="container text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Spinners Placement</h2>
<div class="clearfix float-start
text-success">
<div class="spinner-border
spinner-border-sm" role="status">
<span class="visually-hidden">
Loading...</span>
</div>
<div class="spinner-grow
spinner-grow-sm" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
</div>
<div class="clearfix float-none
text-success">
<div class="spinner-border
spinner-border-md" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
<div class="spinner-grow
spinner-grow-md" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
</div>
<div class="clearfix float-end
text-success">
<div class="spinner-border" style="width:2rem; height:2rem;" role="status">
<span class="visually-hidden">
Loading...</span>
</div>
<div class="spinner-grow" style="width:2rem; height:2rem;" role="status">
<span class="visually-hidden">
Loading...</span>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 3: In this example, we will use text-align placement classes to place the spinner elements.
HTML
<!DOCTYPE html> <html>
<head>
<title>Bootstrap 5 Spinners Placement</title>
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</head>
<body>
<div class="container text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Spinners Placement</h2>
<div class="text-center text-success">
<div class="spinner-border
spinner-border-sm" role="status">
<span class="visually-hidden">
Loading...</span>
</div>
<div class="spinner-grow
spinner-grow-sm" role="status">
<span class="visually-hidden">
Loading...</span>
</div>
</div>
<div class="text-start text-success">
<div class="spinner-border
spinner-border-md" role="status">
<span class="visually-hidden">
Loading...</span>
</div>
<div class="spinner-grow
spinner-grow-md" role="status">
<span class="visually-hidden">
Loading...</span>
</div>
</div>
<div class="text-end text-success">
<div class="spinner-border" style="width:2rem; height:2rem;"
role="status">
<span class="visually-hidden">
Loading...</span>
</div>
<div class="spinner-grow" style="width:2rem; height:2rem;" role="status">
<span class="visually-hidden">
Loading...</span>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/spinners/#placement