Bootstrap and Isotope

by borayeris

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <h1>Bootstrap and Isotope</h1>

  <div id="posts" class="row">
    <div id="1" class="item col-md-3 col-sm-6">
      <div class="well">
        <h4><a href="#" target="_blank">Bootstrap</a></h4>

        <img class="thumbnail img-responsive" src="//placehold.it/150/180">
        <div class="info"> <span class="badge">90</span>
          <span class="badge">42</span>

        </div>
      </div>
    </div>
    <div id="2" class="item col-md-3 col-sm-6">
      <div class="well">
        <h4><a href="${permalink_absolute}" target="_blank">Isotope</a></h4>

        <img class="thumbnail img-responsive" src="//placehold.it/150x145">
        <div class="info"> <span class="badge">100</span>
          <span class="badge">45</span>

        </div>
      </div>
    </div>
    <div id="3" class="item col-md-3 col-sm-6">
      <div class="well">
        <h4>
          <a href="${permalink_absolute}" target="_blank">Layout</a>
        </h4>

        <img class="thumbnail img-responsive" src="//placehold.it/300x450">
        <div class="info"> <span class="badge">100</span>
          <span class="badge">45</span>

        </div>
      </div>
    </div>
    <div id="4" class="item col-md-3 col-sm-6">
      <div class="well">
        <h4>
          <a href="${permalink_absolute}" target="_blank">Responsive</a>
        </h4>

        <img class="thumbnail img-responsive" src="//placehold.it/150x120">
        <div class="info"> <span class="badge">100</span>
          <span class="badge">45</span>

        </div>
      </div>
    </div>
    <div id="5" class="item col-md-3 col-sm-6">
      <div class="well">
        <h4>
          <a href="${permalink_absolute}" target="_blank">Sleek</a>
        </h4>

        <img class="thumbnail img-responsive"...

CSS

.row {
  margin-left: 0;
  margin-right: 0;
}

.item h4 a {
  color: #333;
}

.item img.image {
  max-width: 100%;
  margin-top: 9px;
}

.info {
  padding: 4px;
}


/* Isotope Transitions
------------------------------- */

.isotope,
.isotope .item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}

.isotope .item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: top, left, opacity;
  transition-property: transform, opacity;
}


/* responsive media queries */

@media (max-width: 768px) {
  header h1 small {
    display: block;
  }
  header div.description {
    padding-top: 9px;
    padding-bottom: 4px;
  }
  .isotope .item {
    position: static ! important;
    -webkit-transform: translate(0px, 0px) ! important;
    -moz-transform: translate(0px, 0px) ! important;
    transform: translate(0px, 0px) ! important;
  }
}

JavaScript

$.getScript('//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/1.5.25/jquery.isotope.min.js',function(){

  /* activate jquery isotope */
  $('.row').imagesLoaded( function(){
    $('.row').isotope({
      itemSelector : '.col-sm-6'
    });
  });
  
});