Bootstrap 4 Margin classes
Bootstrap 4 contains a variety of brief, responsive margin and padding utility classes to change the appearance of an element.
The Bootstrap 4 margin classes use for the outer spacing of the element. If we want to assign outer side space to the element and container, use margin classes.
Classes are created using a basic Sass map with widths ranging from .25rem to 3rem. We can assign responsive-friendly margin or spacing values to an element or a subset of its sides using shorthand classes. Individual properties, all properties, and vertical and horizontal properties are all supported.
Syntax of the margin classes
There is no breakpoint abbreviation in spacing utilities that apply to all breakpoints from xs to xl. Certain classes are applied from min-width: 0 and above and are thus not bound by a media query. The remaining breakpoints, on the other hand, have a breakpoint abbreviation.
Bootstrap 4 margin classes title property sides-size such as an xs, sm, md, LG, and xl screen size. The class names property sides-breakpoint-size.
The bootstrap 4 margin class and its property use the following syntax.
m - for margin classes
For the sides of the margin, the syntax is as follows:
(m) (side) - (size)
The following syntax is used for extra-large, large, medium, and tiny screens:
(m) (aspects) – (breakpoints) - (size)
Side of the margin classes
Bootstrap 4 uses margin class with the side of the element. The class assigns the element's top, bottom, left, right, horizontal, and vertical sides. The bootstrap 4 margin class and its sides use the following syntax.
| Margin Sides | Description |
| t | For classes that have margin-top or outer spacing top set. |
| b | For classes that have margin-bottom or outer spacing bottom set. |
| l | For classes that have margin-left or outer spacing left to set. |
| r | For classes that have the margin-right or outer spacing right set. |
| x | For classes that configure both left and right |
| y | For classes that configure both top and bottom |
| blank | For classes, apply a margin or padding to all four sides of the element. |
Example
The following example shows the margin sides of the bootstrap 4 version.
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap 4 Margin classes </title>
<meta charset= "utf-8">
<meta name= "viewport" content= "width=device-width, initial-scale=1">
<link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class= "container">
<h3> Bootstrap 4 Margin Classes </h3>
<hr>
<div class= "m-5 bg-success" id = "margins"> The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.
The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.
</div> <hr>
<div class= "mt-5 bg-success" id = "margins"> The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.
The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.
</div> <hr>
<div class= "mb-5 bg-success" id = "margins"> The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.
The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.
</div> <hr>
<div class= "ml-5 bg-success" id = "margins"> The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.
The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.
</div> <hr>
<div class= "mr-5 bg-success" id = "margins"> The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.
The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.
</div> <hr>
</div>
</body>
</html>
Output
Size of the margin classes
Bootstrap 4 uses margin class with the size of the element. The class assigns from zero (0) to five (5) sizes of the element margin. The bootstrap 4 margin class and its sizes use the following syntax.
| Margin Size | Description |
| 0 | For classes, remove the margin or padding by setting it to zero. |
| 1 | (by default) for classes where the margin or padding is set to $spacer *.25 |
| 2 | (By default) for classes where the margin or padding is set to $spacer *.5 |
| 3 | (by default) For classes, set the margin or padding to $spacer. |
| 4 | (By default) for classes where the margin or padding is set to $spacer * 1.5 |
| 5 | (by default) for classes where the margin or padding is set to $spacer * 3 |
| auto | for classes where the margin is set to auto |
Examples
The following is a size of a margin example. Sizes 1,3,4,5 are utilized for margins in this example.
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap 4 Margin classes </title>
<meta charset = "utf-8">
<meta name = "viewport" content= "width=device-width, initial-scale=1">
<link rel = "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "container">
<h3> Bootstrap 4 Margin </h3>
<hr>
<div class = "m-0 bg-success" id = "margins"> The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.
The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.
</div> <hr>
<div class = "m-1 bg-success" id = "margins"> The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.
The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.
</div> <hr>
<div class = "m-3 bg-success" id = "margins"> The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.
The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.
</div> <hr>
<div class = "m-4 bg-success" id = "margins"> The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.
The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.
</div> <hr>
<div class = "m-5 bg-success" id = "margins"> The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.
The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.
</div> <hr>
</div>
</body>
</html>
Output
The below image shows the Bootstrap 4 margin for an element with sizes.
Bootstrap 4 Horizontal center
Furthermore, Bootstrap contains a .mx-auto class for horizontally centering fixed-width block-level content (content with display: block and a width defined) by setting the horizontal margins to auto.
Syntax
The following syntax shows horizontal center of the element.
<div style = "width: 200px;" class = "mx-auto">
Information about the centre
</div>
Examples
The following is a horizontal margin example.
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap 4 Margin classes </title>
<meta charset= "utf-8">
<meta name= "viewport" content= "width=device-width, initial-scale=1">
<link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class= "container">
<h3> Bootstrap 4 Margin classes </h3>
<hr>
<div class= "mx-auto bg-success" id = "margins" style = "width: 500px;" > The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.
The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.
</div> <hr>
<div class= "ml-auto bg-success" id = "margins" style = "width: 500px;" > The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.
The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.
</div> <hr>
<div class= "bg-warning" id = "margins"> The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.
The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.
</div> <hr>
</div>
</body>
</html>
Output
Bootstrap 4 Negative margin
Margin properties in CSS can have negative values (padding cannot). We've added negative margin utilities for every non-zero integer size stated above in version 4.2. These utilities are excellent for modifying grid column gutters across breakpoints.
Syntax of negative margin
The syntax is nearly identical to that of the default, positive margin utilities, with the addition of n before the requested size. Here's an example of a class that is the inverse of.mt-1:
.mt-n1{
Margin-top: -0.30rem !important;
}
Here's a sample of changing the Bootstrap grid at the medium (md) and higher breakpoints. We increased the .col padding with .px-md-5 and then offset it with .mx-md-n5 on the parent .row class.
Examples
The following example shows negative margin of the element.
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap 4 Margin classes </title>
<meta charset= "utf-8">
<meta name= "viewport" content= "width=device-width, initial-scale=1">
<link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class= "container">
<h3> Bootstrap 4 Margin classes </h3>
<hr>
<div class= "mx-auto bg-success" id = "margins" style = "width: 500px;" > The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.
The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.
</div> <hr>
<div class= "bg-warning" id = "margins" style = "width: 500px; margin-left:-20px;"> The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.
The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.
</div> <hr>
</div>
</body>
</html>
Output
Conclusion
The margin classes create space on a web page for an attractive and user-friendly application. We can create a margin helping with the size and sides of the element. The Bootstrap 4 margin classes use breakpoint for responsive web applications.