BootStrap , How to align a fixed right column at the right

Question

I have a nav bar at the right of an column that need to be fixed at the top of the container. The problem is when the nav is fixed, I am not able to align it correctly at the right of the left column... I can align it by using col-md-offset-xx but if the browser width change the nav will be not aligned anymore.

https://jsfiddle.net/DTcHh/18665/

<div style="width:1170px;margin:10px auto;position:relative;padding:10px;border:1px solid black;">
  <div class="row">
    <div class="col-md-9" style="border:1px solid green;">
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
    </div>
    <div class="col-md-3 col-md-offset-6" style="border:1px solid red;position:fixed;top:0px;">
      <h1>Right column</h1>
    </div>
  </div>
</div>

score 6 · Accepted Answer · answered Mar 29 '16 at 22:15

You need to use the non-stacking (xs) columns like this..

<div class="row">
    <!-- main -->
    <div class="column col-xs-9">
    ..
    </div>    
    <!-- sidebar -->
    <div class="column col-xs-3" id="sidebar">
      Fixed right sidebar
    </div>
</div>

This way the columns won't stack vertically (wrap into a new row) on smaller devices and your right sidebar can remain fixed.

http://www.bootply.com/DZ1Csh3dRH

Kaan Burak Sener · Answer 2 · 2016-03-29T22:42:51.773

In Bootstrap, the grid system is based on 12 columns and you are violating the grid system logic by adding .col-md-offset-6 class to the right column. If you want to have same ratio among left and right columns. Your code should be like this:

<div style="width:1170px;margin:10px auto;position:relative;padding:10px;border:1px solid black;">
  <div class="row">
    <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" style="border:1px solid green;">
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
    </div>

    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" style="border:1px solid red;position:fixed;top:0px;">
      <h1>Right column</h1>
    </div>
  </div>
</div>

or if you want to add margin between left and right columns, your code should be like:

<div style="width:1170px;margin:10px auto;position:relative;padding:10px;border:1px solid black;">
  <div class="row">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" style="border:1px solid green;">
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
    </div>
    <div class="col-xs-3 col-xs-offset-6 col-sm-3 col-sm-offset-6 col-md-3 col-md-offset-6 col-lg-3 col-lg-offset-6" style="border:1px solid red;position:fixed;top:0px;">
      <h1>Right column</h1>
    </div>
  </div>
</div>

Here is an example you to understand grid and offset logic:

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>

As you see, total is 12 (col-md-4 + col-md-4 + col-md-offset-4) with offset.

The total number of column must be 12. You misunderstood the grid logic in bootstrap. — Kaan Burak Sener, Mar 29 '16 at 18:42
No, the total doesn't *have* to be 12. In some cases you [need to use more than 12 units per row](http://getbootstrap.com/css/#grid-example-wrapping). It simply causes the row to wrap. — Carol Skelly, Mar 29 '16 at 22:04
@Skelly but eventually it doesn't change the fact that if you want to keep your columns in one row, you shouldn't exceed 12 units. — Kaan Burak Sener, Mar 29 '16 at 22:20
Per breakpoint shouldn't exceed 12 if you *don't* want columns to wrap. Generally speaking the cols per row unit can exceed 12 ([sometimes by a lot more](http://www.codeply.com/go/06hfNedhdu)) to create different layouts at each breakpoint. It's a common misconception that the `row` must add up to 12. In the OP's case, the problem wasn't because he exceeded 12, but rather because he used the md breakpoint which eventually stacks (at 768px). By switching it to `xs`, his code (with the offset-6) works as expected: http://bootply.com/ad5sj2uxL7 — Carol Skelly, Mar 30 '16 at 16:55

score 1 · Answer 3 · edited May 23 '17 at 12:30

You could use the bootstrap class: pull-right (if you only want the div aligned to the right). If you want at the top of the page, you should add 'float:left & right' to each h1 or removing the col-offset (9+3 align properly).

You can see this here: https://jsfiddle.net/DTcHh/18666/

More information here: Left align and right align within div in Bootstrap and here: http://getbootstrap.com/css/

BootStrap , How to align a fixed right column at the right

3 Answers3