Easy admin boilerplate!

The target of this template is to create two columns on a page. One is the sidebar and one is the body. The css will extend from bootstrap (v4).

The sidebar and body have to scroll independently.

On mobile phones and tablets in portrait mode (992px or smaller in width) the menu needs to revert to a hamburger menu.

Css and html!

@media screen and (min-width: 992px) {
  .admin {
    height: 100vh;
    display: flex;
  }

  .admin .admin-sidebar {
    width: 300px;
    overflow: auto;
  }

  .admin .admin-body {
    flex: 1;
    overflow: auto;
  }
}

<div class="admin">
    <div class="admin-sidebar bg-faded">
        ...
    </div>
    <div class="admin-body" role="main">
        ...
    </div>
</div>

Done!

And done. Now just add your own flavor.

I see what you did there!

Wait what! You told me about mobile phones and stuff, and you just added some styles for large screens.

Yeah, bootstrap has an awesome setup for mobile togglable content. So i just added a collapsible navbar from the documentation. I did remove the nav-item class for the list items in it so they don't float.

Supports!

This is supported by all major browsers. And in case of explorer, IE10+