"responsive User Portfolio thumbnails with 3.2 bootstrap"
Bootstrap 3.3.0 Snippet by mirchu

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <br/> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="http://placehold.it/100%180&text=Mirchu.net" alt="ALT NAME"> <div class="caption"> <h3>Header Name</h3> <p>Description</p> <p align="center"><a href="http://www.mirchu.net/" target="_blank" class="btn btn-info btn-lg btn-block">View detail</a></p> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="http://placehold.it/100%180&text=Mirchu.net" alt="ALT NAME"> <div class="caption"> <h3>Header Name</h3> <p>Description</p> <p align="center"><a href="http://www.mirchu.net/" target="_blank" class="btn btn-info btn-lg btn-block">View detail</a></p> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="http://placehold.it/100%180&text=Mirchu.net" alt="ALT NAME"> <div class="caption"> <h3>Header Name</h3> <p>Description</p> <p align="center"><a href="http://www.mirchu.net/" target="_blank" class="btn btn-info btn-lg btn-block">View detail</a></p> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="http://placehold.it/100%180&text=Mirchu.net" alt="ALT NAME"> <div class="caption"> <h3>Header Name</h3> <p>Description</p> <p align="center"><a href="http://www.mirchu.net/" target="_blank" class="btn btn-info btn-lg btn-block">View detail</a></p> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="http://placehold.it/100%180&text=Mirchu.net" alt="ALT NAME"> <div class="caption"> <h3>Header Name</h3> <p>Description</p> <p align="center"><a href="http://www.mirchu.net/" target="_blank" class="btn btn-info btn-lg btn-block">View detail</a></p> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="http://placehold.it/100%180&text=Mirchu.net" alt="ALT NAME"> <div class="caption"> <h3>Header Name</h3> <p>Description</p> <p align="center"><a href="http://www.mirchu.net/" target="_blank" class="btn btn-info btn-lg btn-block">View detail</a></p> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="http://placehold.it/100%180&text=Mirchu.net" alt="ALT NAME"> <div class="caption"> <h3>Header Name</h3> <p>Description</p> <p align="center"><a href="http://www.mirchu.net/" target="_blank" class="btn btn-info btn-lg btn-block">View detail</a></p> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="http://placehold.it/100%180&text=Mirchu.net" alt="ALT NAME"> <div class="caption"> <h3>Header Name</h3> <p>Description</p> <p align="center"><a href="http://www.mirchu.net/" target="_blank" class="btn btn-info btn-lg btn-block">View detail</a></p> </div> </div> </div> </div> </div>
@media (min-width: 1200px){ .container { width: 1300px; } } @media (min-width: 1570px){ .container { width: 1540px; } } @media (min-width: 1900px){ .container { width: 1870px; } }

Related: See More


Questions / Comments:

give me feedback friends :)

Mirchu () - 9 years ago - Reply 0