Bootstrap 5 Spinners Alignment is used to set the alignment of the spinner element. The spinner element can easily be resized, recolored, and quickly aligned.
Spinners Alignment:
- Margin Alignment: Spinner margin is used to create spinners in different margins.
-
Spinners Placement: 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.
- 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.
Example 1: In this example, we will use flex placement to set the position of the spinner element.
HTML
<!DOCTYPE html> <html>
<head>
<title>Bootstrap 5 Spinners Alignment</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 Alignment</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 margin alignment to create spinners in different margins.
HTML
<!DOCTYPE html> <html>
<head>
<title>Bootstrap 5 Spinners Alignment</title>
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
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 Alignment</h2>
<div class="spinner-border spinner-border m-5"
role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/spinners/#alignment