Bootstrap Margin
Margin is used to create space around the elements on the web page. Padding is also used for the same purpose. The difference between padding and margin is
- The padding creates space inside the element/container.
- The margin creates space around the element/container.
The bootstrap margin utility class is used to add margins around the element. Responsive margins can be assigned using the bootstrap margin utility class.
Margin Notation
The margin utility classes are named using the format: {property}-{sides}-{size} for xs and {property}-{sides}-{breakpoint}-{sides} for sm, md, lg, and xl.
Where property is :
- m - for classes that set margin around the elements.
where the side is one from the following list:
- t - for classes that set margin-top
- b - for classes that set margin-bottom
- l - for classes that set margin-left
- r- for classes that set margin-right
- x - for classes that set both *-left and *-right
- y- for classes that set margin to both *-top and *-bottom
- blank - for classes that set margin to all four sides.
Where size is one of:
- 0 - It eliminates margin by setting it to 0.
- 1 - It set margin to $spacer *.25
- 2 - It set margin to $spacer *.5
- 3 - It set margin to $spacer * 1
- 4 - It set margin to $spacer *1.5
- 5 - It set margin to $spacer *3
- auto - It sets the margin to auto
Example: Adding margins around elements
We have used the above margin classes and added margins around elements. Margins can be added around containers and elements. Here is a program to add margins using bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container mt-4 bg-secondary">
<h2>Bootstrap margin</h2>
<div class="mt-4 bg-light">margin on top</div>
<div class="m-5 bg-info">margin on all four sides</div>
<div class="mb-5 bg-light">margin on botton</div>
<div class="ml-3 bg-info">margin on left</div>
<div class="my-3 bg-info">margin on left and right</div>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Example: Adding margin to the grid system
Margins can be added around the elements of the grid system. Here in the program, we have added margin-top to the container, and other margins type to columns. For the second row, margins are added to the top and bottom of the row.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container mt-5 text-center bg-secondary">
<h1>Bootstrap margin Example</h1>
<div class="row ">
<div class="col mx-5 bg-info" >col 1</div>
<div class="col bg-danger" >col 2</div>
<div class="col ml-3 bg-success" >col 3</div>
</div>
<div class="row my-3 ">
<div class="col mb-5 bg-warning" >col 1</div>
<div class="col m-4 bg-success" >col 2</div>
<div class="col mt-5 bg-info" >col 3</div>
</div>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Example: Adding margins to buttons
For adding more spaces between series of buttons we can add margins around them. Here in the example margin utility class is used to add spaces between buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container-fluid">
<h1>Bootstrap margin example</h1>
<button class="btn btn-primary mx-sm-3">button</button>
<button class="btn btn-primary mr-sm-3">button</button>
<button class="btn btn-primary mr-sm-3">button</button>
<button class="btn btn-primary mr-sm-3">button</button>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Conclusion
So as we have seen that how we can use margins in bootstrap. So use margins to the grid system or buttons or other components. It is very easy to add with some set of notations. Also, it can be added to all tiers of the grid system. Make full use of margins to create spaces between elements.
