How to create a fixed sidebar layout with Bootstrap 4?

Question

I'm trying to create a layout like the screenshot using Bootstrap 4 but I'm having some problems with making the sidebar fixed and achieving this layout at the same time.

Going with a basic example:

<div class="container">
  <div class="row">
    <div class="col-m-4" id="sticky-sidebar">
      Sidebar
    </div>
    <div class="col-m-8" id="main">
      Main Area
    </div>
  </div>
</div>

It's possible to get this layout but things get tricky once I declare:

.sidebar {
position: fixed // or absolute
}

Once I make the sidebar sticky, the main div starts appearing behind the sidebar instead of next to it. Of course it's possible to declare some margin and push it back to it's original position but it makes things complicated for responsiveness.

I feel like I'm missing something, I read the Bootstrap 4 documentation but I couldn't find a simple way to achieve this layout.

Carol Skelly · Accepted Answer · 2020-06-10T12:35:27.747

103

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?

edited Jun 10 '20 at 12:35

answered Mar 22 '18 at 19:15

Carol Skelly

351,302
90
710
624

nice solution, but we need to wait for fully support 'sticky' in browsers – Marek Apr 24 '18 at 11:18
1

Re: #1 - what if the height of the sidebar contents is taller that the viewport? With this method, the bottom-most content of the sidebar is hidden off viewport until the user reaches the bottom of the Main Area content. Sidebar should allow scrolling to reveal all vertical content. – Robert Andrews Feb 03 '19 at 11:20
Can I create another container in the right column or that would be considered a bad practice? – Žilvinas Feb 21 '19 at 11:38
The problem with this solution is it applies well only if there are no headers, or else the header will obscure the sidebar since `sticky-top` only "position[s] an element at the top of the viewport, from edge to edge, but only after you scroll past it." https://getbootstrap.com/docs/4.3/utilities/position/ – lionbigcat Sep 11 '19 at 07:59
1

@BrianTag this is outside the scope of the original question, but I don't understand the issue: https://www.codeply.com/go/YThL9dPewG – Carol Skelly Sep 11 '19 at 11:07
1

Thank you very much. The first solution works like a charm. – Kerem Nayman Dec 12 '20 at 20:18
This sidebar is not responsive, what if we need to place the sidebar in order 2 in the layout? (when entering mobile sizes) – JCIsola Mar 21 '21 at 05:10

GvM · Answer 2 · 2016-11-09T00:35:48.500

something like this?

#sticky-sidebar {
position:fixed;
max-width: 20%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="col-xs-12" id="sticky-sidebar">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </div>
    <div class="col-xs-8" id="main">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
</div

If you add some lorem ipsum to your sidebar content you can see that my initial problem gets recreated in this snippet. Because we're declaring a fixed position, sidebar stops respecting the grid system. — cinnaroll45, Nov 08 '16 at 22:41
Yes, declaring max-width to containers fixes the issue. Thanks! — cinnaroll45, Nov 09 '16 at 01:45
If you're using the new Bootstrap 4 alpha 6+ you'll need to remove the "xs-" prefix from the column sizes. — Jefferson Hudson, Aug 16 '17 at 13:30
The trick of nesting a col-12 inside the col-4 worked really well for me — tlauer, Jan 17 '18 at 01:56
This no longer works for 4.0 and doesn't follow Bootstrap conventions. — Carol Skelly, Mar 23 '18 at 09:49

score 5 · Answer 3 · answered Jun 06 '20 at 05:50

5

I used this in my code:

<div class="sticky-top h-100">
    <nav id="sidebar" class="vh-100">
        ....

this cause your sidebar height become 100% and fixed at top.

answered Jun 06 '20 at 05:50

PouriaDiesel

660
8
11

Works also in Bootstrap 5. Thanks! – MikhailRatner Mar 24 '22 at 11:30

score 0 · Answer 4 · answered May 25 '19 at 12:44

I'm using the J.S. to fix a sidebar menu. I've tried a lot of solutions with CSS but it's the simplest way to solve it, just add J.S. adding and removing a native BootStrap class: "position-fixed".

The J.S.:

var lateral = false;
function fixar() {

            var element, name, arr;
            element = document.getElementById("minhasidebar");

            if (lateral) {
                element.className = element.className.replace(
                        /\bposition-fixed\b/g, "");
                lateral = false;
            } else {

                name = "position-fixed";
                arr = element.className.split(" ");
                if (arr.indexOf(name) == -1) {
                    element.className += " " + name;
                }
                lateral = true;
            }

        }

The HTML:

Sidebar:

<aside>
        <nav class="sidebar ">
             <div id="minhasidebar">
                 <ul class="nav nav-pills">
                     <li class="nav-item"><a class="nav-link active" 
                     th:href="@{/hoje/inicial}"> <i class="oi oi-clipboard"></i> 
                     <span>Hoje</span>
                     </a></li>
                 </ul>
             </div>
        </nav>            
</aside>

score -4 · Answer 5 · edited Sep 28 '17 at 16:15

-4

My version:

div#dashmain { margin-left:150px; }
div#dashside {position:fixed; width:150px; height:100%; }

<div id="dashside"></div>
<div id="dashmain">                        
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">Content</div>
        </div>            
    </div>        
</div>

edited Sep 28 '17 at 16:15

Paul Roub

36,322
27
84
93

answered Sep 28 '17 at 14:09

Szurdoki Gábor

5
1
4

How to create a fixed sidebar layout with Bootstrap 4?

5 Answers5

Linked

Related