How to Make Sticky Block in Sidebar using Bootstrap

Note: This is based on bootstrap-4

If you are using multi column design in your website, this may be applicable to you. Manytimes, if you have an article long enough to cover main column, but, the right or left column is just blank.

Example below shows the empty right bar.

Which doesn’t look a good user experience, you may want to fill some content.

Bootstrap Sticky Position

Bootstrap provides a solution to this problem, but this doesn’t work on some browser. See bootstrap documentation for sticky. But, the documentration is not having any example.

Make a block Sticky

Goto the “div” which you want to make sticky. And, add a class: “sticky-top”. Example:

<div class="card mb-2 sticky-top" style="top: 100px;">
...
</div>

I had to use style, as I’m using a fix static top navbar.

The beauty of this code is that, it is so simple yet powerful. Even, you have multiple blocks on top of this, it will wait for its turn, and make itself sticky when scrollbar goes past this. What I like more is, if you have a big footer, it stop itself going over there. As, in previous “affix or scrollspy” solution, you need to track the top and bottom positions. It work like a charm.

Code on GyanBlog Github

See this complete html example:

Demo on CodePen To see things live, goto: GyanBlog CodePen