Sass Bootstrap 4 Styling the Pages with Sidebar Active

sage
8

Flexbox handles this beautifully with natural fallback for mobile first:

// if there's a .sidebar, make some room for it on larger devices
// below this breakpoint will naturally be stacked
@include media-breakpoint-up(md) {
  .content {
    display: flex;

    > .main {
      flex: 9;
    }

    > .sidebar {
      flex: 3;
      min-width: 270px; // width of search widget
    }
  }
}

This doesn’t require any additional (potentially conditional) classes to be applied to the app.blade.

Aside on the subject of layouts:
I don’t use app.blade anymore, as I prefer to use app-base.blade and partials, such as app-fluid.blade that get injected into app-base.blade using @yield('document'). This provides an awesome way to control various layouts, in conjunction with custom templates.

2 Likes