Css – Bootstrap full width and height


What would be a proper way to create a 2 column (Sidebar – Main) full width page with Bootstrap. I found few examples but mostly for width.

My attempt was to simply override:

html, body {
  margin:  0px;
  width:   100%;
  height:  100%;

sidebar {
  width:   200px;
  height:  100%;

However this creates concern for smaller screens. What would be a proper way to implement 2 column page layout. I'm trying to put make a layout for my administration panel.

Best Solution

You can just use the Bootstrap fluid grid? It will create a 2 column flexible layout. You can then use Bootstrap responsive to make that collapse down in one column if you want to.

Code from the Bootstrap website to do it.

<div class="container-fluid">
 <div class="row-fluid">
   <div class="span2">
     <!--Sidebar content-->
   <div class="span10">
     <!--Body content-->

And a fiddle: http://jsfiddle.net/MgcDU/3581/