Make column fixed position in bootstrap

Question

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

Waiting for topic to be taken off "on hold". In the meantime you can see my answer here: http://jsfiddle.net/dRbe4/. I can explain it better once the question is reopened. — Lowkase, Feb 20 '14 at 13:48
If anybody needs the right column to be fixed, combining `fixed-top` and `position-sticky` is [what worked for me](https://stackoverflow.com/a/75578716/5802289). — J0ANMM, Feb 27 '23 at 09:33

score 99 · Answer 1 · edited Jun 09 '19 at 14:25

99

<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>

edited Jun 09 '19 at 14:25

Yusuf Arapoglu

72
1
7

answered Oct 17 '15 at 14:21

Naga prasanna

999
2
7
2

3

Definitely the preferred solution now! – Scott Nov 19 '15 at 19:51
13

This doesn't work properly on smaller screens, the right div will lay over the left col containing the `fixed` div – Alex McLean May 13 '16 at 22:17
12

bootstrap 4?? any ideas – PirateApp Jan 09 '18 at 07:54
32

In Bootstrap 4, change 'affix' to 'sticky-top' – Tacio Costa Aug 07 '18 at 19:09
6

For info: Bootstrap dropped the support for affix with Bootstrap 4.0. Use 'position: sticky' now as suggested here: https://getbootstrap.com/docs/4.1/migration/#components – Antoine Delia Nov 19 '18 at 15:37
Also using bootstrap 3. Is there a way to have it behave like position:sticky (where it scrolls until you reach the point)? I have a page layout with an element over the entire width of the top of the screen that scrolls out of view. If I use affix for my panel, it leaves an ugly gap where that element used to be on screen. – FalcoGer Feb 05 '19 at 10:10

score 55 · Answer 2 · edited Oct 17 '16 at 11:23

55

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>

edited Oct 17 '16 at 11:23

Zymotik

6,412
3
39
48

answered May 04 '15 at 19:47

Pablo Fernandez

103,170
56
192
232

6

this does not work if you change the position of the columns – didando8a Jul 14 '15 at 10:20
This is a better solution! work perfect and no CSS is needed. @didando8a If you change the columns position just change the col-lg-offset to a new offset. – Roy Shoa Dec 23 '15 at 12:30
If someone need also Scrolling Ability to the fixed column, just add height and overflow. e.g. `style="position:fixed;height:100%;overflow-y:auto;"`. – Roy Shoa May 16 '16 at 06:08
8

@Roy "No CSS is needed" - yeah it is, its just in the style tag ;) – Mike Furlender Jul 13 '16 at 18:52
5

This is what I needed! Note the offset classes are different in Bootstrap 4, e.g. `offset-lg-3`. https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns – nickwesselman Apr 25 '18 at 15:03
instead of `position:fixed` style tag, you just add the `affix` class in BS3 and then the offset in the other column. – Neel Mar 12 '19 at 15:53
For bootstrap 4.x, add "position-fixed" to the classes of the col-lg-3 element, and then "offset-lg-3" to the other element. – dev404 May 25 '20 at 20:43
This works for bootstrap 3.3! – Scott Uphus Apr 21 '23 at 15:02

score 31 · Accepted Answer · answered Feb 27 '14 at 13:56

31

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.

answered Feb 27 '14 at 13:56

12

Is it possible to have the same result without specify width attribute? – ADIMO Oct 24 '14 at 10:13
1

I realize this should be painfully obvious, but I can't get it to work...I want the scrollable column on the left and the fixed column on the right. My fixed column only has a label in it, but for some reason when I set these classes, the label "sticks" to the upper-left corner instead of being in the column. I've tried all different combinations of style attributes to no avail. Would appreciate a pointer :) – Reid Jan 22 '15 at 17:45
1

@ReidBelton share Jsfiddle so I can help you with the code. – Jan 29 '15 at 22:07
@IhabAbdel-Rahim Thanks very much for the offer! Not necessary however as I've since shelved this project. – Reid Jan 29 '15 at 23:25
i did the same but when I'm adding the fixed class it's get disappeared. Please help. – Arpan Jan 29 '16 at 09:52
Why not use bs grid classes for width? – Fr0zenFyr Oct 18 '16 at 08:16
Just remembering that with bootstrap 4 there is `.sticky-top` – Bruno Francisco May 24 '18 at 15:40

score 29 · Answer 4 · answered Mar 08 '18 at 21:17

29

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>

answered Mar 08 '18 at 21:17

Mohsen Sahrayi

291
3
3

1

Perfect. `position-fixed` also worked for making the column stick to the top, however the contents of the column overflowed. `sticky-top` fixed that. – maxpaj Aug 14 '20 at 08:57

Carol Skelly · Answer 5 · 2019-06-10T13:08:11.193

21

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

edited Jun 10 '19 at 13:08

answered Sep 16 '18 at 13:10

Carol Skelly

351,302
90
710
624

2

If I do as in your example, the content of the "col-lg-3" column goes out of its parent. Quite strange! (Try to put more text in this). It must be a bug... – ThePhi Nov 28 '18 at 18:18
1

It's not strange as [fixed position elements are removed from the normal DOM flow](https://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container). This is outside the scope of the original question, but would have to set specific size on the fixed element. – Carol Skelly Nov 28 '18 at 18:39
3

this causes the columns to overlap each other though – ChumiestBucket Apr 04 '19 at 21:34
1

In my case this was preferred, as defining the position: fixed styling to the col-lg-3 div caused the cursors of the inner children elements to be shown as default (instead of fx. pointer). – chri3g91 Oct 14 '19 at 18:18

score 5 · Answer 6 · answered Sep 23 '21 at 20:29

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

score 4 · Answer 7 · answered May 30 '17 at 15:31

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>

score 1 · Answer 8 · answered Mar 29 '19 at 10:58

1

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>

answered Mar 29 '19 at 10:58

stefanitsky

443
7
9

1

didn't work for me. both columns scroll as expected. – ChumiestBucket Apr 04 '19 at 21:33
2

@star_trac try to add some css, should help: `.container-fluid { flex: 1; }` – stefanitsky Apr 06 '19 at 04:19

score -1 · Answer 9 · answered Aug 09 '21 at 22:20

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>

score -3 · Answer 10 · answered Feb 03 '21 at 13:43

-3

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>

answered Feb 03 '21 at 13:43

Tareq boudalia

75
12

Make column fixed position in bootstrap

10 Answers10

Linked