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

Created by: davidtmiller

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