Bootstrap 5 Spinners Margin
Bootstrap 5 Spinners Margin is used to create spinners in different margins. For margin spinners, we will use .m class with five different sizes from 0 to 5. Also, auto is used for margin auto. For different sides of the margin, we will use t (for top), b (for bottom), s (for start), e (for end), x (for both left and right), y (for top and bottom), and blank (for all sides).
The following syntax are used in the various classes for adding spacing:
- (property)(sides)-(size) for xs
- (property)(sides)-(breakpoint)-(size) for sm, md, lg, and xl.
Property: There are two ways of adding spacing to the elements.
- m: This property defines the margin. Margin provides an edge or border.
Sides: This allows users to add spacing in content to a specific side wherever required.
- t: margin-top/padding-top.
- b: margin-bottom/padding-bottom.
- l: margin-left/padding-left.
- r: margin-right/padding-right.
- x: for padding-left and padding-right/margin-left and margin-right.
- y: for padding-top and padding-bottom/margin-top and margin-bottom.
- blank: margin/padding on all sides of the element.
Size: This allows users to add a specific amount of spacing to a level.
- 0 – 0px margin/padding.
- 1 – 4px margin/padding.
- 2 – 8px margin/padding.
- 3 – 16px margin/padding.
- 4 – 24px margin/padding.
- 5 – 48px margin/padding.
- auto – auto margin.
Example 1: In this example, we will add a margin to the spinners element.
HTML
<!DOCTYPE html> < html > < head > < title >Bootstrap 5 Spinners Margin</ title > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "container text-center" > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Bootstrap 5 Spinners Margin</ h2 > < h3 >Spinners without Margin</ h3 > < div class = "spinner-border spinner-border" role = "status" > < span class = "visually-hidden" >Loading...</ span > </ div > < div class = "spinner-grow spinner-grow" role = "status" > < span class = "visually-hidden" >Loading...</ span > </ div > < br >< br > < h3 >Spinners with Margin</ h3 > < div class = "spinner-border spinner-border m-5" role = "status" > < span class = "visually-hidden" >Loading...</ span > </ div > < div class = "spinner-grow spinner-grow m-5" role = "status" > < span class = "visually-hidden" >Loading...</ span > </ div > </ div > </ body > </ html > |
Output:
Example 2: In this example, we will add a margin to the spinners element.
HTML
<!DOCTYPE html> < html > < head > < title >Bootstrap 5 Spinners Margin</ title > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "container text-center" > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Bootstrap 5 Spinners Margin</ h2 > < h3 >Spinners without Margin</ h3 > < button class = "btn btn-success" type = "button" > < span class="spinner-grow text-white spinner-grow-sm" role = "status" ></ span > < span class = "visually-hidden" >Loading...</ span > </ button > < button class = "btn btn-success" type = "button" > < span class = "spinner-border spinner-border-sm" role = "status" ></ span > < span class = "visually-hidden" >Loading...</ span > </ button > < br >< br > < h3 >Spinners with Margin</ h3 > < button class = "btn btn-primary m-4" type = "button" > < span class="spinner-grow text-white spinner-grow-md" role = "status" ></ span > < span class = "visually-hidden" >Loading...</ span > </ button > < button class = "btn btn-primary m-4" type = "button" > < span class = "spinner-border spinner-border-md" role = "status" ></ span > < span class = "visually-hidden" >Loading...</ span > </ button > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/spinners/#margin
Contact Us