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

Answer 1

Polyfill explanation.

You need to include the JS polyfill in order to use it. The polyfills recommended by the link on the Bootstrap page are

• https://github.com/wilddeer/stickyfill
• https://github.com/filamentgroup/fixed-sticky

Here is an updated codepen: https://codepen.io/anon/pen/zBpNRk

I included the required polyfill (I used stickyfill) and called it with

var stickyElements = document.getElementsByClassName('sticky');

for (var i = stickyElements.length - 1; i >= 0; i--) {
    Stickyfill.add(stickyElements[i]);
}

The library suggested you use this for your css

.sticky {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
}
.sticky:before,
.sticky:after {
    content: '';
    display: table;
}

and finally you had the div order mixed up. You need to put the div with the sticky class outside of an entire row so I filled up the rest of the row with another

that is empty.