Sass Bootstrap 4 Styling the Pages with Sidebar Active

sage
1

Hey all, I’m a bigtime user of sage, so this question isn’t being posed without having done extensive research. Haven’t had anyone need a sidebar in a while, so this one is one i haven’t had to tackle yet. I’ve got my sidebar activated and everything. It’s just showing at the bottom of the page (rightfully) because I haven’t gotten any styling applied to the content area and the sidebar itself.

I’m using bootstrap 4 for styling, and typically this is a very easy col setup, but since I’m hoping to do it the right way programatically with sass mix-ins and what not.

Has anyone done this successfully with sass bootstrap 4 already that would be willing to share how they did it?

Discourse pages I’ve already tried:

Vary sidebar width (using bootstrap 3 i believe)
Single entry with full width hero image and sidebar using Bootstrap layout and DRY (incomplete and not entirely on point)

And here’s a link to the staging site where I’m having the styling applied: https://staging.cometryx.com/uncategorized/hello-world/

2

Bueller. Bueller. Anyone?

3

What is it you’re trying to achieve?

4

As stated in the first post, I’m trying to implement a sidebar on sage but out of the box the sidebar doesn’t format correctly using bootstrap 4. As seen in the staging link I shared, it’s located at the bottom instead of to the side like one would hope.

Does that help clarify?

5

I only see the .container tag on this div

<div class="wrap container" role="document">

but no other Bootstrap layout markup.

You probably want something like this:

<div class="content row">
    <main class="main col-lg-9 pb-4">
    ....
    </main>
    <aside class="sidebar col-lg-3">
    ....
    </aside>
 </div>

I’m not really sure what you want to do programmatically, but I can’t think of where sass mixins would be of use. If you want to explain more, I might be able to help :slight_smile:

1 Like
6

+1 to this. Make sure you add that row class to your content div, and then just add your column classes, per usual Bootstrap.

7

Ah, okay. So programmatically I can turn on the sidebar using the filters in Sage. BUT, do i need to have a separate layout for sidebar pages? Doesn’t seem like I should have to do that. The page should respond when the sidebar is present or when it is not. That’s how the layout that comes with sage and bootstrap 4 comes with by default, but it doesn’t work. Sidebar always gets pushed under the main element…

Man, this is harder to explain that I thought… trying to think of another way to say it…

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
9

YESSS!!! THIS is what I needed. My head just couldn’t wrap around it. This should be a default part of the main core files… IMO.

Thank you again!

1 Like
10

Noticed the css was loading on every page, whether or not there was a sidebar active, which was throwing off some other styling. This modified snippet only affects the styling when the sidebar is present, based on the body class of ‘sidebar-primary’:

// 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) {
  .sidebar-primary {
    .content {
      display: flex;

      > .main {
        flex: 9;
      }

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

It’s by design:
If .sidebar isn’t loaded .main takes all the space. This is because flex:9 and flex:3 proportionally share the real estate (grid 12), but if flex:3 isn’t there, then flex:9 has 100% of the shares.

12

I don’t think this should be marked as the “solution”.

My solution works without the .sidebar-primary parent. If it’s breaking other layouts you’ve probably got some layouts inheriting the cascaded flex direction, in which case just explicitly state the flex direction of the children - which, IMO, is best practice anyway, as you don’t leave things to chance.

1 Like