Bootstrap 3 Grid Layout Examples

Useful responsive grid layouts, for promotions, presentations or anything else.

www.xcartmods.co.uk/reboot


You may or may not need this additional CSS...

.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; } }


More coming soon !


01


No grid required, or use...

<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>

TOP


02


<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>

TOP


03


<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>

TOP


04


<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>

TOP


05


<div class="row">
<div class="col-sm-8 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/600/455/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>

TOP


06


<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-8 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/600/455/cats/2" alt=""></div>
</div>

TOP


07


<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-9 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/600/372/cats/2" alt=""></div>
</div>

TOP


08


<div class="row">
<div class="col-sm-9 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/600/372/cats/1" alt=""></div>
<div class="col-sm-3 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/600/cats/2" alt=""></div>
</div>

TOP


09


<div class="row">
<div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/600/570/cats/1" alt=""></div>
<div class="col-sm-3 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/600/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>

TOP


10


<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-3 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/600/cats/2" alt=""></div>
<div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/600/570/cats/3" alt=""></div>
</div>

TOP


11


<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>

TOP


12



<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>

TOP


13


<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>

TOP


14



<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>

TOP


15



<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>

TOP


16



<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/264/cats/2" alt="">
<br>
<div class="row">
<div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/150/150/cats/3" alt=""></div>
<div class="col-sm-6"><img class="img-responsive img-center" src="http://lorempixel.com/150/150/cats/4" alt=""></div>
</div>
</div>
<div class="col-sm-3 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/600/cats/5" alt=""></div>
</div>

TOP


17



<div class="row">
<div class="col-sm-6 mb20">
<img class="img-responsive img-center" src="http://lorempixel.com/300/140/cats/1" alt="">
<br>
<div class="row">
<div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/280/cats/2" alt=""></div>
<div class="col-sm-6"><img class="img-responsive img-center" src="http://lorempixel.com/300/280/cats/3" alt=""></div>
</div>
</div>
<div class="col-sm-3 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/600/cats/4" alt=""></div>
<div class="col-sm-3 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/600/cats/5" alt=""></div>
</div>

TOP


18



<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-3 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/600/cats/2" alt=""></div>
<div class="col-sm-6 mb20">
<img class="img-responsive img-center" src="http://lorempixel.com/300/140/cats/3" alt="">
<br>
<div class="row">
<div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/280/cats/4" alt=""></div>
<div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/280/cats/5" alt=""></div>
</div>
</div>
</div>

TOP


19



<div class="row">
<div class="col-sm-4 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/405/cats/1" alt=""></div>
<div class="col-sm-8 mb20">
<img class="img-responsive img-center" src="http://lorempixel.com/300/100/cats/2" alt="">
<br>
<div class="row">
<div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/180/cats/3" alt=""></div>
<div class="col-sm-6 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/300/180/cats/4" alt=""></div>
</div>
</div>
</div>

TOP


20



<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>

TOP


50


<div class="row">
<div class="col-sm-15 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/200/400/cats/1" alt=""></div>
<div class="col-sm-15 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/200/400/cats/2" alt=""></div>
<div class="col-sm-15 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/200/400/cats/3" alt=""></div>
<div class="col-sm-15 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/200/400/cats/4" alt=""></div>
<div class="col-sm-15 mb20"><img class="img-responsive img-center" src="http://lorempixel.com/200/400/cats/5" alt=""></div>
</div>

TOP