Square grid using Bootstrap

by dzul1983

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="row grid">
    <div class="col-sm-6 grid-item">
      <div class="grid-item-inner">
        <div class="grid-item-content">
          <img src="https://images2.alphacoders.com/474/474206.jpg" alt="Dota 2" />
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-3 grid-item">
      <div class="grid-item-inner">
        <div class="grid-item-content">
          <img src="https://images2.alphacoders.com/505/505544.jpg" alt="Dota 2" />
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-3 grid-item">
      <div class="grid-item-inner">
        <div class="grid-item-content">
          <img src="https://images5.alphacoders.com/431/431536.jpg" alt="Dota 2" />
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-3 grid-item">
      <div class="grid-item-inner">
        <div class="grid-item-content">
          <img src="https://images.alphacoders.com/472/472418.jpg" alt="Dota 2" />
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-3 grid-item">
      <div class="grid-item-inner">
        <div class="grid-item-content">
          <img src="https://images.alphacoders.com/506/506791.jpg" alt="Dota 2" />
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

.grid-item {
  position: relative;
  border: 1px solid red;
  padding: 0;
}

.grid-item-inner {
  padding-bottom: 100%;
  position: relative;
  background: #000;
}

.grid-item-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}