Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by Srinivasan Lakshmanan

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
  <h1>Masonry CSS with Bootstrap</h1>
  <div class="row">
    <div class="item">
      <div class="well">
        <img class="img-responsive" src="https://www.petfinder.com/wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463.jpg">
      </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">
        3 blah blah blah blah blah blah blah blah h
      </div>
    </div>
    <div class="item">
      <div class="well">
        blah blah blah blah
      </div>
    </div>
    <div class="item">
      <div class="well">
        blah blah blah. The container inside the item must be position:relative
      </div>
    </div>
    <div class="item">
      <div class="well">
        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">
        blah blah blah blah blah blah blah blah h
      </div>
    </div>
    <div class="item">
      <div class="well">
        blah blah blah blah
      </div>
    </div>
    <div class="item">
      <div class="well">
        blah blah blah blah blah blah blah blah blah blah blah blah
      </div>
    </div>
    <div class="item">
      <div class="well">
        blah blah blah. The container inside the item must be position:relative
      </div>
    </div>
  </div>
</div>

CSS

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


.row {
 -moz-column-width: 18em;
 -webkit-column-width: 18em;
 -moz-column-gap: 1em;
 -webkit-column-gap:1em; 
  
}

.item {
 display: inline-block;
 padding:  .25rem;
 width:  100%; 
}

.item img {
    
}

.well {
 position:relative;
 display: block;
 /*max-height: 200px;*/
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */