"For Mainpage Courses Section"
Bootstrap 3.3.0 Snippet by andrewbsc

<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-fluid"> <div class="row" > <div class="col-md-3 column"> </div> <div class="col-md-2 column productbox"> <img src="http://www.nikonian.com.my/img/2015Template/Courses/title-reallife.jpg" width="555px" height="206" class="img-responsive"> <div class="producttitle push-left"><li><a href="shopping/product_mainpage.asp?ProductName=Course%20B2I">Basic-To-Intermediate</a></li></div> <div class="producttitle push-left"><li><a href="shopping/product_mainpage.asp?ProductName=Course%20Flash%20Photography">Flash Photography</a></li></div> <div class="producttitle push-left"><li>Portrait Photography</li></div> <div class="producttitle push-left"><li>Art of Seeing</li></div> <div class="producttitle push-left"><li>Post Processing: Level 1</li></div><br> <div><div class="pull-left"><a href="#" class="btn btn-danger btn-sm" role="button">More</a></div><br><br><div></div></div> </div> <div class="col-md-2 column productbox"> <img src="http://www.nikonian.com.my/img/2015Template/Courses/title-elearning.jpg" width="555px" height="206" class="img-responsive"> <div class="producttitle push-left"><li><a href="default.asp?contentID=1366">Manual Exposure Mode</a></li></div> <div class="producttitle push-left"><li>Flash Photography</li></div> <div class="producttitle push-left"><li>Camera Care (Basic)</li></div> <div class="producttitle push-left"><li>Art of Seeing</li></div> <div class="producttitle push-left"><li>Portrait Photography</li></div><br> <div><div class="pull-left"><a href="#" class="btn btn-danger btn-sm" role="button">More</a></div><br><br><div></div></div> </div> <div class="col-md-2 column productbox"> <img src="http://www.nikonian.com.my/img/2015Template/Courses/title-private.jpg" width="555px" height="206" class="img-responsive"> <div class="producttitle push-left"><li>Flexible weekday</li></div> <div class="producttitle push-left"><li>One trainer per participant</li></div> <div class="producttitle push-left"><li>One model for practical</li></div> <div class="producttitle push-left"><li>Choose preferred classes</li></div> <div class="producttitle push-left"><li>Academy or on-site training</li></div><br> <div><div class="pull-left"><a href="#" class="btn btn-danger btn-sm" role="button">More</a></div><br><br><div></div></div> </div> <div class="col-md-3 column"> </div> </div> <div class="row"> <div class="col-md-3 column"> </div> <div class="col-md-2 column productbox"> <img src="http://www.nikonian.com.my/img/2015Template/Courses/title-corporate.jpg" width="555px" height="206" class="img-responsive"> <div class="producttitle push-left">Are you and your organization planning corporate activites for your employees and corporate teammates? We provide and produce excellent knowledge activities for corporate employees such as photography workshops, photography outing and photography trips for many local and overseas corporations.</div><br> <div><div class="pull-left"><a href="#" class="btn btn-danger btn-sm" role="button">More</a></div><br><br><div></div></div> </div> <div class="col-md-2 column productbox"> <img src="http://www.nikonian.com.my/img/2015Template/Courses/title-pcp.jpg" width="555px" height="206" class="img-responsive"> <div class="producttitle push-left">We launched Professional Certification Program where participants will be able to obtain a Grand certificate after completing the modules of photography courses from Basic right up to Advanced modules. Participants of this program will gain hands on experience with real-time commercial shoots and many more.</div><br> <div><div class="pull-left"><a href="#" class="btn btn-danger btn-sm" role="button">More</a></div><br><br><div></div></div> </div> <div class="col-md-2 column productbox"> <img src="http://www.nikonian.com.my/img/2015Template/Courses/title-trip.jpg" width="555px" height="206" class="img-responsive"> <div class="producttitle push-left">One of the best way to learn photography is to hit the road! As such, we introduces a new activities for students and members. Join us, as our Pro Trainers take you on a road trip throughout Malaysia. Our participants will never run out of beautiful places to shoot. Your imagination is your limit! </div><br> <div><div class="pull-left"><a href="#" class="btn btn-danger btn-sm" role="button">More</a></div><br><br><div></div></div> </div> <div class="col-md-3 column"> </div> </div> </div>
.productbox { background-color:#ffffff; padding:25px; margin-bottom:25px; -webkit-box-shadow: 0 8px 6px -6px #999; -moz-box-shadow: 0 8px 6px -6px #999; box-shadow: 0 8px 6px -6px #999; } .producttitle { font-weight:normal; padding:5px 0 5px 0; } .productprice { border-top:1px solid #dadada; padding-top:5px; } .pricetext { font-weight:bold; font-size:1.4em; }

Related: See More


Questions / Comments: