Search code examples
csstwitter-bootstrap-3sidebar

How do I make a sidebar on the far end of the viewport, in Bootstrap?

I'm trying to have a centered column, with a sidebar that's on the far left of the viewport/browser. It doesn't matter if it's sticky or not. I've tried using position, but it messes things up. Here's an example of what I'm trying to achieve - link

Solution

  • Use the grid system properly to reach this job:

    <div class="container-fluid">
 <div class="row">
  <div class="col-xs-3">
    <!-- sidebar -->
  </div>
  <div class="col-xs-9">
    <!-- main content -->
  </div>
 </div>
</div>

    Changing div class col-xs-9 to 3 and vice versa you'll get the same sidebar that is on stackoverflow. If you want whitespaccing on left and right you must use container instead container-fluid.

    Cheers!