title: Using Bootstrap to create holy grail style layout
body: <p>Sorry if this question has already been answered, I couldn't find anything that was exactly what I want.</p>
  
  <p>I'm trying to create a responsive layout which is something similar to the <a href="http://alistapart.com/article/holygrail" rel="nofollow">Holy Grail Layout on A List Apart</a> </p>
  
  <p>There will be a fixed width column on the left, a variable width column in the middle and then a fixed width column on the right. The right column will only be visible in windows that are over a certain width and the whole thing will only expand up to a certain size.</p>
  
  <p>I've created a <a href="http://jsfiddle.net/XJGFP/" rel="nofollow">jsFiddle which does exactly what I want here</a>.</p>
  
  <p>My basic HTML looks like this:</p>
  
  <pre><code>&lt;h1&gt;Window Width: &lt;span&gt;&lt;/span&gt;&lt;/h1&gt;
  &lt;div id="container"&gt;
  
      &lt;div id="center" class="column"&gt;
          &lt;h1&gt;Two&lt;/h1&gt;
          &lt;p&gt;Width: &lt;span&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="left" class="column"&gt;
          &lt;h2&gt;One&lt;/h2&gt;
          &lt;p&gt;Width: &lt;span&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="right" class="column"&gt;
          &lt;h2&gt;Three&lt;/h2&gt;
          &lt;p&gt;Width: &lt;span&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>My question is, would it be possible to do this in something like Bootstrap. I think if it is possible then it could save me some time as I need to make it work on mobile devices, however I'm not sure how to combine some fixed and non fixed columns in a single Bootstrap layout.</p>