Bootstrap: How to fixed-col without breaking the layout

Question

I've 3-col layout, and it works fine when all col are scrollable. But if I want the left, and right ones to be fixed on top, my layout breaks.

I've seen many posts but nothing seems to work: How to disable vertical scroll in bootstrap column

I tried this, but my 3-col layout is gone when I set left, and right cols as fixed:

<div class="container">
  <div class="row  "  style="margin-top:70px" >
    <div class="col-sm-3 " style="position: fixed !important; "   > 

        <div class="card   ">

          <!--Card image-->
          <div class="view overlay">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!--Card content-->
          <div class="card-body">
            <!--Title-->
            <h4 class="card-title">Card title</h4>
            <!--Text-->
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
              content.</p>
            <a href="#" class="btn btn-primary">Button</a>
          </div>

        </div>


    </div>


    <div class="col-sm-6  " > 
        <div class="card  ">

          <!--Card image-->
          <div class="view overlay">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!--Card content-->
          <div class="card-body">
            <!--Title-->
            <h4 class="card-title">Card title</h4>
            <!--Text-->
            <p class="card-text">Top #1 to build on the card title and make up the bulk of the card's
              content.</p>
            <a href="#" class="btn btn-primary">Button</a>
          </div>

        </div>
        <br/>

        <div class="card   ">

          <!--Card image-->
          <div class="view overlay">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!--Card content-->
          <div class="card-body">
            <!--Title-->
            <h4 class="card-title">Card title</h4>
            <!--Text-->
            <p class="card-text">Top #2 to build on the card title and make up the bulk of the card's
              content.</p>
            <a href="#" class="btn btn-primary">Button</a>
          </div>

        </div>

    </div>



    <div class="col-sm-3 " style="position: fixed !important; "   > 
        <div class="card  ">
          <div class="view overlay">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
              content.</p>
            <a href="#" class="btn btn-primary">Button</a>
          </div>

        </div>


    </div>


  </div>
</div>

I expected left, right col fixed (non scrollable), and the center-col scrollable.

When I use fixed-col I get wrong layout

And without fixed-col I get the expected layout (but it doesn't meet my requirement) layout-ok

Why the div col- doesn't force everything inside it to follow Bootstrap grid layout?

Elements with `position:fixed` don't reserve space when the browser is calculating layout. You need to either add padding to account for that, or use the offset classes, if you want the scrolling section to wind up where it would be if the other elements weren't fixed. Or use `position: sticky`, which does get factored into the layout. — Tieson T., Jul 11 '19 at 08:04
Thanks Tieson, I tried `position: sticky`, but in that case all cols become scrollable. — Alex, Jul 11 '19 at 08:59
Thanks tried `affix` as well, but everything scrolls. Am I asking the Moon? — Alex, Jul 11 '19 at 10:00

Carol Skelly · Answer 1 · 2019-07-11T11:10:25.180

Understand that position:fixed elements are removed from the normal DOM flow. This means position:fixed elements are no longer positioned relative to their parent containers, or sibling elements.

Therefore, the center column must be offset from the left side, since the leftmost column is no longer pushing it to the right. For this you can use Bootstrap's offset-sm-3 class...

<div class="col-sm-6 offset-sm-3">center</div>

Similarly, the rightmost column must be pushed to the right. In this case 9 units since that's the total width of the left and center columns.

<div class="col-sm-3 offset-sm-9">right</div>

Also, keeping your fixed columns in a container won't work since their width is relative to the entire viewport width (not the parent container width). I'd recommend using container-fluid since it will be the same width as the viewport, and will allow the columns to keep the 25%-75%-25% width layout.

Fixed position demo: https://www.codeply.com/go/IyYNYLKQBr

Another, perhaps simpler, option is to use position:sticky on the left and right columns. Unlike position:fixed, sticky columns will remain in the normal flow of the DOM. They're not always "fixed" to the page, but will appear "fixed" when scrolling allows.

Sticky position demo: https://www.codeply.com/go/vxpLuKAu4m

Related: Bootstrap col fixed position

Brilliant ! Thank you Zim. Just adding the final touch: If I've 2 cards stacked (left or right col) the lower one scroll underneath the top-sticky one. How do I keep the card's clearance so they do not overlap? — Alex, Jul 11 '19 at 12:44
I don't understand. They shouldn't overlap each other if they're both in the `sticky-top` div. Please accept the answer since the question is resolved. — Carol Skelly, Jul 11 '19 at 13:33

Bootstrap: How to fixed-col without breaking the layout

1 Answers1