Bootstrap 4 spacing error?
Bootstrap 4 has Spacing Utilities for customizing margins and padding with simple CSS classes.
In theory , I can do something like this:
<div class="d-inline-block bg-inverse p-5 pb-0 m-5 mb-0"></div>
And it should be an element with paddings and margins on each side except at the bottom . Right?
But this doesn't happen pb-0
and is mb-0
overwritten p-5
and m-5
, as you can see here:
example in the JSFiddle .
pb-0
and are mb-0
defined after p-5
and m-5
in the original source, and all the attributes used in these classes have !important
. Therefore pb-0
must overwrite padding-bottom
defined p-5
, and mb-0
must overwrite margin-bottom
defined m-5
.
I created another example where I defined these classes in the same way, but in this case they work as expected: a comparison example on JSFiddle .
Why are these Bootstrap 4 classes not working as expected?
source to share
The utilities use spacing !important
, so using pb-0
to override p-5
won't work because it p-5
follows pb-0
inbootstrap.css
To get it working the way you want , set certain sides ...
<div class="d-inline-block bg-inverse pb-0 px-5 pt-5 mb-0 ml-5 mt-5"></div>
And, since the DIV has no padding or margins by default, you really don't need *-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 to use it! important
source to share