Masonry CSS with Bootstrap

by Santosh Thakur

HTML

<div class="container">
  <h1>Masonry CSS with Bootstrap</h1>
  <div class="row">
    <div class="item">
      <div class="well">
        1 blah blah blah
      </div>
    </div>
    <div class="item">
      <div class="well">
        2 blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
      </div>
    </div>
    <div class="item">
      <div class="well">
        1 blah blah blah
      </div>
    </div>
    <div class="item">
      <div class="well">
        2 blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
      </div>
    </div>
    <div class="item">
      <div class="well">
        1 blah blah blah
      </div>
    </div>
    <div class="item">
      <div class="well">
        2 blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
      </div>
    </div>
    <div class="item">
      <div class="well">
        1 blah blah blah
      </div>
    </div>
    <div class="item">
      <div class="well">
        2 blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
      </div>
    </div>
    <div class="item">
      <div class="well">
        1 blah blah blah
      </div>
    </div>
    <div class="item">
      <div class="well">
        2 blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
      </div>
    </div>
    <div class="item">
      <div class="well">
        1 blah blah blah
      </div>
    </div>
    <div class="item">
      <div class="well">
        2 blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
      </div>
    </div>
    <div class="item">
      <div class="well">
        1 blah blah blah
      </div>
    </div>
    <div class="item">
      <div class="well">
        2 blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
      </div>
    </div>
    <div class="item">
      <div...

CSS

*,
*:before,
*:after {
  box-sizing: border-box !important;
}

.row {
  -webkit-column-width: 10em;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  border: 1px solid red;
}

.item {
  display: inline-block;
  padding: .10rem;
  width: 100%;
  border: 1px solid #333;
}

.well {
  position: relative;
  display: block;
}