Bootstrap 5 Spinners Flex Placements
source link: https://www.geeksforgeeks.org/bootstrap-5-spinners-flex-placements/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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.
<!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
Here's a complete roadmap for you to become a developer: Learn DSA -> Master Frontend/Backend/Full Stack -> Build Projects -> Keep Applying to Jobs
And why go anywhere else when our DSA to Development: Coding Guide helps you do this in a single program! Apply now to our DSA to Development Program and our counsellors will connect with you for further guidance & support.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK