title: How to Get Bootstrap Card Columns?
body: <p>I'm learning the Bootstrap framework and am attempting to make a two column card system to allow a "feed" of cards to be captured. Depending on the card type it will sit on the left or the right column. I'm using Bootstrap with what I believe to be a 12 column container. Inside the container there is a 6 column div and another 6 column div but for whatever reason they do not separate and all the cards end up being one long list of cards. </p>
  
  <p>Example here:
  <a href="http://codepen.io/jasonrpan/pen/KaLRdj" rel="nofollow noreferrer">http://codepen.io/jasonrpan/pen/KaLRdj</a></p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="col-md-6"&gt;
      &lt;div class="card"&gt;
        &lt;div class="card-block"&gt;
          &lt;h1 class="card-text good-review-score float-left"&gt;8.0&lt;/h1&gt;
          &lt;h4 class="card-title"&gt;Card on the Left 1&lt;/h4&gt;
          &lt;p class="card-text"&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="card-footer"&gt;
          &lt;p class="card-text text-right"&gt;Footer Text - Possible Link Out&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;
        &lt;div class="card-block"&gt;
          &lt;h1 class="card-text good-review-score float-left"&gt;8.0&lt;/h1&gt;
          &lt;h4 class="card-title"&gt;Card on the Left 2&lt;/h4&gt;
          &lt;p class="card-text"&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="card-footer"&gt;
          &lt;p class="card-text text-right"&gt;Footer Text - Possible Link Out&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="col-md-6"&gt;
      &lt;div class="card"&gt;
        &lt;div class="card-block"&gt;
          &lt;h1 class="card-text good-review-score float-left"&gt;8.0&lt;/h1&gt;
          &lt;h4 class="card-title"&gt;Card on the Right 1&lt;/h4&gt;
          &lt;p class="card-text"&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="card-footer"&gt;
          &lt;p class="card-text text-right"&gt;Footer Text - Possible Link Out&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;
        &lt;div class="card-block"&gt;
          &lt;h1 class="card-text good-review-score float-left"&gt;8.0&lt;/h1&gt;
          &lt;h4 class="card-title"&gt;Card on the Right 1&lt;/h4&gt;
          &lt;p class="card-text"&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="card-footer"&gt;
          &lt;p class="card-text text-right"&gt;Footer Text - Possible Link Out&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Curious on why this might be?</p>