Bootstrap 4 Spacing Bug

Bootstrap 4 spacing bug?

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

Bootstrap Spacing classes not working

Yes you are using older version of bootstrap. Demo 3.3.5 that's why it is not working

If you use V4.0 , Demo here its working fine

As Vucko mentioned, your Bootstrap version does not have the classes you used in your HTML structure..

<div>
    <ul class="p-t-20">
        <li><a href="#" class="fa fa-calendar fa-lg"> Events</a> </li>
    </ul>
</div>

Bootstrap causing unknown margin

The space is there because you put the submit button in a parent with a specific width. Specifically col-md-2 (If a screen is 12 columns wide, this element is always 2 columns wide). Try removing that fixed column width and setting the parent to float right with justify-content-end.

<div class="row justify-content-end no-margin">
    ...
    <div class="">
        <div class="form-btn">
            <button class="submit-btn"><i class="fas fa-search" aria-hidden="true"></i></button>
        </div>
    </div>
</div>

Full version working on JSFiddle:
https://jsfiddle.net/6wk7bm40/

How do I use the Spacing Utility Classes in Bootstrap

Refer to the Spacing (Bootstrap v4 alpha) documentation.

The classes are named using the format: {property}-{sides}-{size}

Where size is one of: * 0 - for classes that eliminate the margin
or padding by setting it to 0 * 1 - (by default) for classes that
set the margin or padding to $spacer-xor $spacer-y * 2 - (by
default) for classes that set the margin or padding to $spacer-x *
1.5 or $spacer-y * 1.5 * 3 - (by default) for classes that set the margin or padding to $spacer-x * 3 or $spacer-y * 3.

So use m-t-3 instead of m-t-lg.

Bootstrap 4 container fluid unwanted margins

container-fluid has padding-left and padding-right of 15px which is the gap you're seeing. You could overwrite it by adding the class px-0 which is padding of 0 for left and right. And you would then have to overwrite the 15px margins of the row with a mx-0 class.

But if it's a nav that you want, then what you should be using is the nav component of Bootstrap: https://getbootstrap.com/docs/4.1/components/navbar/

bootstrap padding and margin issues

1. It causes that h1(Logo) to have a different margin on top and bottom. The solution is simple, just set the same margin for both.

   h1{
       margin-top:0px;
       margin-bottom:0px
   }
   

2. The gap between header area and search section comes from the margin of h1(Search). The solution is to set the margin of that h1(Search) to zero.

   h1{
       margin-top:0px;
   }
   

3. It causes bootstrap to set every column to have a padding of 15px on both left and right side. The solution is to override bootstrap style:

    [class*="col-"]{
        padding:0px;
   

If you don't want to override all bootstrap columns, create your own class then.

---

Related Topics