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:

<         


        

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