title: Bootstrap span classes not working as expected
body: <p>I wrote my first bootstrap program.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="row"&gt;
              &lt;div class="span9"&gt;Level 1 of Column&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="span6"&gt;Level 2&lt;/div&gt;
              &lt;div class="span3"&gt;Level 2&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;/body&gt;    
  &lt;/html&gt;
  </code></pre>
  
  <p>My hope was that the div class 9 will only take up 9 columns instead of entire browser width. My hope was that span6 and span3 will take up 6 and 3 columns and will be in the same row.</p>
  
  <p>But the output looks like </p>
  
  <p><img src="https://i.stack.imgur.com/tnzuZ.png" alt="enter image description here"></p>
  
  <p>So the rows do not appear properly (they are being cut) and also the rows and columns are not being respected. (in chrome I can see that level 1 is taking up the entire browser width) so is the 2 span6 and span3 classes. they take up entire browser width.</p>