Bootstrap snippet: Shop cell phones

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: shop,checkout



<div class="shop-items blocky"> <div class="container"> <div class="row"> <!-- Item #1 --> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="item"> <!-- Use the below link to put HOT icon --> <div class="item-icon"><span>HOT</span></div> <!-- Item image --> <div class="item-image"> <a href="single-item.html"><img src="http://ashobiz.asia/wrapbootstrap/olsonkart27/img/items/2.png" alt="" class="img-responsive"></a> </div> <!-- Item details --> <div class="item-details"> <!-- Name --> <h5><a href="single-item.html">HTC One V</a></h5> <div class="clearfix"></div> <!-- Para. Note more than 2 lines. --> <p>Something about the product goes here. Not More than 2 lines.</p> <hr> <!-- Price --> <div class="item-price pull-left">$360</div> <!-- Add to cart --> <div class="pull-right"><a href="#" class="btn btn-danger btn-sm">Add to Cart</a></div> <div class="clearfix"></div> </div> </div> </div> <!-- Item #2 --> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="item"> <!-- Item image --> <div class="item-image"> <a href="single-item.html"><img src="http://ashobiz.asia/wrapbootstrap/olsonkart27/img/items/3.png" alt="" class="img-responsive"></a> </div> <!-- Item details --> <div class="item-details"> <!-- Name --> <h5><a href="single-item.html">Dell One V</a></h5> <!-- Para. Note more than 2 lines. --> <p>Something about the product goes here. Not More than 2 lines.</p> <hr> <!-- Price --> <div class="item-price pull-left">$264</div> <!-- Add to cart --> <div class="pull-right"><a href="#" class="btn btn-danger btn-sm">Add to Cart</a></div> <div class="clearfix"></div> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="item"> <!-- Item image --> <div class="item-image"> <a href="single-item.html"><img src="http://ashobiz.asia/wrapbootstrap/olsonkart27/img/items/4.png" alt="" class="img-responsive"></a> </div> <!-- Item details --> <div class="item-details"> <!-- Name --> <h5><a href="single-item.html">Cannon One V</a></h5> <!-- Para. Note more than 2 lines. --> <p>Something about the product goes here. Not More than 2 lines.</p> <hr> <!-- Price --> <div class="item-price pull-left">$160</div> <!-- Add to cart --> <div class="pull-right"><a href="#" class="btn btn-danger btn-sm">Add to Cart</a></div> <div class="clearfix"></div> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="item"> <!-- Item image --> <div class="item-image"> <a href="single-item.html"><img src="http://ashobiz.asia/wrapbootstrap/olsonkart27/img/items/5.png" alt="" class="img-responsive"></a> </div> <!-- Item details --> <div class="item-details"> <!-- Name --> <h5><a href="single-item.html">Apple One V</a></h5> <!-- Para. Note more than 2 lines. --> <p>Something about the product goes here. Not More than 2 lines.</p> <hr> <!-- Price --> <div class="item-price pull-left">$420</div> <!-- Add to cart --> <div class="pull-right"><a href="#" class="btn btn-danger btn-sm">Add to Cart</a></div> <div class="clearfix"></div> </div> </div> </div> </div> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="item"> <!-- Item image --> <div class="item-image"> <a href="single-item.html"><img src="http://ashobiz.asia/wrapbootstrap/olsonkart27/img/items/6.png" alt="" class="img-responsive"></a> </div> <!-- Item details --> <div class="item-details"> <!-- Name --> <h5><a href="single-item.html">Samsung One V</a></h5> <!-- Para. Note more than 2 lines. --> <p>Something about the product goes here. Not More than 2 lines.</p> <hr> <!-- Price --> <div class="item-price pull-left">$300</div> <!-- Add to cart --> <div class="pull-right"><a href="#" class="btn btn-danger btn-sm">Add to Cart</a></div> <div class="clearfix"></div> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="item"> <div class="item-icon"><span>HOT</span></div> <!-- Item image --> <div class="item-image"> <a href="single-item.html"><img src="http://ashobiz.asia/wrapbootstrap/olsonkart27/img/items/7.png" alt="" class="img-responsive"></a> </div> <!-- Item details --> <div class="item-details"> <!-- Name --> <h5><a href="single-item.html">Micromax One V</a></h5> <!-- Para. Note more than 2 lines. --> <p>Something about the product goes here. Not More than 2 lines.</p> <hr> <!-- Price --> <div class="item-price pull-left">$240</div> <!-- Add to cart --> <div class="pull-right"><a href="#" class="btn btn-danger btn-sm">Add to Cart</a></div> <div class="clearfix"></div> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="item"> <!-- Item image --> <div class="item-image"> <a href="single-item.html"><img src="http://ashobiz.asia/wrapbootstrap/olsonkart27/img/items/8.png" alt="" class="img-responsive"></a> </div> <!-- Item details --> <div class="item-details"> <!-- Name --> <h5><a href="single-item.html">Nokia One V</a></h5> <!-- Para. Note more than 2 lines. --> <p>Something about the product goes here. Not More than 2 lines.</p> <hr> <!-- Price --> <div class="item-price pull-left">$50</div> <!-- Add to cart --> <div class="pull-right"><a href="#" class="btn btn-danger btn-sm">Add to Cart</a></div> <div class="clearfix"></div> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="item"> <!-- Item image --> <div class="item-image"> <a href="single-item.html"><img src="http://ashobiz.asia/wrapbootstrap/olsonkart27/img/items/9.png" alt="" class="img-responsive"></a> </div> <!-- Item details --> <div class="item-details"> <!-- Name --> <h5><a href="single-item.html">Sony One V</a></h5> <!-- Para. Note more than 2 lines. --> <p>Something about the product goes here. Not More than 2 lines.</p> <hr> <!-- Price --> <div class="item-price pull-left">$100</div> <!-- Add to cart --> <div class="pull-right"><a href="#" class="btn btn-danger btn-sm">Add to Cart</a></div> <div class="clearfix"></div> </div> </div> </div> </div> </div> </div>
body{margin-top:20px;} /* Items */ .shop-items{ margin: 20px 0px; } .shop-items .breadcrumb{ background:none; padding:0px; margin:0px; font-weight:bold; padding-bottom:7px; border-bottom:1px dashed #eee; } .shop-items .item{ position:relative; max-height: 320px; max-width: 250px; margin: 10px auto; padding: 20px 10px 10px 10px; background:#fff; border:1px solid #f2f2f2; border-right: 2px solid #eee; border-bottom:2px solid #eee; border-radius:7px; } .shop-items hr{ margin: 5px 0px; } .shop-items .item-icon{ position:absolute; top:5px; left:7px; } .shop-items .item-icon span{ width:35px; height:20px; background:#16cbe6; display:inline-block; color:#fff; text-align:center; font-size:10px; font-weight:bold; line-height:18px; border-radius:5px; } .shop-items .item-image{ max-height: 150px; } .shop-items .item-image img{ padding: 5px 0px; height: 140px; width: auto; display: block; margin: 0 auto; } .shop-items .item-details h5{ text-align: center; font-weight:bold; font-size:16px; line-height:25px; } .shop-items .item-details h5 a{ color: #777; } .shop-items .item-details h5 a:hover{ color:#555; border:0px; } .shop-items .item-details h5 a:hover{ text-decoration: none; } .shop-items .item-details p{ text-align: center; margin-bottom:10px; color:#888; font-size:13px; line-height:20px; } .shop-items .item-price{ margin: 7px 5px; display: inline-block; border-radius: 5px; font-size: 13px; font-weight: bold; background:#16cbe6; color:#fff; width:40px; text-align:center; } .shop-items .btn{ margin-top:5px; }
Dey-Dey

Shop cell phones

Dey-Dey
  Aug 5th, 23:18
29 Views