Bootstrap snippet: Box Product List

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="col-md-9"> <div class="title"><span>Featured Products</span></div> <div class="col-sm-4 col-md-3 box-product-outer"> <div class="box-product"> <div class="img-wrapper"> <a href="detail.html"> <img alt="Product" src="http://www.grehon.com/mimity/v2.0/images/demo/polo1.jpg"> </a> <div class="tags"> <span class="label-tags"><span class="label label-danger">Sale</span></span> <span class="label-tags"><span class="label label-info">Featured</span></span> <span class="label-tags"><span class="label label-warning">Polo</span></span> </div> <div class="option"> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Add to Cart"><i class="ace-icon fa fa-shopping-cart"></i></a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Compare"><i class="ace-icon fa fa-align-left"></i></a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Wishlist"><i class="ace-icon fa fa-heart"></i></a> </div> </div> <h6><a href="detail.html">IncultGeo Print Polo T-Shirt</a></h6> <div class="price"> <div>$16.59<span class="price-down">-10%</span></div> <span class="price-old">$15.00</span> </div> <div class="rating"> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star-half-o"></i> <a href="#">(2 reviews)</a> </div> </div> </div> <div class="col-sm-4 col-md-3 hidden-xs box-product-outer"> <div class="box-product"> <div class="img-wrapper"> <a href="detail.html"> <img alt="Product" src="http://www.grehon.com/mimity/v2.0/images/demo/polo2.jpg"> </a> <div class="tags"> <span class="label-tags"><span class="label label-danger">Sale</span></span> <span class="label-tags"><span class="label label-info">Featured</span></span> <span class="label-tags"><span class="label label-warning">Polo</span></span> </div> <div class="option"> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Add to Cart"><i class="ace-icon fa fa-shopping-cart"></i></a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Compare"><i class="ace-icon fa fa-align-left"></i></a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Wishlist"><i class="ace-icon fa fa-heart"></i></a> </div> </div> <h6><a href="detail.html">Tommy HilfigerNavy Blue Printed Polo T-Shirt</a></h6> <div class="price"> <div>$45.27<span class="price-down">-10%</span></div> <span class="price-old">$15.00</span> </div> <div class="rating"> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star-half-o"></i> <a href="#">(3 reviews)</a> </div> </div> </div> <div class="col-sm-4 col-md-3 hidden-xs box-product-outer"> <div class="box-product"> <div class="img-wrapper"> <a href="detail.html"> <img alt="Product" src="http://www.grehon.com/mimity/v2.0/images/demo/polo3.jpg"> </a> <div class="tags"> <span class="label-tags"><span class="label label-danger">Sale</span></span> <span class="label-tags"><span class="label label-info">Featured</span></span> <span class="label-tags"><span class="label label-warning">Polo</span></span> </div> <div class="option"> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Add to Cart"><i class="ace-icon fa fa-shopping-cart"></i></a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Compare"><i class="ace-icon fa fa-align-left"></i></a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Wishlist"><i class="ace-icon fa fa-heart"></i></a> </div> </div> <h6><a href="detail.html">WranglerNavy Blue Solid Polo T-Shirt</a></h6> <div class="price"> <div>$25.59<span class="price-down">-10%</span></div> <span class="price-old">$15.00</span> </div> <div class="rating"> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star-half-o"></i> <a href="#">(4 reviews)</a> </div> </div> </div> <div class="col-sm-4 col-md-3 hidden-sm hidden-xs box-product-outer"> <div class="box-product"> <div class="img-wrapper"> <a href="detail.html"> <img alt="Product" src="http://www.grehon.com/mimity/v2.0/images/demo/polo4.jpg"> </a> <div class="tags"> <span class="label-tags"><span class="label label-danger">Sale</span></span> <span class="label-tags"><span class="label label-info">Featured</span></span> <span class="label-tags"><span class="label label-warning">Polo</span></span> </div> <div class="option"> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Add to Cart"><i class="ace-icon fa fa-shopping-cart"></i></a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Compare"><i class="ace-icon fa fa-align-left"></i></a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Wishlist"><i class="ace-icon fa fa-heart"></i></a> </div> </div> <h6><a href="detail.html">NikeAs Matchup -Pq Grey Polo T-Shirt</a></h6> <div class="price"> <div>$15.79<span class="price-down">-10%</span></div> <span class="price-old">$15.00</span> </div> <div class="rating"> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star-half-o"></i> <a href="#">(5 reviews)</a> </div> </div> </div> <div class="clearfix"></div> <div class="title"><span>V-Neck Collection</span></div> <div class="col-sm-4 col-md-3 box-product-outer"> <div class="box-product"> <div class="img-wrapper"> <a href="detail.html"> <img alt="Product" src="http://www.grehon.com/mimity/v2.0/images/demo/vneck1.jpg"> </a> <div class="tags"> <span class="label-tags"><span class="label label-danger">Sale</span></span> <span class="label-tags"><span class="label label-success">Collection</span></span> </div> <div class="option"> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Add to Cart"><i class="ace-icon fa fa-shopping-cart"></i></a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Compare"><i class="ace-icon fa fa-align-left"></i></a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Wishlist"><i class="ace-icon fa fa-heart"></i></a> </div> </div> <h6><a href="detail.html">PhosphorusGrey Melange Printed V Neck T-Shirt</a></h6> <div class="price"> <div>$5.25<span class="price-down">-10%</span></div> <span class="price-old">$15.00</span> </div> <div class="rating"> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star-half-o"></i> <i class="ace-icon fa fa-star-o"></i> <a href="#">(5 reviews)</a> </div> </div> </div> <div class="col-sm-4 col-md-3 hidden-xs box-product-outer"> <div class="box-product"> <div class="img-wrapper"> <a href="detail.html"> <img alt="Product" src="http://www.grehon.com/mimity/v2.0/images/demo/vneck2.jpg"> </a> <div class="tags"> <span class="label-tags"><span class="label label-danger">Sale</span></span> <span class="label-tags"><span class="label label-success">Collection</span></span> </div> <div class="option"> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Add to Cart"><i class="ace-icon fa fa-shopping-cart"></i></a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Compare"><i class="ace-icon fa fa-align-left"></i></a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Wishlist"><i class="ace-icon fa fa-heart"></i></a> </div> </div> <h6><a href="detail.html">United Colors of BenettonNavy Blue Solid V Neck T Shirt</a></h6> <div class="price"> <div>$13.57<span class="price-down">-10%</span></div> <span class="price-old">$15.00</span> </div> <div class="rating"> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star-half-o"></i> <i class="ace-icon fa fa-star-o"></i> <a href="#">(5 reviews)</a> </div> </div> </div> <div class="col-sm-4 col-md-3 hidden-xs box-product-outer"> <div class="box-product"> <div class="img-wrapper"> <a href="detail.html"> <img alt="Product" src="http://www.grehon.com/mimity/v2.0/images/demo/vneck3.jpg"> </a> <div class="tags"> <span class="label-tags"><span class="label label-danger">Sale</span></span> <span class="label-tags"><span class="label label-success">Collection</span></span> </div> <div class="option"> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Add to Cart"><i class="ace-icon fa fa-shopping-cart"></i></a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Compare"><i class="ace-icon fa fa-align-left"></i></a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Wishlist"><i class="ace-icon fa fa-heart"></i></a> </div> </div> <h6><a href="detail.html">WranglerBlack V Neck T Shirt</a></h6> <div class="price"> <div>$12.00<span class="price-down">-10%</span></div> <span class="price-old">$15.00</span> </div> <div class="rating"> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star-half-o"></i> <i class="ace-icon fa fa-star-o"></i> <a href="#">(5 reviews)</a> </div> </div> </div> <div class="col-sm-4 col-md-3 hidden-sm hidden-xs box-product-outer"> <div class="box-product"> <div class="img-wrapper"> <a href="detail.html"> <img alt="Product" src="http://www.grehon.com/mimity/v2.0/images/demo/vneck4.jpg"> </a> <div class="tags"> <span class="label-tags"><span class="label label-danger">Sale</span></span> <span class="label-tags"><span class="label label-success">Collection</span></span> </div> <div class="option"> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Add to Cart"><i class="ace-icon fa fa-shopping-cart"></i></a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Compare"><i class="ace-icon fa fa-align-left"></i></a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Wishlist"><i class="ace-icon fa fa-heart"></i></a> </div> </div> <h6><a href="detail.html">Tagd New YorkGrey Printed V Neck T-Shirts</a></h6> <div class="price"> <div>$8.09<span class="price-down">-10%</span></div> <span class="price-old">$15.00</span> </div> <div class="rating"> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star"></i> <i class="ace-icon fa fa-star-half-o"></i> <i class="ace-icon fa fa-star-o"></i> <a href="#">(5 reviews)</a> </div> </div> </div> </div>
body{margin-top:20px;} /* -------------------------------------------------------------- Box Product -------------------------------------------------------------- */ .box-product-outer { margin-bottom: 5px; padding-top: 15px; padding-bottom: 15px } .box-product-outer:hover { outline: 1px solid #aaa; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175) } .tab-content .box-product-outer { margin-bottom: 0 } .box-product-slider-outer { padding: 10px } .box-product .img-wrapper { position: relative; overflow: hidden } .box-product .img-wrapper > :first-child { position: relative; display: block } .box-product .img-wrapper > a > img { width: 100% } .box-product .img-wrapper .tags { position: absolute; top: 0; right: 0; display: inline-block; overflow: visible; width: auto; height: auto; margin: 0; padding: 0; vertical-align: inherit; border-width: 0; background-color: transparent; direction: rtl } .box-product .img-wrapper .tags-left { left: 0; direction: ltr } .box-product .img-wrapper .tags > .label-tags { display: table; margin: 1px 0 0 0; text-align: left; opacity: .92; filter: alpha(opacity=92); direction: ltr } .box-product .img-wrapper .tags > .label-tags:hover { opacity: 1; filter: alpha(opacity=100) } .box-product .img-wrapper .tags > .label-tags a:hover { text-decoration: none } .box-product .img-wrapper > .option { position: absolute; top: auto; right: 0; bottom: -30px; left: 0; width: auto; height: 28px; -webkit-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; text-align: center; vertical-align: middle; background-color: rgba(0, 0, 0, .55) } .box-product .img-wrapper .option > a { font-size: 18px; font-weight: normal; display: inline-block; padding: 0 4px; color: #fff } .box-product .img-wrapper:hover > .option { top: auto; bottom: 0 } .box-product h6 a { line-height: 1.4 } .price { margin-bottom: 5px; color: #f44336 } .price .price-down { margin-left: 5px; padding: 2px 5px; color: #fff; background: #f44336 } .price-old { position: relative; display: inline-block; margin-right: 7px; color: #666 } .price-old:before { position: absolute; width: 100%; height: 60%; content: ''; border-bottom: 1px solid #666 } .rating i { color: #fc0 } .product-sorting-bar { border: 1px solid #e5e5e5 } /* -------------------------------------------------------------- End of Box Product -------------------------------------------------------------- */
Dey-Dey

Box Product List

Dey-Dey
  Aug 3rd, 16:22
34 Views