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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...