CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Damian
Damian

Reputation: 69

How to make a bootstrap left and right column static

I have 3 bootstrap column next to each other. I want the left and right column to be static and only the middle one must scroll.

I have tried making the columns fixed, but that changes the width of the column and if I make the right column fixed, then it gets shoved to the left of the page.

Is there another way to make it fixed without the fixed attribute?

Here is an image of my page. enter image description here

Here is my code:

<div class=" col col-sm-2 leftBar" style="padding: 10px;">

    <div style="padding: 10px 10px; border-radius: 5px; background-color: #87CEEB;">

        <div class="list-group">
          <a href="#" class="list-group-item active">List <span class="badge">4</span></a>
          <a href="#" class="list-group-item">&nbsp;&nbsp;&nbsp;List Item 1</a>
          <a href="#" class="list-group-item">&nbsp;&nbsp;&nbsp;List Item 2</a>
          <a href="#" class="list-group-item">&nbsp;&nbsp;&nbsp;List Item 3</a>
          <a href="#" class="list-group-item">&nbsp;&nbsp;&nbsp;List Item 4</a>
        </div>

    </div>

</div>

<div class=" col col-sm-8 centreContent" style="padding: 10px;">

    <div style="padding: 10px 10px; border-radius: 5px; background-color: #DCDCDC;">
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
    </div>

</div>

<div class=" col col-sm-2 rightBar" style="padding: 10px;">

    <div style="padding: 10px 10px; border-radius: 5px; background-color: #87CEEB;">
        <p>This is the Right Bar</p>
    </div>

</div>

Upvotes: 1

Views: 420

Answers (3)

GL.awog
GL.awog

Reputation: 1322

demo

if you position RightBar on the right, position fixed will do just fine. plus a bootstrap offset on a central column:

<div class=" col col-sm-8 col-sm-offset-2 centreContent" style="padding: 10px;">....</div>

Upvotes: 2

jaumemk
jaumemk

Reputation: 132

First of all, wrap your columns in a .row and in a .container-fluid.

Then create a new class called (for example) .fixed-top with property: position: fixed;. And apply this class to the left and right columns.

Then add the bootstrap offset column class .col-**-offset-*, to the center and right columns, respectively. (In your case: .col-sm-offset-2 and .col-sm-offset-10).

Check this example with your code: http://www.bootply.com/RhXeray5xT

Upvotes: 1

Pravin Durugkar
Pravin Durugkar

Reputation: 355

This problem can be solved in two ways...

make left side bar and right sidebar fixed. for left bar

position : fixed;
left:0;
top:50px;

for right bar

position :fixed;
right:0;
top:50px;

or

You can apply this CSS to middle div..

max-heght:750px;
overflow-x:auto;

Upvotes: 1

Related Questions