Portfolio Filter Using jQuery and Bootstrap

How to make gallery or portfolio very mild (lightweight) with button filter using jquery, bootstrap, and bootstrap-portfilter.js

IMPORT LIBRARIES
<link href="bootstrap-combined.no-icons.min.css" rel="stylesheet">
<script src="jquery-1.9.1.min.js"></script>
<script src="bootstrap-portfilter.min.js"></script>
BUTTON FILTER CODE
<div class="container wrapper">
   <div class="pull-right">
     <button class="btn btn-small btn-primary" data-toggle="portfilter" data-target="all">All</button>
  </div>
  <div class="clearfix"></div>
</div>

 

THUMBNAILS GALLERY CODE
<ul class="thumbnails gallery">
  <li class="span3 clearfix" data-tag='brand'>
    <div class="thumbnail">
      <img alt="270x170" src="//placehold.it/270x170" />
      <div class="caption">
        <h4>Brand Project</h4>
      </div>
    </div>
  </li>
</ul>
<div class="push"></div>

 

CSS CODE
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -120px;
}
.footer, .push {
  height: 120px;
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *