title: How to use Twitter Bootstrap correctly ( adding styles )?
body: <p>I am trying to figure out the bulletproof way of using Bootstrap correctly. Here is my example:</p>
  
  <pre><code>&lt;style&gt;&lt;!-- this is my own class in a separate stylesheet --&gt;
      .myClass {border:1px solid #666;}
  &lt;/style&gt;
  
  &lt;!-- and the structure made with bootstrap --&gt;
  
  &lt;div class="container"&gt;
      &lt;div id="fullBox" class="row-fluid"&gt;
          &lt;div id="halfBox1" class="span6"&gt;
              Life
          &lt;/div&gt;
          &lt;div id="halfBox2" class="span6"&gt;
              is Good!
          &lt;/div&gt;  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>this will create two containers in a row with equal width and:</p>
  
  <p>1.) would like to style the container (fullBox), give a background, shadow and border;</p>
  
  <p>if I <strong>wrap around the fullBox container with myClass</strong> (my styled DIV), that will work. But in case myClass has 1px border, that will brake the Bootstrap layout with 2 pixels both horizontally and vertically by adding that 1px border around.</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="myClass"&gt;
          &lt;div id="fullBox" class="row-fluid"&gt;
              &lt;div id="halfBox1" class="span6"&gt;
                  Life
              &lt;/div&gt;
              &lt;div id="halfBox2" class="span6"&gt;
                  is Good!
              &lt;/div&gt;  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>in case <strong>myClass is inside fullBox</strong>, that will not brake the Bootstrap layout but will not work either due to properties of bootstrap containers. The elements inside will not stretch myClass around them, the output will be a 2px line on the top (the borders of 0px high myClass) </p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div id="fullBox" class="row-fluid"&gt;
          &lt;div class="myClass"&gt;
              &lt;div id="halfBox1" class="span6"&gt;
                  Life
              &lt;/div&gt;
              &lt;div id="halfBox2" class="span6"&gt;
                  is Good!
              &lt;/div&gt;  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>in case <strong>myClass is an additional class of fullBox</strong> (class="row-fluid myClass"), that will work again but will brake the Bootstrap layout as well, when using a border:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div id="fullBox" class="row-fluid myClass"&gt;
              &lt;div id="halfBox1" class="span6"&gt;
                  Life
              &lt;/div&gt;
              &lt;div id="halfBox2" class="span6"&gt;
                  is Good!
              &lt;/div&gt;  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>this will get even more complicated when styling the halfBox containers, here is an example but could be used any of the other two examples above with wrapping around or using a styled div inside halfBox</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div id="fullBox" class="row-fluid"&gt;
          &lt;div id="halfBox1" class="span6 myClass"&gt;
              Life
          &lt;/div&gt;
          &lt;div id="halfBox2" class="span6 myClass"&gt;
              is Good!
          &lt;/div&gt;  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am sure there must be "the right way to do it" or at least a highly recommended way in order to achieve clean and efficiently reusable code. The goal is to keep Bootstrap intact and use an extra stylesheet with some borders and bgColors, without braking the framework's layout.</p>
  
  <p>Here is a working sample: <a href="http://jsfiddle.net/Yatko/Y74U7/" rel="nofollow">http://jsfiddle.net/Yatko/Y74U7/</a></p>
  
  <p>Any help is highly appreciated!</p>