Bootstrap 5 Spinners Flex Placements
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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > </ head > < body > < h1 class = "mt-3 text-success text-center" > w3wiki </ 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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > </ head > < body > < h1 class = "mt-3 text-success text-center" > w3wiki </ 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
Contact Us