<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"> <div class="row"> <div class="row"> <div class="col-sm-12 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/1140/600/cats/1" alt=""></div> </div> <div class="row"> <div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/570/600/cats/1" alt=""></div> <div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/570/600/cats/2" alt=""></div> </div> <div class="row"> <div class="col-sm-4 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/380/600/cats/1" alt=""></div> <div class="col-sm-4 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/380/600/cats/2" alt=""></div> <div class="col-sm-4 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/380/600/cats/3" alt=""></div> </div> <div class="row"> <div class="col-sm-3 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/380/600/cats/1" alt=""></div> <div class="col-sm-3 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/380/600/cats/2" alt=""></div> <div class="col-sm-3 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/380/600/cats/3" alt=""></div> <div class="col-sm-3 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/380/600/cats/4" alt=""></div> </div> <div class="row"> <div class="col-sm-3 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/600/cats/1" alt=""></div> <div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/600/570/cats/2" alt=""></div> <div class="col-sm-3 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/600/cats/3" alt=""></div> </div> <div class="row"> <div class="col-sm-6 mb20"> <img class="img-responsive img-center" src="http://lorempixel.com/300/147/cats/1" alt=""> <br> <div class="row"> <div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/300/cats/2" alt=""></div> <div class="col-sm-6"><img class="img-responsive img-center" src="http://lorempixel.com/300/300/cats/3" alt=""></div> </div> </div> <div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/300/cats/4" alt=""></div> </div> <div class="row"> <div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/300/cats/1" alt=""></div> <div class="col-sm-6 mb20"> <div class="row"> <div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/300/cats/2" alt=""></div> <div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/300/cats/3" alt=""></div> </div> <img class="img-responsive img-center" src="http://lorempixel.com/300/147/cats/4" alt=""> </div> </div> <div class="row"> <div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/600/600/cats/1" alt=""></div> <div class="col-sm-6 mb20"> <img class="img-responsive img-center" src="http://lorempixel.com/500/170/cats/2" alt=""> <br> <div class="row"> <div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/185/cats/3" alt=""></div> <div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/185/cats/4" alt=""></div> </div> <div class="row"> <div class="col-sm-4 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/300/cats/5" alt=""></div> <div class="col-sm-4 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/300/cats/6" alt=""></div> <div class="col-sm-4 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/300/cats/7" alt=""></div> </div> </div> </div> <div class="row"> <div class="col-sm-6 mb20"> <img class="img-responsive img-center" src="http://lorempixel.com/500/170/cats/2" alt=""> <br> <div class="row"> <div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/185/cats/3" alt=""></div> <div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/185/cats/4" alt=""></div> </div> <div class="row"> <div class="col-sm-4 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/300/cats/5" alt=""></div> <div class="col-sm-4 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/300/cats/6" alt=""></div> <div class="col-sm-4 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/300/cats/7" alt=""></div> </div> </div> <div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/600/600/cats/1" alt=""></div> </div> <div class="row"> <div class="col-sm-8 mb20"> <img class="img-responsive img-center" src="http://lorempixel.com/300/100/cats/1" alt=""> <br> <div class="row"> <div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/180/cats/2" alt=""></div> <div class="col-sm-6"><img class="img-responsive img-center" src="http://lorempixel.com/300/180/cats/3" alt=""></div> </div> </div> <div class="col-sm-4 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/405/cats/4" alt=""></div> </div> </div> </div>

.mb20 { margin-bottom: 20px; } .img-responsive { width: 100%; height: auto !important; } .img-center, .img-responsive.img-center { margin: 0 auto !important; } .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } .col-xs-15 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } }