Padding/alignment issue when using a .container within .navbar-expand-* responsive navbar

When using a container within a responsive navbar, it seems that the padding is being removed - which is necessary under the xs breakpoint, <576px. Between the xs breakpoint and wherever the navbar is collapsing however, the padding seems a bit off.

I located the portion of the SCSS that is responsible for this. In the _navbar.scss file, I found:

      @include media-breakpoint-down($breakpoint) {
        > .container,
        > .container-fluid {
          padding-right: 0;
          padding-left: 0;
        }
      }

Which, when using navbar-expand-lg for example, sets the left and right margins to 0 at 991px and below.

Now I am not super familiar with the Bootstrap SASS setup, so I was unable to produce a fix in the Bootstrap SASS, but I created a messy override that was a working solution to this alignment problem.

Default View

Live Demo on CodePen: https://codepen.io/davidtmiller/pen/wPoNBm

The fix is just some SASS I added after loading Bootstrap:

.navbar-expand-lg,
.navbar-expand-md,
.navbar-expand-sm,
.navbar-expand-xl {
  > .container,
  > .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
    @media (max-width: 575px) {
      padding-left: 0;
      padding-right: 0;
    }
  }
}

With this fix, the collapsed navbar aligns with the rest of the page content, and continues to align correctly after the xs breakpoint is reached.

After Fix

Live Demo on CodePen: https://codepen.io/davidtmiller/pen/MObLwR

Again I’m not quite sure how to approach this in the SASS files, I know the answer will be shifting some things around with the _navbar.scss file, like adding a media-breakpoint-min mixin or something like that.

System Info:

• Mac OS X Sierra
• Most Recent Chrome/Firefox/Safari

[agriffis]

I’ve been banging my head on this for a while (see #26301 and #26302) and finally realized it’s impossible to fully fix with the current navbar hierarchy and code. The root of the problem is that nesting container in navbar-expand requires removing the padding from the navbar, not from the container. But that can’t be done with CSS selectors, so instead Bootstrap removes the padding from the container, which only works when the container is fluid (either because it’s .container-fluid, or because the screen is xs).

For example @SkuterPL shows above what happens when the screen is wide enough for the container max-width to apply. At that point, the container is centered using margin-left: auto and margin-right: auto. The container padding is inside those margins. But on the navbar, the container padding has been zeroed. Even though the navbar itself has padding, it’s at the edges of the viewport.

Here is what I’m using as a workaround, after loading bootstrap css:

.navbar {
    padding-left: 0;
    padding-right: 0;
}
.navbar-expand > .container,
.navbar-expand > .container-fluid,
.navbar-expand-sm > .container,
.navbar-expand-sm > .container-fluid,
.navbar-expand-md > .container,
.navbar-expand-md > .container-fluid,
.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid,
.navbar-expand-xl > .container,
.navbar-expand-xl > .container-fluid
{
    padding-left: 15px;
    padding-right: 15px;
}

Here are a couple jsbins:

• problem
• workaround

[SkuterPL]

Are you going to fix that in 4.1? Because I have the same problem like other:

You can see that padding is missing and with this it’s a problem.