CODEWITHSUNDEEP
htmlcssbootstrap-4
myartsev
myartsev

Reputation: 1232

How to make a fixed column in a responsive grid?

Using Bootstrap, is it possible to keep a grid column fixed for certain breakpoints? And for the same column to stack and flow with the page for other breakpoints?

In the sample below, for large screens, I want the content in the right column to scroll as the left column stays fixed. For small screens, the left column should stack over the right and the page should scroll as normal.

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2">
      I want this to always be visible as the right side scrolls.
    </div>
    <div class="col">
    ...
    </div>
  </div>
</div>

CodePen sample

Upvotes: 6

Views: 9166

Answers (1)

myartsev
myartsev

Reputation: 1232

Offset the column that is not fixed:

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2">
      I want this to always be visible as the right side scrolls.
    </div>
    <div class="col offset-lg-2">
    ...
    </div>
  </div>
</div>

And apply a media query to fix the other column for the relevant breakpoints:

https://getbootstrap.com/docs/4.0/layout/grid/#grid-options https://getbootstrap.com/docs/4.0/layout/grid/#mixins

@include media-breakpoint-up('lg') {
    #left {
        position: fixed;
        top: 0;
        bottom: 0;
    }
}

Codepen sample

Upvotes: 4

Related Questions