o7planning

Bootstrap Spacing Utilities Tutorial with Examples

View more Tutorials:

Follow us on our fanpages to receive notifications every time there are new articles. Facebook Twitter

1- Spacing Utility

Spacing Utility is the part of Bootstrap. It gives classes to help users set up the margin, padding values for elements. These classes are friendly with devices with different screen size.
Basically, these classes are named as the following format:
  • {property}{sides}-{size}

  • {property}{sides}-{breakpoint}-{size}

Of which:
  • {property}{size} is mandatory value.
  • {sides}{breakpoint} is non-mandatory value.

{property}:
{property} has  "m" or "p" values.
{property}Description
mThis is abbreviation of "Margin", related to setting up of margin for elements.
pThis is abbreviation of "Padding", related to setting up of padding for elements.
{sides}:
{sides}Description
tThis stands for "Top", related to setting up margin-top or padding-top
bThis stands for "Bottom", related to setting up margin-bottom or padding-bottom
lThis stands for "Left", related to setting up margin-left or padding-left
rThis stands for "Right", related to setting up margin-right or padding-right
xRefer to  axis (Horizontal), related to setting up margin-left & margin-right or padding-left & padding-right.
yRefer to​​​​​​​ Y axis (Vertical), related to setting up margin-top & margin-bottom or padding-top & padding-bottom.
{size}:
{size}Description
0Set the value for padding or margin to 0.
1Set the value for padding or margin to 0.25 * $spacer.
2Set the value for padding or margin to 0.5 * $spacer.
3Set the value for padding or margin to 1 * $spacer.
4Set the value for padding or margin to 1.5 * $spacer.
5Set the value for padding or margin to 3 * $spacer.
autoSet the value for margin to auto.
$spacer is a value defined in the SASS of Bootstrap. This value may be different for the equipment with different screen width.
{breakpoint}
{breakpoint}Description
smWorks when the width of parent element is >= 567px.
mdWorks when the width of parent element is >= 768px.
lgWorks when the width of parent element is >= 992px.
xlWorks when the width of parent element is​​​​​​​ >= 1200px.

2- Examples

margin-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Margin Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>

      <div class="container-fluid border border-primary mt-5">
         <div class="border border-danger mt-5 mr-4 mb-4 ml-auto" style="width:100px;">
           Div
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>

</html>
 
paddingexample

<div class="border border-danger pt-5 pr-4 pb-4 pl-5" style="width:300px;">
   Bootstrap is a free front-end framework for faster and easier web development.
   Bootstrap includes HTML and CSS based design templates for typography ...
</div>
If an element is set up margin automatically on the left and on the right. It will appear in the center of father element horizontally.
center-example

<div class="container-fluid border border-primary mt-5">

   <div class="mx-auto border border-danger" style="width:100px;">
      Center DIV
   </div>

</div>
Responsive:

<div class="container-fluid border border-primary">

   <div class="border border-danger m-1 m-sm-5" style="width:100px;">
      .m-1 .m-sm-5
   </div>

</div>

View more Tutorials:

Maybe you are interested

These are online courses outside the o7planning website that we introduced, which may include free or discounted courses.