Bootstrap CSS blocks like Meteor (Windows 8)?

Question

css

Hello! Can you tell me how to make this kind of blocks? On bootstrap 3.

On bootstrap 3.
I made indents from the bottom, but, so that they recede from each other, it turns out somehow crooked. Another thing to consider is adaptability.
It is necessary that the indents are the same as on Win8.
.work-block = has a padding of 2%.

<div id="portfolio" class="row">

      <div class="col-lg-8 col-md-8 col-xs-8 work-block">
        <a href="">
          <div class="work">
            <div class="work-image">
              <img src="http://charactersf.com/assets/uploads/2014/05/amazon_kindle_7b3-1000x563.jpg">
            </div>
            <div class="work-shadow"></div>
            <div class="work-view-btn">
              <span class="work-btn-details">View project</span>
            </div>
          </div>
        </a>
      </div>

      <div class="col-lg-4 col-md-4 col-xs-4 work-block">
        <a href="">
          <div class="work">
            <div class="work-image">
              <img src="http://charactersf.com/assets/uploads/2014/05/m_voyageur_du_temps_branding_v54-1000x563.jpg">
            </div>
            <div class="work-shadow"></div>
            <div class="work-view-btn">
              <span class="work-btn-details">View project</span>
            </div>
          </div>
        </a>
      </div>

      <div class="col-lg-4 col-md-4 col-xs-4 work-block">
        <a href="">
          <div class="work">
            <div class="work-image">
              <img src="http://charactersf.com/assets/uploads/2014/05/amazon_kindle_7b3-1000x563.jpg">
            </div>
            <div class="work-shadow"></div>
            <div class="work-view-btn">
              <span class="work-btn-details">View project</span>
            </div>
          </div>
        </a>
      </div>

      <div class="col-lg-4 col-md-4 col-xs-4 work-block">
        <a href="">
          <div class="work">
            <div class="work-image">
              <img src="http://charactersf.com/assets/uploads/2014/05/amazon_kindle_7b3-1000x563.jpg">
            </div>
            <div class="work-shadow"></div>
            <div class="work-view-btn">
              <span class="work-btn-details">View project</span>
            </div>
          </div>
        </a>
      </div>

      <div class="col-lg-4 col-md-4 col-xs-4 work-block">
        <a href="">
          <div class="work">
            <div class="work-image">
              <img src="http://charactersf.com/assets/uploads/2014/05/amazon_kindle_7b3-1000x563.jpg">
            </div>
            <div class="work-shadow"></div>
            <div class="work-view-btn">
              <span class="work-btn-details">View project</span>
            </div>
          </div>
        </a>
      </div>

      <div class="col-lg-4 col-md-4 col-xs-4 work-block">
        <a href="">
          <div class="work">
            <div class="work-image">
              <img src="http://charactersf.com/assets/uploads/2014/05/amazon_kindle_7b3-1000x563.jpg">
            </div>
            <div class="work-shadow"></div>
            <div class="work-view-btn">
              <span class="work-btn-details">View project</span>
            </div>
          </div>
        </a>
      </div>

      <div class="col-lg-8 col-md-8 col-xs-8 work-block">
        <a href="">
          <div class="work">
            <div class="work-image">
              <img src="http://charactersf.com/assets/uploads/2014/05/amazon_kindle_7b3-1000x563.jpg">
            </div>
            <div class="work-shadow"></div>
            <div class="work-view-btn">
              <span class="work-btn-details">View project</span>
            </div>
          </div>
        </a>
      </div>
      
    </div>

Answer 1

metro-webdesign.info

Answer 2

Very well done Metro here . Supported by Microsoft, by the way.