Shop cell phones

This bootstrap snippet called "Shop cell phones" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: shop,checkout

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<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>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

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;
}


                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Aug 5th 2016, 23:18

Views: 145