How to Use CSS Position Sticky to Keep a Sidebar Visible with Bootstrap 4

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

I solved enabling flexbox. After raising an issue in Bootstrap's Github repository I got an answer by a Bootstrap member:

The .col-xs-4 isn't as tall as the .col-xs-8, so there's basically no
space for the Menu to "float" within when the stickiness kicks in.
Make the .col-xs-4 taller and things work fine:
https://codepen.io/anon/pen/OXzoNJ If you enable the Flexbox version
of our grid system (via $enable-flex: true;), you get automatic
equal-height columns for free, which comes in handy in your case.

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 sticky-top on sidebar column doesn't work

Position sticky will not work if any of the parent containers of the sticky element use overflow:hidden. Removing the overflow-hidden class from the container allows the sticky-top to work.

<div class="container min-vh-100">
    <nav class="navbar navbar-light navbar-expand">
        ..
    </nav>
    <div class="row">
        <div class="col-sm-8 content pt-4">
            ...
        </div>
        <div class="col-sm-4">
            <div class="menu sticky-top p-3 bg-light">
                <h5 class="text-primary">Sticky menu</h5>
                <div class="nav flex-column">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/9Nf6pOa7TN

How to make a sticky sidebar in Bootstrap?

It's already there in Bootstrap and it is called Bootstrap Affix. This is the code:

<script type="text/javascript">
$(document).ready(function () {
    $("#myNav").affix({
        offset: { 
            bottom: 195 
        }
    });
});
</script>

And you can add the data-spy as well:

<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="195">
    <li class="active"><a href="#one">Section One</a></li>
    <li><a href="#two">Section Two</a></li>
    <li><a href="#three">Section Three</a></li>
</ul>

For more information, kindly follow the instructions from:

• Creating Pinned Element with Bootstrap
• Understanding Bootstrap’s Affix and ScrollSpy plugins

Sticky sidebar not working. Tried each and everything from stack overflow

Examined your website and there is a problem with body overflow, which prevents sticky to run correctly. You need to set:

.body_wrapper {
    overflow: visible;
}

Also, your blog sidebar has no class to set css, but if you add it, than you could use:

.my_sidebar {
    align-self: flex-start;
    position: sticky;
    top: 70px;
}

---

Related Topics