CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
user1556571
user1556571

Reputation:

Make column fixed position in bootstrap

Using Bootstrap, I have a grid column class="col-lg-3" that I want to place it in position:fixed while the other .col-lg-9 is normal position (scroll-able through the page).

<div class="row">
    <div class="col-lg-3">
        Fixed content
    </div>
    <div class="col-lg-9">
        Normal scrollable content
    </div>

</div>

Just the same way like the left column in LifeHacker.com You will see that the left part is fixed however I scroll though the page.

I use bootstrap v3.1.1

Upvotes: 100

Views: 238320

Answers (10)

long
long

Reputation: 4318

Bootstrap 5

The solution is very similar to v4, but you can use responsive variations with .sticky-*-top classes.

<div class="row">
    <div class="col-lg-3">
        <div class="sticky-md-top">
            Fixed content
        </div>
    </div>
    <div class="col-lg-9">
        Normal scrollable content
    </div>
</div>

Docs: https://getbootstrap.com/docs/5.0/helpers/position/#responsive-sticky-top

Upvotes: 8

Macedo_Montalv&#227;o
Macedo_Montalv&#227;o

Reputation: 579

If you really want to do it that way, you can't do it in "col- *", because it's going to overlap each other, you should do it in the parent class "row", but depending on what you're doing, you might have a problem with the browser scroll that will be "cut" from the screen, however, is simple to solve, just control the column width and everything will be fine.

<div class="row fixed-top h-100">
    <div class="col-lg-3">
        Fixed content
    </div>
    <div class="col-lg-9 overflow-auto h-100">
        Normal scrollable content
    </div>

</div>

Upvotes: -1

Tareq boudalia
Tareq boudalia

Reputation: 73

Use .col instead of col-lg-3 :

<div class="row">
   <div class="col">
      Fixed content
   </div>
   <div class="col-lg-9">
      Normal scrollable content
   </div>
</div>

Upvotes: -4

Carol Skelly
Carol Skelly

Reputation: 362430

Updated for Bootstrap 4

Bootstrap 4 now includes a position-fixed class for this purpose so there is no need for additional CSS...

<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div class="position-fixed">
                Fixed content
            </div>
        </div>
        <div class="col-lg-9">
            Normal scrollable content
        </div>
    </div>
</div>

https://www.codeply.com/go/yOF9csaptw

Upvotes: 21

Naga prasanna
Naga prasanna

Reputation: 1019

<div class="row">
    <div class="col-lg-3">
       <div class="affix">
           fixed position 
        </div>
    </div>
    <div class="col-lg-9">
       Normal data enter code here
    </div>
</div>

Upvotes: 101

stefanitsky
stefanitsky

Reputation: 483

With bootstrap 4 just use col-auto

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-auto">
            Fixed content
        </div>
        <div class="col-sm">
            Normal scrollable content
        </div>
    </div>
</div>

Upvotes: 1

Mohsen Sahrayi
Mohsen Sahrayi

Reputation: 290

in Bootstrap 3 class="affix" works, but in Bootstrap 4 it does not. I solved this problem in Bootstrap 4 with class="sticky-top" (using position: fixed in CSS has its own problems)

code will be something like this:

<div class="row">
    <div class="col-lg-3">
        <div class="sticky-top">
            Fixed content
        </div>
    </div>
    <div class="col-lg-9">
        Normal scrollable content
    </div>
</div>

Upvotes: 29

Lucke
Lucke

Reputation: 316

Use this, works for me and solve problems with small screen.

<div class="row">
    <!-- (fixed content) JUST VISIBLE IN LG SCREEN -->
    <div class="col-lg-3 device-lg visible-lg">
       <div class="affix">
           fixed position 
        </div>
    </div>
    <div class="col-lg-9">
    <!-- (fixed content) JUST VISIBLE IN NO LG SCREEN -->
    <div class="device-sm visible-sm device-xs visible-xs device-md visible-md ">
       <div>
           NO fixed position
        </div>
    </div>
       Normal data enter code here
    </div>
</div>

Upvotes: 4

Pablo Fernandez
Pablo Fernandez

Reputation: 105220

iterating over Ihab's answer, just using position:fixed and bootstraps col-offset you don't need to be specific on the width.

<div class="row">
    <div class="col-lg-3" style="position:fixed">
        Fixed content
    </div>
    <div class="col-lg-9 col-lg-offset-3">
        Normal scrollable content
    </div>
</div>

Upvotes: 55

user1556571
user1556571

Reputation:

Following the solution here http://jsfiddle.net/dRbe4/,

<div class="row">
    <div class="col-lg-3 fixed">
        Fixed content
    </div>
    <div class="col-lg-9 scrollit">
        Normal scrollable content
    </div>

 </div>

I modified some css to work just perfect:

.fixed {
        position: fixed;
        width: 25%;
}
.scrollit {
        float: left;
        width: 71%
}

Thanks @Lowkase for sharing the solution.

Upvotes: 30

Related Questions