title: Pyramid grid in bootstrap
body: <p>I was using Bootstrap3 to make a 3 column grid. That looks like this:</p>
  
  <p><img src="https://i.imgur.com/YnmY2oc.png" alt=""></p>
  
  <p>However, see those rows with just two boxes, and one box. I was wanting to experiment to see how it would look centered if there are not 3 full boxes.</p>
  
  <p>I accomplished this by adding <code>display:flex; justify-content:center;</code> to the <code>.row</code> class but it's not the true bootstrap way. I was wondering what would be the true bootstrap way.</p>
  
  <p><img src="https://i.imgur.com/0FEZJla.png" alt=""></p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div class="padd-80"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12"&gt;
        ....
      &lt;/div&gt;
      &lt;div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12"&gt;
        ....
      &lt;/div&gt;
      &lt;div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12"&gt;
        ....
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="padd-80"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12"&gt;
        ....
      &lt;/div&gt;
      &lt;div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12"&gt;
        ....
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="padd-80"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12"&gt;
        ....
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks</p>