css - Bootstrap 4 spacing bug?

Question

Bootstrap 4 has Spacing Utilities to adjust margins and paddings with simple CSS classes.

Theoretically, I could do something like this:

<div class="d-inline-block bg-inverse p-5 pb-0 m-5 mb-0"></div>

And this should be an element with paddings and margins on each side except at the bottom. Right?

But that isn't happening. Instead, pb-0 and mb-0 are being overwritten by p-5 and m-5, as you can see here: example in JSFiddle.

---

pb-0 and mb-0 are defined after p-5 and m-5 in the original source, and all of the attributes used in these classes have !important. So pb-0 should overwrite the padding-bottom defined by p-5 and mb-0 should overwrite the margin-bottom defined by m-5.

I created another example where I defined these classes in the same way, but in this case, they are working as expected: comparison example in JSFiddle.

---

Why these Bootstrap 4 classes are not working as expected?

Answer 1

The spacing utils use !important so, using pb-0 to override p-5 isn't going to work because p-5 follows pb-0 in the bootstrap.css

To get it working like you want set the specific sides...

<div class="d-inline-block bg-inverse pb-0 px-5 pt-5 mb-0 ml-5 mt-5"></div>

And, since DIV doesn't have padding or margins by default, you don't really need the *-0...

<div class="d-inline-block bg-inverse px-5 pt-5 ml-5 mt-5"></div>

https://www.codeply.com/go/6hSIEizfMd

---

Also see, when it's OK to use !important