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!