Spacing Utility in Bootstrap 4

Today I started playing around with the Bootstrap 4 Alpha 2. I stopped everything I was doing to write this post as soon as I saw the spacing utilities that were added. I’ve been manually adding something similar into my projects since I saw something sort of like this in Ionic a while back. It’s so helpful and I’m excited to see that it was added.

The utility basically lets you modify the margin or padding on an element. For example, a lot of my sites in the past didn’t need the bottom margin on the Bootstrap navbar, so I’d create a class of m-b-0 that sets the margin bottom to 0 and then add the class to the navbar. This utility is even cooler though. You can modify the top, right, bottom, left, all, or left and right as needed. For example, the class m-a-2 sets an element’s margin on all sides to 2 times the $spacer sass variable. The class m-x-3 would set the left and right margins to 3 times the $spacer variable. Nice!

Published by

Kelly Kiernan

I'm a Web Developer from Philadelphia, PA who loves technology, music, science and design. I have a degree in Information Sciences & Technology from Penn State and am currently studying Computing & Security Technology at Drexel University.