Bootstrap Spacing Utility Classes – Margin & Padding | Tutorial – 12

In this tutorial we will understand the bootstrap 4 frameworks spacing utilities which are the responsive padding and margin classes and how we can use them in our website.

How it works

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from .25rem to 3rem.

Notation

Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for smmdlg, and xl.

Where property is one of:

  • m – for classes that set margin
  • p – for classes that set padding

Where sides is one of:

  • t – for classes that set margin-top or padding-top
  • b – for classes that set margin-bottom or padding-bottom
  • l – for classes that set margin-left or padding-left
  • r – for classes that set margin-right or padding-right
  • x – for classes that set both *-left and *-right
  • y – for classes that set both *-top and *-bottom
  • blank – for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

  •  – for classes that eliminate the margin or padding by setting it to 
  • 1 – (by default) for classes that set the margin or padding to $spacer * .25
  • 2 – (by default) for classes that set the margin or padding to $spacer * .5
  • 3 – (by default) for classes that set the margin or padding to $spacer
  • 4 – (by default) for classes that set the margin or padding to $spacer * 1.5
  • 5 – (by default) for classes that set the margin or padding to $spacer * 3
  • auto – for classes that set the margin to auto

(You can add more sizes by adding entries to the $spacers Sass map variable.)

This information is taken from the official bootstrap documentation. For for more information check here – https://getbootstrap.com/docs/4.1/utilities/spacing/

Setting up everything Library into our Project Offline –

Download this entire test code folder which will the full folder hierarchy with the necessary library files already set up – DOWNLOAD HERE

The folder hierarchy should look like this –

  • test code
    • bootstrap
      • css
        • bootstrap.min.css
      • js
        • bootstrap.min.js
        • jquery-3.3.1.slim.min.js
        • popper.min.js
    • css
      • style.css (our custom css file)
    • fontawesome-free-5.6.3-web
      • css
        • all.css (the only one we need to link in our project for font awesome icons)
      • js
      • etc
      • etc
    • default.html
YouTube video tutorial –

Leave a Reply

Your email address will not be published. Required fields are marked *