fixed div inside bootstrap column

html css twitter-bootstrap css-position multiple-columns

80,342

Solution 1

You'll have to use media queries to set the sidebar as position: fixed while the width of the screen is wide.

Heres an example: http://jsfiddle.net/hajpoj/Q7A33/1/

HTML:

<div class="row">
    <div class="col-sm-4 sidebar-outer">
        <div class="sidebar">/* fixed sidebar */
        </div>
    </div>
    <div class="col-sm-8">
        <div class="content"> /*fluid content */
        </div>
    </div>
</div>

CSS:

.sidebar-outer {
    position: relative;
}
@media (min-width: 768px) {
    .sidebar {
        position: fixed;
    }
}

Basically in this example the columns become stacked at 768px wide (or bootstraps "small" width). If you wanted it to become stacked at a different width like bootstrap's "medium" width (992px) you'll want to change col-sm-4, col-sm-8 to col-md-4, col-md-8 and change @media (min-width: 768px) to @media (min-width 992px)

Solution 2

Are you using Bootstrap 2.x or 3? I believe what you are looking for is the affix class. See the below links:

Bootstrap 2.x: http://getbootstrap.com/2.3.2/javascript.html#affix

Bootstrap 3: http://getbootstrap.com/javascript/#affix

80,342

fred

Updated on July 09, 2022

Comments

fred almost 2 years

I'm trying to make a two column responsive layout using bootstrap, in the left column I would like to place a menu, and in the right an image gallery. I would like the menu to stay fixed while scrolling through the images on right.

The difficulty is that I want the fixed menu to be fluid with the bootstrap layout. So while I don't want it to move up and down when scrolling I do want it to reposition itself when resizing the screen.

This website is an example of what I mean: http://www.galeriebertrand.com/artists

I can't seem to figure how it was done on this site, it doesn't seem like the left column has fixed positioning.
- neoeahit almost 11 years
  
  Make left div position = fixed , and change the content of right div. Mostly the page u showed dosent seem to be a single page application. But as a suggestion you should try to use angular directives and get it into a single page application. Left div= fixed and right div= relative
fred almost 11 years

I am using bootstrap 3. Thanks a lot, this seems to be what I am looking for, I will give it a try!
guydog28 almost 11 years

Great, no problem. If this answered your question, don't forget to hit the checkmark!
hajpoj almost 11 years

doh. i totally forgot about this class... but if you wanted to do manually with no js.. then try my solution :)