Bootstrap 3.0 - Grid System

by Teuta Koraqi

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="portfolio">
            <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="material-placeholder"><img class="materialboxed initialized" id="img-1" src="http://webtehayat.net/demo/portfolio/images/portfolio-1.jpg" alt=""></div>
                <div class="overlay">
                    <a href="post"><i class="fa fa-link" aria-hidden="true"></i></a>
                    <a href="javascript:showImg('img-1')"><i class="fa fa-search" aria-hidden="true"></i></a>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="material-placeholder"><img class="materialboxed initialized" id="img-2" src="http://webtehayat.net/demo/portfolio/images/portfolio-2.jpg" alt=""></div>
                <div class="overlay">
                    <a href="post"><i class="fa fa-link" aria-hidden="true"></i></a>
                    <a href="javascript:showImg('img-2')"><i class="fa fa-search" aria-hidden="true"></i></a>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="material-placeholder"><img class="materialboxed initialized" id="img-3" src="http://webtehayat.net/demo/portfolio/images/portfolio-3.jpg" alt=""></div>
                <div class="overlay">
                    <a href="post"><i class="fa fa-link" aria-hidden="true"></i></a>
                    <a href="javascript:showImg('img-3')"><i class="fa fa-search" aria-hidden="true"></i></a>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="material-placeholder"><img class="materialboxed initialized" id="img-4"...

CSS

.portfolio img {
    width: 100%;
    height: auto;
}

.materialboxed {
    display: block;
    cursor: zoom-in;
    position: relative;
    transition: opacity .4s;
    -webkit-backface-visibility: hidden;
}

.portfolio .overlay {
    position: absolute;
    top: 0;
    width: 100%;
    bottom: 0;
    text-align: center;
    background-color: #009688;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.7s;
}
.portfolio .overlay a {
    color: #fff;
    position: relative;
    padding: 13px;
    border: 1px solid #fff;
    top: 20%;
    margin-left: 15px;
    font-size: 20px;
    transition: top 0.7s;
}

.portfolio .overlay a {
    color: #fff;
    position: relative;
    padding: 13px;
    border: 1px solid #fff;
    top: 20%;
    margin-left: 15px;
    font-size: 20px;
    transition: top 0.7s;
}

JavaScript

$(".button-collapse").sideNav();
$("ul.menu li a").first().addClass("bg-color white-text");
$("ul.menu li a").on("click", function () {
    $("ul.menu li a").removeClass("bg-color white-text");
    $(this).addClass("bg-color white-text");
    $(".button-collapse").sideNav("hide");
});

var showImg = function (imgId) {
    $("#" + imgId).click();
}


    $(".portfolio").masonry({
        columnWidth: '.col-md-4.col-sm-6',
        itemSelector: '.col-md-4'
    });