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.
<!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.
<!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