3

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.

rahul
  • 366
  • 7
  • 21

3 Answers3

7

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
2

Place your buttons inside another div and then add a style of position: fixed to that div like so:

<div class="col-md-3" align="center" style="margin-bottom: 40px;/* position: fixed; */">
  <div style="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>

You can make the style a css class and make it show only on big screens

Pietro Nadalini
  • 1,722
  • 3
  • 13
  • 32
  • 2
    Small correction to your answer. If we use an inner div and add a `position: fixed`, it'll cause the button group to become larger than its parent - `col-md-3` in this case. Fix would be to set the width of the outer div to some value, use the same width for the inner buttons and make the inner div inherit width from its parent using `width: inherit`. – rahul Sep 16 '18 at 08:34
0

In my case, position-fixed did not work.

What worked was combining fixed-top and position-sticky.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container" style="margin: 20px;">
  <div class="row">
    <div class="col-8" style="border: 1px dotted blue">
      <div style="min-height: 700px">
        You can scroll down here
      </div>
      <div>Bottom of scrollable column</div>
    </div>
    <div class="col-4" style="border: 1px dotted red">
      <div class="fixed-top position-sticky" style="border: 1px solid black">
        This is fixed
      </div>
    </div>
  </div>
</div>

Edit: using only the class sticky-top seems to work as well.

J0ANMM
  • 7,849
  • 10
  • 56
  • 90