title: Make 4 responsive box in bootstrap
body: <p>Hi I am trying to make this but my forth box goes to the bottom  Here is my code.
  Please help me to figure it out. Thanks everyone in advance.</p>
  
  <pre><code>&lt;div class="offer"&gt;
  &lt;h2&gt;Current Offers&lt;/h2&gt;
  &lt;div class="container text-center"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-3 col-md-4"&gt;
        &lt;div class="thumbnail checkout-thumbnail"&gt;
          &lt;img src="images/img1.jpg" alt="Image 1"&gt;
          &lt;div class="caption checkout-caption"&gt;
            &lt;h3&gt;House and Land Packages&lt;/h3&gt;
  
            &lt;p&gt;&lt;a href="#" class="btn btn-default btn-checkout btn-orange" role="button"&gt;Check out Button&lt;/a&gt; 
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3 col-md-4"&gt;
        &lt;div class="thumbnail checkout-thumbnail"&gt;
          &lt;img src="images/img1.jpg" alt="..."&gt;
          &lt;div class="caption checkout-caption"&gt;
            &lt;h3&gt;House and Land Packages&lt;/h3&gt;
  
            &lt;p&gt;&lt;a href="#" class="btn btn-default btn-checkout btn-teal" role="button"&gt;Check out Button&lt;/a&gt; 
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3 col-md-4"&gt;
        &lt;div class="thumbnail checkout-thumbnail"&gt;
          &lt;img src="images/img1.jpg" alt="..."&gt;
          &lt;div class="caption checkout-caption"&gt;
            &lt;h3&gt;House and Land Packages&lt;/h3&gt;
  
            &lt;p&gt;&lt;a href="#" class="btn btn-default btn-checkout btn-red" role="button"&gt;Check out Button&lt;/a&gt; 
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3 col-md-4"&gt;
        &lt;div class="thumbnail checkout-thumbnail"&gt;
          &lt;img src="images/img1.jpg" alt="..."&gt;
          &lt;div class="caption checkout-caption"&gt;
            &lt;h3&gt;House and Land Packages&lt;/h3&gt;
  
            &lt;p&gt;&lt;a href="#" class="btn btn-default btn-checkout btn-red" role="button"&gt;Check out Button&lt;/a&gt; 
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>and CSS</p>
  
  <pre><code>.thumbnail.checkout-thumbnail {
    background: #eee;
    border:none;
    max-width: 220px;
  
  }
  .caption.checkout-caption {
    margin-top: 2px;
  }
  .btn.btn-checkout {
    border-radius: 0;
    border: none;
    background: none;
    margin-top: 30px;
  }
  .btn.btn-orange {
    border: 2px solid orange;
  }
  .btn.btn-teal {
    border: 2px solid teal;
  }
  .btn.btn-red {
    border: 2px solid red;
  }
  </code></pre>
  
  <p>Please see the image here so that you can understand, I am trying to make it like this <a href="https://i.stack.imgur.com/0Jwmg.jpg" rel="nofollow noreferrer">image</a></p>