prosantamazumder/index.html

## index.html
<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Isotope Filtering</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Place favicon.ico in the root directory -->
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="style.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <!-- Add your site or application content here -->


		<!--start page content-->
		<div class="isotope-filtering-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="protfolio-menu text-center">
                          <button class="active" data-filter="*">show all</button>
                          <button data-filter=".cat1">metal</button>
                          <button data-filter=".cat2">transition</button>
                          <button data-filter=".cat3">alkali & alkaline-earth</button>
                          <button data-filter=".cat4">not transition</button>
                          <button data-filter=".cat5">metal but not transition</button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="grid">
                        <div class="col-md-8 grid-item cat1 cat5">
                            <div class="protfolio-item">
                                <img src="img/p2.jpg" alt="">
                            </div>
                        </div>
                        <div class="col-md-4 grid-item cat2">
                            <div class="protfolio-item">
                                <img src="img/p1.jpg" alt="">
                            </div>
                        </div>
                        <div class="col-md-8 grid-item cat2 cat5">
                            <div class="protfolio-item">
                                <img src="img/p3.jpg" alt="">
                            </div>
                        </div>
                        <div class="col-md-3 grid-item cat1 cat5">
                            <div class="protfolio-item">
                                <img src="img/p4.jpg" alt="">
                            </div>
                        </div>
                        <div class="col-md-8 grid-item cat3 cat4">
                            <div class="protfolio-item">
                                <img src="img/p5.jpg" alt="">
                            </div>
                        </div>
                        <div class="col-md-6 grid-item cat2">
                            <div class="protfolio-item">
                                <img src="img/p6.jpg" alt="">
                            </div>
                        </div>
                        <div class="col-md-2 grid-item cat3">
                            <div class="protfolio-item">
                                <img src="img/p7.jpg" alt="">
                            </div>
                        </div>
                        <div class="col-md-4 grid-item cat3 cat4">
                            <div class="protfolio-item">
                                <img src="img/p8.jpg" alt="">
                            </div>
                        </div>
                        <div class="col-md-10 grid-item cat1 cat5">
                             <div class="protfolio-item">
                                <img src="img/p9.jpg" alt="">
                            </div>
                        </div>
                        <div class="col-md-2 grid-item cat4 cat5">
                            <div class="protfolio-item">
                                <img src="img/p10.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
        <script src="js/bootstrap.js"></script>
        <script src="js/isotope.pkgd.min.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

## main.js
	// init Isotope
	var $grid = $('.grid').isotope({
	  itemSelector: '.grid-item',
	  percentPosition: true,
	  masonry: {
	    // use outer width of grid-sizer for columnWidth
	    columnWidth: 1
	  }
	})


	// filter items on button click
	$('.protfolio-menu').on( 'click', 'button', function() {
	  var filterValue = $(this).attr('data-filter');
	  $grid.isotope({ filter: filterValue });
	});


	//for menu active class
	$('.protfolio-menu button').on('click', function(event) {
		$(this).siblings('.active').removeClass('active');
		$(this).addClass('active');
		event.preventDefault();
	});

## style.css

img {
    width: 100%;
}
.protfolio-menu{}
.protfolio-menu button {
    display: inline-block;
}
.protfolio-menu button.active {
   background: red;
   color: #fff;
}
.protfolio-item {
    margin-bottom: 30px;
}
	<!doctype html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>Isotope Filtering</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Place favicon.ico in the root directory -->
	<link rel="stylesheet" href="css/font-awesome.css">
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="style.css">
	<script src="js/vendor/modernizr-2.8.3.min.js"></script>
	</head>
	<body>
	<!--[if lt IE 8]>
	<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
	<![endif]-->
	<!-- Add your site or application content here -->


	<!--start page content-->
	<div class="isotope-filtering-area">
	<div class="container">
	<div class="row">
	<div class="col-md-12">
	<div class="protfolio-menu text-center">
	<button class="active" data-filter="*">show all</button>
	<button data-filter=".cat1">metal</button>
	<button data-filter=".cat2">transition</button>
	<button data-filter=".cat3">alkali & alkaline-earth</button>
	<button data-filter=".cat4">not transition</button>
	<button data-filter=".cat5">metal but not transition</button>
	</div>
	</div>
	</div>
	<div class="row">
	<div class="grid">
	<div class="col-md-8 grid-item cat1 cat5">
	<div class="protfolio-item">
	<img src="img/p2.jpg" alt="">
	</div>
	</div>
	<div class="col-md-4 grid-item cat2">
	<div class="protfolio-item">
	<img src="img/p1.jpg" alt="">
	</div>
	</div>
	<div class="col-md-8 grid-item cat2 cat5">
	<div class="protfolio-item">
	<img src="img/p3.jpg" alt="">
	</div>
	</div>
	<div class="col-md-3 grid-item cat1 cat5">
	<div class="protfolio-item">
	<img src="img/p4.jpg" alt="">
	</div>
	</div>
	<div class="col-md-8 grid-item cat3 cat4">
	<div class="protfolio-item">
	<img src="img/p5.jpg" alt="">
	</div>
	</div>
	<div class="col-md-6 grid-item cat2">
	<div class="protfolio-item">
	<img src="img/p6.jpg" alt="">
	</div>
	</div>
	<div class="col-md-2 grid-item cat3">
	<div class="protfolio-item">
	<img src="img/p7.jpg" alt="">
	</div>
	</div>
	<div class="col-md-4 grid-item cat3 cat4">
	<div class="protfolio-item">
	<img src="img/p8.jpg" alt="">
	</div>
	</div>
	<div class="col-md-10 grid-item cat1 cat5">
	<div class="protfolio-item">
	<img src="img/p9.jpg" alt="">
	</div>
	</div>
	<div class="col-md-2 grid-item cat4 cat5">
	<div class="protfolio-item">
	<img src="img/p10.jpg" alt="">
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
	<script>window.jQuery \|\| document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
	<script src="js/bootstrap.js"></script>
	<script src="js/isotope.pkgd.min.js"></script>
	<script src="js/main.js"></script>
	</body>
	</html>
	// init Isotope
	var $grid = $('.grid').isotope({
	itemSelector: '.grid-item',
	percentPosition: true,
	masonry: {
	// use outer width of grid-sizer for columnWidth
	columnWidth: 1
	}
	})


	// filter items on button click
	$('.protfolio-menu').on( 'click', 'button', function() {
	var filterValue = $(this).attr('data-filter');
	$grid.isotope({ filter: filterValue });
	});


	//for menu active class
	$('.protfolio-menu button').on('click', function(event) {
	$(this).siblings('.active').removeClass('active');
	$(this).addClass('active');
	event.preventDefault();
	});

	img {
	width: 100%;
	}
	.protfolio-menu{}
	.protfolio-menu button {
	display: inline-block;
	}
	.protfolio-menu button.active {
	background: red;
	color: #fff;
	}
	.protfolio-item {
	margin-bottom: 30px;
	}