<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" align="center"> <h3> Real-Life Classes </h3> <div class="col-sm-6 col-md-3"> <div class="productbanner-s"><a href="http://www.nikonian.com.my/shopping/default.asp"><img src="http://lv2.nikonian.com.my/students/resources/Resize_Image.aspx?ImgWd=200&ImgHt=200&IptFl=products/photos/samples/daisy.jpg&CrpYN=Y"/></a><br> Macro Photography</div> </div> <div class="row visible-xs visible-sm visible-md"><br></div> <div class="col-sm-6 col-md-3"> <div class="productbanner-s"><a href="http://www.nikonian.com.my/shopping/default.asp"><img src="http://lv2.nikonian.com.my/students/resources/Resize_Image.aspx?ImgWd=200&ImgHt=200&IptFl=products/photos/samples/daisy.jpg&CrpYN=Y"/></a><br> Macro Photography</div></a> </div> <div class="row visible-xs visible-sm visible-md"><br></div> <div class="col-sm-6 col-md-3"> <div class="productbanner-s"><a href="http://www.nikonian.com.my/shopping/default.asp"><img src="http://lv2.nikonian.com.my/students/resources/Resize_Image.aspx?ImgWd=200&ImgHt=200&IptFl=products/photos/samples/daisy.jpg&CrpYN=Y"/></a><br> Macro Photography</div></a> </div> <div class="row visible-xs visible-sm visible-md"><br></div> <div class="col-sm-6 col-md-3"> <a href="http://www.nikonian.com.my/shopping/default.asp"><div class="productbanner-s"><img src="http://lv2.nikonian.com.my/students/resources/Resize_Image.aspx?ImgWd=200&ImgHt=200&IptFl=products/photos/samples/daisy.jpg&CrpYN=Y"/></a><br> Macro Photography</div></a> </div> <div class="row visible-xs visible-sm visible-md"><br></div> </div> <div class="row visible-lg"> <br> </div> <div class="container" align="center"> <div class="col-lg-3 col-sm-6"> <img class="img-thumbnail" src="//placehold.it/200x200"> </div> <div class="row visible-xs visible-sm visible-md"><br></div> <div class="col-lg-3 col-sm-6"> <img class="img-thumbnail" src="//placehold.it/200x200"> </div> <div class="row visible-xs visible-sm visible-md"><br></div> <div class="col-lg-3 col-sm-6"> <img class="img-thumbnail" src="//placehold.it/200x200"> </div> <div class="row visible-xs visible-sm visible-md"><br></div> <div class="col-lg-3 col-sm-6"> <img class="img-thumbnail" src="//placehold.it/200x200"> </div> <div class="row visible-xs visible-sm visible-md"><br></div> </div> </Body>

/* SMALL BANNER FOR REAL-LIFE CLASS */ .productbanner-s { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; width: 200px; height: 240px; border: none; font: normal 14px/2 Arial Black, Gadget, sans-serif; color: rgba(255,255,255,1); text-align: center; -o-text-overflow: ellipsis; text-overflow: ellipsis; background: rgba(255,7,98,1); } /* SMALL BANNER FOR REAL-LIFE CLASS */