Making rightmost column fixed position in Bootstrap 4
bootstrap-4, css, javascript, jquery, twitter-bootstrap
Solution
Bootstrap 4 has the `position-fixed` class for this...
<div class="container">
<div class="row">
<div class="col-md-9">
..
</div>
<div class="col-md-3" align="center">
<div class="position-fixed">
<button class="btn btn-success btn-custom">
<span>Button 1</span>
</button>
<br>
<button class="btn btn-warning btn-custom">
<span>Button 2</span>
</button>
<button class="btn btn-danger btn-custom">
<span>Button 3</span>
</button>
</div>
</div>
</div>
</div>
https://codeply.com/go/exOfOB2Igy
Problem
I'm trying to have the right column in Bootstrap 4 grid system fixed using `position: fixed`. Here's a demo and it's code. I want the button group on the right to stick to the viewport when I scroll the document. I have tried adding `position: fixed`; this doesn't work as intended - it causes the button group to overlay on top of the window like this. I have already seen this answer on making columns fixed in Bootstrap, but the solutions won't work when the position of the columns is interchanged. Few of the solutions there will cause the right column to overlay on top of the left column in small screens, which is undesirable. In such cases, when viewed on small screens, I want the columns to be stacked (with the sticky feature disabled). I prefer CSS solutions but if possible, I'd also like to know how it's done in JS.