How to Create a Fixed Sidebar Layout with Bootstrap 4

How to create a fixed sidebar layout with Bootstrap 4?

Updated 2020

Here's an updated answer for the latest Bootstrap 4.0.0. This version has classes that will help you create a sticky or fixed sidebar without the extra CSS....

Use sticky-top:

<div class="container">
    <div class="row py-3">
        <div class="col-3 order-2" id="sticky-sidebar">
            <div class="sticky-top">
                ...
            </div>
        </div>
        <div class="col" id="main">
            <h1>Main Area</h1>
            ...   
        </div>
    </div>
</div>

Demo: https://codeply.com/go/O9GMYBer4l

or, use position-fixed:

<div class="container-fluid">
    <div class="row">
        <div class="col-3 px-1 bg-dark position-fixed" id="sticky-sidebar">
            ...
        </div>
        <div class="col offset-3" id="main">
            <h1>Main Area</h1>
            ...
        </div>
    </div>
</div>

Demo: https://codeply.com/p/0Co95QlZsH

Also see:
Fixed and scrollable column in Bootstrap 4 flexbox

Bootstrap col fixed position

How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

Create a responsive navbar sidebar "drawer" in Bootstrap 4?

Bootstrap 4 fixed top nav and fixed sidebar

The sticky-top is working, but it doesn't appear to be working for two reasons...

1. There isn't enough content in the main content area to scroll
2. It's positioned at top:0 so it hides behind the fixed navbar

Add CSS to offset the top of the sidebar (the same as height of fixed navbar).

.sticky-offset {
    top: 56px;
}

<ul class="list-group sticky-top sticky-offset">..(sidebar)..</div>

And, then add enough content (or height) in the main area so that scrolling is necessary...

Working Demo: https://www.codeply.com/go/7XYosZ7VH5

<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
    ..
</nav>
<div class="row">
    <div id="sidebar-container" class="sidebar-expanded col-2 d-none d-md-block">
        <ul class="list-group sticky-top sticky-offset">
            <li>Menu item..</li>
            <li>Menu item..</li>
        </ul>
    </div>
    <div class="col">
        <!-- MAIN -->
    </div>
</div>

bootstrap grid system and fixed sidebar

this is what solved the issue for me:

<div class="row">

  <div class="app-wrapper">
    <div class="col-sm-10 col-md-10">
      <div class="col-sm-8 col-md-8">
        <app-content></app-content>
      </div>

      <div class="sticky">
        <div class="col-sm-4 col-md-4">
          <app-side-navbar></app-side-navbar>
        </div>
      </div>
    </div>

  </div>
</div>

and the css:

.sticky {
  position: sticky;
  top:0;
  z-index: 999;
}

Two column layout with self-contained fixed-position sidebar

Here is an over simplified example with just plain CSS.

It uses position: sticky instead of fixed on #left. This way, #left gets both its place in the flow, and get fixed as a result.

This should allow #right to auto-fill the rest of space with flex: 1, without a hard coded width from #left.

Hope it gets the desired result correctly.

Example:

/* Try any value */
#left { width: 10rem }
/* Auto-fill */
#right { flex: 1 }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
}

nav {
  position: sticky;
  top: 0;
  height: 100vh;
  background-color: pink;
}

main {
  background-color: beige;
}

<div class="container">
<nav id="left">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</nav>
<main id="right">START test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test FINISH</main>
</div>

Bootstrap fixed sidebar

Replace CSS as below

 #sidebar .nav {
          width: 95%;
          position: fixed;
 }

to

 #sidebar .nav {
          width: 10%; // change width as your choice
          position: fixed;
 }

you have select width of sidebar 95% of browser window.

How to create a non-fixed sidebar (Bootstrap grid)

Just put the content in a wrapper, put another DIV before that, wrap a row around them and apply the usual classes to divide the page width:

<nav class="navbar sticky-top">...</nav><!--content--><div class="container-fluid">  <div class="row">    <div class="col-md-2 sidebar">      SIDEBAR    </div>    <div class="col-md-10">      <div class="row">        <div class="col-md-3">          <img src="https://via.placeholder.com/150x130">        </div>        <div class="col-md-3">          <img src="https://via.placeholder.com/150x130">        </div>        <div class="col-md-3">          <img src="https://via.placeholder.com/150x130">        </div>        <div class="col-md-3">          <img src="https://via.placeholder.com/150x130">        </div>      </div>      <div class="row">        some other content...      </div>    </div>  </div></div>

---

Related Topics