Bootstrap 5 Spinners Flex Placements
Last Updated :
15 Dec, 2022
Bootstrap5 Spinner Flex Placements is a display utility that is used to place the spinner in a flexbox, where the spinner is placed inside the flexbox container using the .d-flex class.
Spinners Flex Placements Class:
- d-flex: This is a flexbox helper class and it is used to have the Flex Placement.
Syntax:
<div class="d-flex">
<div class="spinner-border">
<span class="visually-hidden">
...
</span>
</div>
</div>
Example 1: This example demonstrates how to implement the Flex Placement and also the spinner with a color.
HTML
<!doctype html>
<html lang="en">
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<h1 class="mt-3 text-success text-center">
GeeksforGeeks
</h1>
<h4 class="text-center">
Bootstrap 5 Spinners Flex Placements
</h4>
<div class="d-flex align-items-center container mt-3">
<strong>
Loading Your Content...
</strong>
<div class="spinner-border ms-auto"></div>
</div>
<div class="d-flex align-items-center container mt-3">
<strong>
Spinner in Danger Color...
</strong>
<div class="spinner-border ms-auto text-danger"></div>
</div>
</body>
</html>
|
Output:
Example 2: The code example demonstrates how to implement the text-center Placement with d-flex inside the d-flex container the text-center class doesn’t work and without it works fine with different backgrounds.
HTML
<!doctype html>
<html lang="en">
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<h1 class="mt-3 text-success text-center">
GeeksforGeeks
</h1>
<h4 class="text-center">
Bootstrap 5 Spinners Flex Placements
</h4>
<div class="d-flex container p-4 bg-light">
<div class="text-center">
<div class="spinner-border">
<span class="visually-hidden">
Loading...
</span>
</div>
</div>
<strong>
This is the Spinner with Text-center and d-flex added
</strong>
</div>
<div class="container p-4 text-light bg-dark mt-3">
<div class="text-center">
<div class="spinner-border text-success">
<span class="visually-hidden">
Loading...
</span>
</div>
</div>
<strong>
Spinner with Text-center with the color without d-flex
</strong>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/spinners/#flex
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...