How do I use the Spacing Utility Classes in Bootstrap

by

Bootstrap 5 beta – update 2021

Now that Bootstrap 5 has RTL support, the concept of left and right have change to start and end. Therefore the *l- and *r- spacing utilities have changed

pl-* = ps-*
pr-* = pe-*
ml-* = ms-*
pr-* = me-*

Bootstrap 4 -update 2020

The Bootstrap 4 spacing utils have changed since the original answer (for v4 alpha). Now the syntax is simply:

  • margins: m{sides}-{size}
  • padding: p{sides}-{size}

Examples..

mb-2 = margin bottom 2 spacing units
m-0 = no margins
pt-3 = padding top 3 spacing units
p-1 = padding all sides 1 spacing unit

There are now 6 sizes (0-5) that represent a portion of the standard .5rem spacer unit. Additionally, x-axis (left/right) and y-axis (top/bottom) utils have been added:

my-2 = margin top & bottom 2 spacing units
mx-0 = no margins left & right
px-3 = padding left & right 3 spacing units

And, the spacing utils are now responsive. The smallest xs breakpoint is implied when no breakpoint is used.

  • margins: m{sides}-{breakpoint}-{size}
  • padding: p{sides}-{breakpoint}-{size}

mt-md-2 = margin top 2 spacing units, on md (and up)
py-sm-0 = no padding top & bottom, on sm (and up)

Bootstrap 4 Spacing Utils Demo

Related: Bootstrap 4 spacing bug?

More Related Contents:

  1. Want to make a multi page navigation menu “HTML, JS, jQuery, Bootstrap” [closed]
  2. Bootstrap 4 Dropdown Menu not working?
  3. Bootstrap 4 File Input
  4. How can I dynamically highlight strings on a web page?
  5. CSS Propertie change OnClick [closed]
  6. My website doesn’t load jQuery [closed]
  7. Retrieve the position (X,Y) of an HTML element
  8. How to load up CSS files using Javascript?
  9. Determine if an HTML element’s content overflows
  10. How to use Meteor methods inside of a template helper
  11. Detecting the system DPI/PPI from JS/CSS?
  12. Instead of using prefixes I want to ask site visitors to upgrade their browser
  13. Can I force a link to open in a specific browser?
  14. Determine if an element has a CSS class with jQuery
  15. Why write when the mime type is set by the server?
  16. How to show popup message like in Stack Overflow
  17. Disable click outside of bootstrap modal area to close modal [duplicate]
  18. flow 2 columns of text automatically with CSS
  19. How can I lock the first row and first column of a table when scrolling, possibly using JavaScript and CSS?
  20. Am I using too much jQuery? When am I crossing the line?
  21. Use a new CSS file to override current website’s
  22. How to get just numeric part of CSS property with jQuery?
  23. In Javascript, how do I “clear” the back (history -1)?
  24. Dynamically loading templates in Meteor.js
  25. Using JavaScript to edit CSS gradient
  26. Show a second dropdown based on previous dropdown selection
  27. How can I change the font (family) for the labels in Chart.JS?
  28. Unusual shape of a textarea?
  29. How to display Image dynamically on UI?
  30. Is there a way to curve / arc text using CSS3 / Canvas

Leave a Comment