Fixed sidebar with set width using Bootstrap3

Question

I'm trying to set a fixed non-scrollable sidebar with scrollable content. It's similar to Make column fixed position in bootstrap but in that example the sidebar has a variable width.

I've tried:

.fixed {
    position: fixed;
    width: 290px;
}

.scrollit {
    float: left;
}

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

    </div>
</div>

But it just layers the 2 columns onto each other.

An example of a site I'm trying to replicate is at http://demo.elated-themes.com/borderland9/contact/

Thanks

score 0 · Answer 1 · answered May 30 '15 at 07:58

This is a solution for what are you are looking for without bootstrap classes needed (but you need some kind of normalize.css).

body {
  padding: 0;
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  background: red;
  width: 290px;
}
.scrollit {
  background: #000;
  color: white;
  padding-left: 300px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="scrollit">
  <p class="">Nulla placerat ipsum at velit eleifend, et tristique est ultricies. Sed molestie cursus feugiat. Praesent pulvinar gravida metus mattis viverra. Cras congue convallis pharetra. In hac habitasse platea dictumst. Praesent auctor cursus dolor, a feugiat
    ex convallis vitae. Nulla facilisi. Suspendisse potenti. Aliquam nec purus eu turpis sagittis aliquam. Donec auctor eget urna sit amet eleifend.</p>
  <p class="">Nulla placerat ipsum at velit eleifend, et tristique est ultricies. Sed molestie cursus feugiat. Praesent pulvinar gravida metus mattis viverra. Cras congue convallis pharetra. In hac habitasse platea dictumst. Praesent auctor cursus dolor, a feugiat
    ex convallis vitae. Nulla facilisi. Suspendisse potenti. Aliquam nec purus eu turpis sagittis aliquam. Donec auctor eget urna sit amet eleifend.</p>
  <p class="">Nulla placerat ipsum at velit eleifend, et tristique est ultricies. Sed molestie cursus feugiat. Praesent pulvinar gravida metus mattis viverra. Cras congue convallis pharetra. In hac habitasse platea dictumst. Praesent auctor cursus dolor, a feugiat
    ex convallis vitae. Nulla facilisi. Suspendisse potenti. Aliquam nec purus eu turpis sagittis aliquam. Donec auctor eget urna sit amet eleifend.</p>
  <p class="">Nulla placerat ipsum at velit eleifend, et tristique est ultricies. Sed molestie cursus feugiat. Praesent pulvinar gravida metus mattis viverra. Cras congue convallis pharetra. In hac habitasse platea dictumst. Praesent auctor cursus dolor, a feugiat
    ex convallis vitae. Nulla facilisi. Suspendisse potenti. Aliquam nec purus eu turpis sagittis aliquam. Donec auctor eget urna sit amet eleifend.</p>
</div>
<div class="fixed">Fixed content</div>

Here is a fiddle

Hope it helps. If it does, +1.

Thanks for your solution, the only problem is that I will then lose the Bootstrap resonsivenes... — Robbie Mills, May 30 '15 at 10:03
You wanted a fixed width and I used a fixed width. If you want it responsive you should use media queries. — vanntile, May 30 '15 at 10:12
The point of bootstrap is to be responsive. You can see how the main content window is scrollable and responsive in the example I linked to — Robbie Mills, May 30 '15 at 11:14
If you test it, my code has the same qualities like the example linked. — vanntile, May 30 '15 at 11:48

Fixed sidebar with set width using Bootstrap3

1 Answers1