Bootstrap 5 Spinners Margin
Last Updated :
21 Nov, 2022
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 >
rel = "stylesheet"
integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container text-center" >
< h1 class = "text-success" >
GeeksforGeeks
</ 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 >
rel = "stylesheet"
integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container text-center" >
< h1 class = "text-success" >
GeeksforGeeks
</ 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
Share your thoughts in the comments
Please Login to comment...