BootStrap 5 Utilities Margin and Padding
Last Updated :
03 Apr, 2023
In Bootstrap 5, the margin and padding utilities are used to add space around elements. The margin utilities are used to add space outside of an element, while the padding utilities are used to add space inside of an element.
Bootstrap 5 Utilities Margin and padding Classes: There are no different classes for these utilities, you can use the margin and padding spacing utilities to assign the space around the elements.
Syntax:
<tag class="m-{size}-{direction}">...</tag>
Note: Classes described for ‘m‘ for margin,‘p‘ for padding,‘{size}‘: The size of the margin or padding, where size can be 0, 1, 2, 3, 4, 5 and ‘ {direction}‘: The direction of the margin or padding, where direction can be t, b, l, r, x, y.
Example 1: In this example, we will demonstrate bootstrap 5 margins.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<div class="container bg-danger">
<h1 class="text-success mt-5 m-auto">GeeksforGeeks</h1>
<h2 class="mt-5"> BootStrap5 Utilities Margin and padding</h2>
<h1 class="text-success mt-5 m-auto">GeeksforGeeks</h1>
</div>
</body>
</html>
|
Output:
Bootstrap 5 Utilities Margin and Padding
Example 2: In this example, we will demonstrate bootstrap 5 paddings.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="text-success mt-5 m-auto">
GeeksforGeeks
</h1>
<div class="pt-0 bg-primary">Padding Top none </div>
<div class="pt-1 bg-danger">Padding Top 1</div>
<div class="pt-2 bg-success">Padding Top 2</div>
<div class="pt-3 bg-info">Padding Top 3</div>
</div>
</body>
</html>
|
Output:
.png)
BootStrap 5 Utilities Margin and Padding
Reference: https://getbootstrap.com/docs/5.0/layout/utilities/#margin-and-padding
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...