Bootstrap snippet: Shop 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.
tags: product,list



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="col-sm-3 hidden-xs"> <div class="list-group"> <a href="#" class="list-group-item">Shoes</a> <a href="#" class="list-group-item active">Bags</a> <a href="#" class="list-group-item">- Satchel</a> <a href="#" class="list-group-item">- Tote</a> <a href="#" class="list-group-item">- Shoulder</a> <a href="#" class="list-group-item">- Clutch &amp; Mini</a> <a href="#" class="list-group-item">- Crossbody</a> <a href="#" class="list-group-item">- Backpack</a> <a href="#" class="list-group-item">- Exotic</a> <a href="#" class="list-group-item">Accessories</a> <a href="#" class="list-group-item">Travel</a> <a href="#" class="list-group-item">Jewelry</a> <a href="#" class="list-group-item">Decor</a> </div> <div class="filter panel panel-default"> <div class="panel-heading">Refine Search</div> <div class="list-group"> <a class="list-group-item">Color</a> <div class="list-group-item"> <div class="checkbox"> <label> <input type="checkbox" name="black" value="black"> Black </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="brown" value="brown" checked="checked"> Brown </label> </div> </div> </div> <div class="panel-footer text-right"> <button type="button" id="button-filter" class="btn btn-default">Refine Search</button> </div> </div> <div class="product-sidebar"> <h3>Featured</h3> <!-- Featured Product Item --> <div class="product-item"> <div class="image"> <a href="#"><img src="http://lorempixel.com/400/400/technics/1/" alt="Product 4"></a> </div> <div class="name"> <a href="#">Leather laptop bag</a> </div> <div class="price"> <span>$722.00</span> </div> </div> <!--/ Featured Product Item --> <!-- Featured Product Item --> <div class="product-item"> <div class="image"> <a href="#"><img src="http://lorempixel.com/400/400/technics/1/" alt="Product 2"></a> </div> <div class="name"> <a href="#">Leather laptop bag navy</a> </div> <div class="price"> <span class="price-new">$866.00</span> </div> </div> <!--/ Featured Product Item --> <!-- Featured Product Item --> <div class="product-item"> <div class="image"> <a href="#"><img src="http://lorempixel.com/400/400/technics/1/" alt="Product 3"></a> </div> <div class="name"> <a href="#">Soft leather laptop bag</a> </div> <div class="price"> <span>$962.00</span> </div> </div> <!--/ Featured Product Item --> <!-- Featured Product Item --> <div class="product-item"> <div class="image"> <a href="#"><img src="http://lorempixel.com/400/400/technics/1/" alt="Product 1"></a> </div> <div class="name"> <a href="#">Leather laptop bag orange</a> </div> <div class="price"> <span>$866.00</span> </div> </div> <!--/ Featured Product Item --> </div> </div> <div class="col-sm-9"> <div class="row"> <div class="col-sm-4"> <div class="btn-group hidden-xs"> <button type="button" id="list-view" class="btn btn-default" data-toggle="tooltip" data-container="body" title="List View"><i class="fa fa-th-list"></i></button> <button type="button" id="grid-view" class="btn btn-default" data-toggle="tooltip" data-container="body" title="Grid View"><i class="fa fa-th"></i></button> </div> </div> <div class="col-sm-2 text-right"> <label class="control-label" for="input-sort">Sort By:</label> </div> <div class="col-sm-3 text-right"> <select id="input-sort" class="form-control"> <option value="" selected="selected">Default</option> <option value="">Name</option> <option value="">Date</option> </select> </div> <div class="col-sm-1 text-right"> <label class="control-label" for="input-limit">Show:</label> </div> <div class="col-sm-2 text-right"> <select id="input-limit" class="form-control"> <option value="" selected="selected">9</option> <option value="">15</option> <option value="">25</option> <option value="">50</option> <option value="">100</option> </select> </div> </div> <br> <div class="row"> <!-- Product Item --> <div class="product-list col-xs-12"> <div class="product-item"> <div class="item-overlay"> <div class="clickable"> <a href="#">Leather laptop bag navy</a> </div> </div> <div class="image"> <a href="#"><img src="http://lorempixel.com/400/400/technics/1/" alt="Product 1"></a> </div> <div class="caption"> <div class="name"> <a href="#">Leather laptop bag navy</a> </div> <div class="description"> <p>Stop your co-workers in their tracks with the stunning new 30-inch diagonal HP LP3065 Flat Panel..</p> </div> <div class="rating"> <span class="fa fa-stack"><i class="fa fa-star"></i></span> <span class="fa fa-stack"><i class="fa fa-star"></i></span> <span class="fa fa-stack"><i class="fa fa-star"></i></span> <span class="fa fa-stack"><i class="fa fa-star"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o"></i></span> </div> <div class="price"> <span>$866.00</span> </div> <div class="cart"> <button type="button" class="btn btn-primary">Add to Cart</button> </div> </div> <button type="button" class="btn btn-default wishlist" data-toggle="tooltip" data-placement="right" title="Wishlist"><i class="fa fa-heart"></i></button> <button type="button" class="btn btn-default compare" data-toggle="tooltip" data-placement="right" title="Compare"><i class="fa fa-circle-o"></i></button> </div> </div> <!--/ Product Item --> <!-- Product Item --> <div class="product-list col-xs-12"> <div class="product-item"> <div class="item-overlay"> <div class="clickable"> <a href="#">Waxed canvas laptop bag olive</a> </div> </div> <div class="sale-tag"> <span>SALE</span> </div> <div class="image"> <a href="#"><img src="http://lorempixel.com/400/400/technics/1/" alt="Product 2"></a> </div> <div class="caption"> <div class="name"> <a href="#">Waxed canvas laptop bag olive</a> </div> <div class="description"> <p>Intel Core 2 Duo processor Powered by an Intel Core 2 Duo processor at speeds up to 2.1..</p> </div> <div class="price"> <span class="price-new">$830.00</span> </div> <div class="cart"> <button type="button" class="btn btn-primary">Add to Cart</button> </div> </div> <button type="button" class="btn btn-default wishlist" data-toggle="tooltip" data-placement="right" title="Wishlist"><i class="fa fa-heart"></i></button> <button type="button" class="btn btn-default compare" data-toggle="tooltip" data-placement="right" title="Compare"><i class="fa fa-circle-o"></i></button> </div> </div> <!--/ Product Item --> <!-- Product Item --> <div class="product-list col-xs-12"> <div class="product-item"> <div class="item-overlay"> <div class="clickable"> <a href="#">Leather laptop bag orange</a> </div> </div> <div class="image"> <a href="#"><img src="http://lorempixel.com/400/400/technics/1/" alt="Product 3"></a> </div> <div class="caption"> <div class="name"> <a href="#">Leather laptop bag orange</a> </div> <div class="description"> <p>MacBook Air is ultrathin, ultraportsble, and ultra unlike anything else. But you don't lose inche..</p> </div> <div class="rating"> <span class="fa fa-stack"><i class="fa fa-star"></i></span> <span class="fa fa-stack"><i class="fa fa-star"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o"></i></span> </div> <div class="price"> <span>$866.00</span> </div> <div class="cart"> <button type="button" class="btn btn-primary">Add to Cart</button> </div> </div> <button type="button" class="btn btn-default wishlist" data-toggle="tooltip" data-placement="right" title="Wishlist"><i class="fa fa-heart"></i></button> <button type="button" class="btn btn-default compare" data-toggle="tooltip" data-placement="right" title="Compare"><i class="fa fa-circle-o"></i></button> </div> </div> <!--/ Product Item --> <!-- Product Item --> <div class="product-list col-xs-12"> <div class="product-item"> <div class="item-overlay"> <div class="clickable"> <a href="#">Waxed canvas laptop bag navy</a> </div> </div> <div class="sale-tag"> <span>SALE</span> </div> <div class="image"> <a href="#"><img src="http://lorempixel.com/400/400/technics/1/" alt="Product 4"></a> </div> <div class="caption"> <div class="name"> <a href="#">Waxed canvas laptop bag navy</a> </div> <div class="description"> <p>Latest Intel mobile architecture Powered by the most advanced mobile processors..</p> </div> <div class="price"> <span class="price-new">$1178.00</span> </div> <div class="cart"> <button type="button" class="btn btn-primary">Add to Cart</button> </div> </div> <button type="button" class="btn btn-default wishlist" data-toggle="tooltip" data-placement="right" title="Wishlist"><i class="fa fa-heart"></i></button> <button type="button" class="btn btn-default compare" data-toggle="tooltip" data-placement="right" title="Compare"><i class="fa fa-circle-o"></i></button> </div> </div> <!--/ Product Item --> <!-- Product Item --> <div class="product-list col-xs-12"> <div class="product-item"> <div class="item-overlay"> <div class="clickable"> <a href="#">Leather laptop bag navy</a> </div> </div> <div class="image"> <a href="#"><img src="http://lorempixel.com/400/400/technics/1/" alt="Product 1"></a> </div> <div class="caption"> <div class="name"> <a href="#">Leather laptop bag navy</a> </div> <div class="description"> <p>Stop your co-workers in their tracks with the stunning new 30-inch diagonal HP LP3065 Flat Panel..</p> </div> <div class="rating"> <span class="fa fa-stack"><i class="fa fa-star"></i></span> <span class="fa fa-stack"><i class="fa fa-star"></i></span> <span class="fa fa-stack"><i class="fa fa-star"></i></span> <span class="fa fa-stack"><i class="fa fa-star"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o"></i></span> </div> <div class="price"> <span>$866.00</span> </div> <div class="cart"> <button type="button" class="btn btn-primary">Add to Cart</button> </div> </div> <button type="button" class="btn btn-default wishlist" data-toggle="tooltip" data-placement="right" title="Wishlist"><i class="fa fa-heart"></i></button> <button type="button" class="btn btn-default compare" data-toggle="tooltip" data-placement="right" title="Compare"><i class="fa fa-circle-o"></i></button> </div> </div> <!--/ Product Item --> <!-- Product Item --> <div class="product-list col-xs-12"> <div class="product-item"> <div class="item-overlay"> <div class="clickable"> <a href="#">Waxed canvas laptop bag olive</a> </div> </div> <div class="sale-tag"> <span>SALE</span> </div> <div class="image"> <a href="#"><img src="http://lorempixel.com/400/400/technics/1/" alt="Product 2"></a> </div> <div class="caption"> <div class="name"> <a href="#">Waxed canvas laptop bag olive</a> </div> <div class="description"> <p>Intel Core 2 Duo processor Powered by an Intel Core 2 Duo processor at speeds up to 2.1..</p> </div> <div class="price"> <span class="price-new">$830.00</span> </div> <div class="cart"> <button type="button" class="btn btn-primary">Add to Cart</button> </div> </div> <button type="button" class="btn btn-default wishlist" data-toggle="tooltip" data-placement="right" title="Wishlist"><i class="fa fa-heart"></i></button> <button type="button" class="btn btn-default compare" data-toggle="tooltip" data-placement="right" title="Compare"><i class="fa fa-circle-o"></i></button> </div> </div> <!--/ Product Item --> <!-- Product Item --> <div class="product-list col-xs-12"> <div class="product-item"> <div class="item-overlay"> <div class="clickable"> <a href="#">Leather laptop bag orange</a> </div> </div> <div class="image"> <a href="#"><img src="http://lorempixel.com/400/400/technics/1/" alt="Product 3"></a> </div> <div class="caption"> <div class="name"> <a href="#">Leather laptop bag orange</a> </div> <div class="description"> <p>MacBook Air is ultrathin, ultraportsble, and ultra unlike anything else. But you don't lose inche..</p> </div> <div class="rating"> <span class="fa fa-stack"><i class="fa fa-star"></i></span> <span class="fa fa-stack"><i class="fa fa-star"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o"></i></span> </div> <div class="price"> <span>$866.00</span> </div> <div class="cart"> <button type="button" class="btn btn-primary">Add to Cart</button> </div> </div> <button type="button" class="btn btn-default wishlist" data-toggle="tooltip" data-placement="right" title="Wishlist"><i class="fa fa-heart"></i></button> <button type="button" class="btn btn-default compare" data-toggle="tooltip" data-placement="right" title="Compare"><i class="fa fa-circle-o"></i></button> </div> </div> <!--/ Product Item --> <!-- Product Item --> <div class="product-list col-xs-12"> <div class="product-item"> <div class="item-overlay"> <div class="clickable"> <a href="#">Waxed canvas laptop bag navy</a> </div> </div> <div class="sale-tag"> <span>SALE</span> </div> <div class="image"> <a href="#"><img src="http://lorempixel.com/400/400/technics/1/" alt="Product 4"></a> </div> <div class="caption"> <div class="name"> <a href="#">Waxed canvas laptop bag navy</a> </div> <div class="description"> <p>Latest Intel mobile architecture Powered by the most advanced mobile processors..</p> </div> <div class="price"> <span class="price-new">$1178.00</span> </div> <div class="cart"> <button type="button" class="btn btn-primary">Add to Cart</button> </div> </div> <button type="button" class="btn btn-default wishlist" data-toggle="tooltip" data-placement="right" title="Wishlist"><i class="fa fa-heart"></i></button> <button type="button" class="btn btn-default compare" data-toggle="tooltip" data-placement="right" title="Compare"><i class="fa fa-circle-o"></i></button> </div> </div> <!--/ Product Item --> <!-- Product Item --> <div class="product-list col-xs-12"> <div class="product-item"> <div class="item-overlay"> <div class="clickable"> <a href="#">Leather laptop bag navy</a> </div> </div> <div class="image"> <a href="#"><img src="http://lorempixel.com/400/400/technics/1/" alt="Product 1"></a> </div> <div class="caption"> <div class="name"> <a href="#">Leather laptop bag navy</a> </div> <div class="description"> <p>Stop your co-workers in their tracks with the stunning new 30-inch diagonal HP LP3065 Flat Panel..</p> </div> <div class="rating"> <span class="fa fa-stack"><i class="fa fa-star"></i></span> <span class="fa fa-stack"><i class="fa fa-star"></i></span> <span class="fa fa-stack"><i class="fa fa-star"></i></span> <span class="fa fa-stack"><i class="fa fa-star"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o"></i></span> </div> <div class="price"> <span>$866.00</span> </div> <div class="cart"> <button type="button" class="btn btn-primary">Add to Cart</button> </div> </div> <button type="button" class="btn btn-default wishlist" data-toggle="tooltip" data-placement="right" title="Wishlist"><i class="fa fa-heart"></i></button> <button type="button" class="btn btn-default compare" data-toggle="tooltip" data-placement="right" title="Compare"><i class="fa fa-circle-o"></i></button> </div> </div> <!--/ Product Item --> </div> </div>
body{ margin-top:20px; background: #edf0f5; } .product-list .product-item { margin-bottom: 20px } .product-list .product-item .image { float: left; padding-right: 30px; margin-bottom: 20px } .product-list .product-item .image img { max-width: 263px } .product-list .product-item .name a { text-transform: uppercase } .product-list .product-item .description { margin: 10px 0 20px } .product-list .product-item .description p { line-height: 21px } .product-list .product-item .rating { padding: 0 0 11px } .product-list .product-item .price { margin-bottom: 10px } .product-list .product-item .clickable a, .product-list .product-item .sale-tag { display: none } .product-list .product-item .btn-primary { margin: 0 0 20px } .product-sidebar { width: 100%; overflow: auto } .product-sidebar .product-item { position: relative; display: block; width: 100%; margin: 0 0 10px; padding: 10px; background: #fff; border-radius: 3px; box-shadow: 0 1px 2px 0 #ccd1d9; float: left } .product-sidebar .product-item .image { display: block; width: 90px; height: 90px; float: left; margin: 0 10px 0 0; padding-bottom: 0 } .product-sidebar .product-item .image img, .thumbnails img { width: 100% } .product-sidebar .product-item .name { display: block; margin: 9px 0 2px; line-height: 1pc; float: none } .product-sidebar .product-item .price { display: block; color: #aab2bd; font-weight: 700; float: none } .showcase { margin-bottom: 30px; -webkit-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out } .showcase:hover { zoom: 1; filter: alpha(opacity=75); opacity: .75 } .fa-stack { font-size: 6px; } .fa-star, .fa-star-o { color: #ffce54; font-size: 14px; } .product-item a { display: block; color: #434a54; font-weight: 700; } .product-list .product-item .description p { line-height: 21px; } .filter .panel-heading { font-weight: 700; background: #fff; border-color: #e4e7ec; } .filter .panel-footer, .filter .panel-heading { font-weight: 700; background: #fff; border-color: #e4e7ec; } .list-group a.list-group-item.active, .list-group a.list-group-item.active:hover { color: #434a54; background-color: #f5f7fa; border-color: #f5f7fa; border-top: 1px solid #d6dadf; border-bottom: 1px solid #d6dadf; }
Dey-Dey

Shop Product List

Dey-Dey
  Oct 16th, 21:36
14 Views