<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container" align="center"> <div class="row"> <div class="gllery col-lg-12 col-md-12 col-sm-12 col-xs-12"> <h2>Post Gallery Category</h2> </div> <div class="list" align="center"> <button class="btn btn-default filter" blog-filter="all">ALL</button> <button class="btn btn-default filter" blog-filter="current">CURRENT</button> <button class="btn btn-default filter" blog-filter="believe">BELIEVE</button> <button class="btn btn-default filter" blog-filter="sayit">CAN I SAY SOMETHING</button> <button class="btn btn-default filter" blog-filter="grace">IT WAS GRACE</button> </div> <br/> <div class="post-gallery col-lg-4 col-md-4 col-sm-4 col-xs-6 filter current"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="post-gallery col-lg-4 col-md-4 col-sm-4 col-xs-6 filter belive"></div> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="post-gallery col-lg-4 col-md-4 col-sm-4 col-xs-6 filter belive"></div> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> <figcaption> <span class="project-creator">creator name</span> <span class="project-details">All About Me</span> <li class="plus"><a href="# " class="fa fa-plus-circle" title="Google + "><i class="fa fa-plus-circle "></i></a> </figcaption> </div> </div> </div>

.list{ background-color:#ff1493; text-align: center; margin-bottom: 70px; } .plus{ color: #ff1493; text-align: center; font-size: 230px; }

<a href="url"><input type="button" class="btn btn-info" value="Read More"></input>