"Product Grid"
Bootstrap 3.0.0 Snippet by SammuMufeed

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="navbar navbar-inverse" role="navigation"> <div class="container"> <div class="row categories"> <form method="post" action="test"> <div class="col-md-12"> <ul id="horizontal-list"> <li><a href="">ELECTRONICS</a></li> <li><a href="">AUTOMOTIVES</a></li> <li><a href="">HOME & DECOR</a></li> <li><a href="">SPORTING</a></li> <li><a href="">FASHION</a></li> <li><a href="">GARDENING</a></li> <li><a href="">HOBBYS</a></li> <li><input type="text" name="search" style="padding:5px; border:1px solid #eee;"/><button type="submit" class="btn btn-danger">SEARCH</button></li> </ul> </div> </form> </div> <!-- /categories --> </div> </div> <!-- navbar --> <div class="container"> <div class="row it" id="cont"> <div class="col-md-12"><div class="col-md-12"><h2>Featured Products</h2></div></div> <div class="col-md-12"> <div class="col-md-4 item"><a href=""><div style="background:#eee; height:300px; margin-top:30px;"></div></a></div> <div class="col-md-4 item"><a href=""><div style="background:#eee; height:300px; margin-top:30px;"></div></a></div> <div class="col-md-4 item"><a href=""><div style="background:#eee; height:300px; margin-top:30px;"></div></a></div> <div class="col-md-4 item"><a href=""><div style="background:#eee; height:300px; margin-top:30px;"></div></a></div> <div class="col-md-4 item"><a href=""><div style="background:#eee; height:300px; margin-top:30px;"></div></a></div> <div class="col-md-4 item"><a href=""><div style="background:#eee; height:300px; margin-top:30px;"></div></a></div> </div> </div> <div class="row it" id="cont"> <div class="col-md-12"><div class="col-md-12"><h2>Recent Products</h2></div></div> <div class="col-md-12"> <div class="col-md-4 item"><div style="background:#eee; height:300px; margin-top:30px;"></div></div> <div class="col-md-4 item"><div style="background:#eee; height:300px; margin-top:30px;"></div></div> <div class="col-md-4 item"><div style="background:#eee; height:300px; margin-top:30px;"></div></div> <div class="col-md-4 item"><div style="background:#eee; height:300px; margin-top:30px;"></div></div> <div class="col-md-4 item"><div style="background:#eee; height:300px; margin-top:30px;"></div></div> </div> </div> </div> <!-- /container --> <div class="container"> <div class="col-md-12 footer">Copyright © 2000-2014 AdsLANKA. All Rights Reserved.</div> </div>
@font-face { font-family: 'Roboto-Light'; src: url('../fonts/Roboto-Light.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Roboto-Thin'; src: url('../fonts/Roboto-Thin.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Roboto-Regular'; src: url('../fonts/Roboto-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } html { text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; } body { font-family:"Roboto-Regular"; font-weight:normal; } .it h2{ color: #666; font-family: "Roboto-Light"; padding-top: 10px; } a:hover { text-decoration: none;} .navbar-brands {height:70px; margin:0 0 30px 0; padding:0; } .navbar-fixed-top { border: 0; } .navbar-inverse { background:#fff;border:0; } .navbar-inverse ul{ } .navbar-inverse li { list-style:none; display:inline; } .categories { font-family: "Roboto-Regular"; } .categories ul { margin: 0; border-top: 1px solid #eee; padding-left: 11px; border-bottom: 2px solid #eee; padding-top: 15px; padding-bottom: 15px; } .categories li { margin-right: 30px; } .categories li a{ font-size: 1em; color: #666;} .categories li a:hover { color:#CC2B55;} .categories button { margin-left: 10px;} .txtarea { border: 1px solid #ccc; height: 60px; margin-bottom: 10px;} .footer { border-top: 2px solid #eee; margin-top: 30px; margin-bottom: 30px; padding-top: 15px;font-size: 0.9em; color: #999;}

Related: See More


Questions / Comments: