Drupal 8: Bootstrap Sticky is not sticky in Drupal 8 - Solved

Bootstrap has a simple solution to have sticky blocks in your html. I’ve given a simple example in my previous post: How to make sidebar as Sticky

It works like a charm. But, things get little frustrated when it doesn’t work in drupal 8.

I have 2 column theme in bootstrap 4, and wanted to use a block as sticky in right sidebar. I made the changes, and expected it to be sticky. However, it didn’t. I spent lot of time in digging the root cause of it.

How I debug sticky problem

By some brute force, I found that drupal is adding an extra DIV, before my sidebar with code like:

<div class="region region-sidebar-first">;
...
</div>

Due to this, sticky behavior was not being set somehow.

Then, my next objjective was to remove this div.

I enabled debug: True in services.yml, and saw that it was coming from a layout/region.html.twig

I copied that file to my theme folder, see before and after code:

<script src="https://gist.github.com/goravsingal/461a6e42485a8dd04d5636a79579df89.js"></script>

Finally Issue is solved

I saved the file, cleared cache. And, voila. It worked.