Portfolio Filter Using jQuery and Bootstrap

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.

screenshot-portfoliofilter-442016

Import library

<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

<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

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

Make Style

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

 

 

Tags: , , ,