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