bootstrap grid

HTML

<div class="container">
  <div class="item">
    <div class="row">
      <!-- attempt at square grid -->
      <div class="col-md-3 col-sm-4 col-xs-6 item-item">
        <div class="dummy"></div>
        <div class="thumbnail purple">
          Title:
          <br> Description
          <br> Another category
          <br>
        </div>
      </div>
      <div class="col-md-3 col-sm-4 col-xs-6 item-item">
        <div class="dummy"></div>
        <div class="thumbnail purple">
          Title:
          <br> Description
          <br> Another category
          <br>
        </div>
      </div>
      <div class="col-md-3 col-sm-4 col-xs-6 item-item">
        <div class="dummy"></div>
        <div class="thumbnail purple">
          Title:
          <br> Description
          <br> Another category
          <br>
        </div>
      </div>
      <div class="col-md-3 col-sm-4 col-xs-6 item-item">
        <div class="dummy"></div>
        <div class="thumbnail purple">
          Title:
          <br> Description
          <br> Another category
          <br>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- end grid -->

CSS

.dummy {
  margin-top: 100%;
   
}

.row {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

.item-item {
  flex:0 0 277px;
  margin: 15px 0 0 1%;
  text-align: center;
  padding-top: calc(50% - 30px);
}

.item-item {
  border: solid black 5px;
}