block products

This bootstrap snippet block products 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: block,product

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container bootstrap snippet">
    <div class="row">
       <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="wp-block product">
                <figure>
                    <img alt="" src="http://preview.webpixels.ro/boomerang-v2.0.1/images/prv/product-1.jpg" class="img-responsive img-center">
                </figure>
                <h2 class="product-title"><a href="">Nikon Coolpix L320</a></h2>
                <p>
                Lorem ipsum dolor sit amet consectetur adipisg elitm Ut tincidunt purus iaculis
                </p>
                <div class="wp-block-footer">
                    <span class="price pull-left">$233.33</span>
                    <a href="#" class="btn btn-sm btn-info btn-icon btn-cart pull-right">
                        <i class="fa fa-cart-plus"></i>
                        <span>Add to cart</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="wp-block product">
                <figure>
                    <img alt="" src="http://preview.webpixels.ro/boomerang-v2.0.1/images/prv/product-2.jpg" class="img-responsive img-center">
                </figure>
                <h2 class="product-title"><a href="">Nikon Coolpix L320</a></h2>
                <p>
                Lorem ipsum dolor sit amet consectetur adipisg elitm Ut tincidunt purus iaculis
                </p>
                <div class="wp-block-footer">
                    <span class="price pull-left">$233.33</span>
                    <a href="#" class="btn btn-sm btn-info btn-icon btn-cart pull-right">
                        <i class="fa fa-cart-plus"></i>
                        <span>Add to cart</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="wp-block product">
                <figure>
                    <img alt="" src="http://preview.webpixels.ro/boomerang-v2.0.1/images/prv/product-3.jpg" class="img-responsive img-center">
                </figure>
                <h2 class="product-title"><a href="">Nikon Coolpix L320</a></h2>
                <p>
                Lorem ipsum dolor sit amet consectetur adipisg elitm Ut tincidunt purus iaculis
                </p>
                <div class="wp-block-footer">
                    <span class="price pull-left">$233.33</span>
                    <a href="#" class="btn btn-sm btn-info btn-icon btn-cart pull-right">
                        <i class="fa fa-cart-plus"></i>
                        <span>Add to cart</span>
                    </a>
                </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

                    
.wp-block {
  margin: 0 0 15px 0;
  padding:15px;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  position: relative;
  cursor: default;
  border-radius: 2px;
}

.wp-block.product {
  background: #fff;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #e0eded;
}

.wp-block:before, .wp-block:after {
  display: table;
  content: "";
}

.wp-block.product figure {
  padding-bottom: 15px;
  border-bottom: 1px solid #e0eded;
}

.img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-block.product .product-title {
  margin: 10px 0 0 0;
  padding: 0;
  border-bottom: 0;
}

h2 {
  font-size: 25px;
}

.wp-block.product .product-title a {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.wp-block.product p {
  color: #616161;
}

.wp-block.product .wp-block-footer {
  border-top: 1px solid #e0eded;
  padding-top: 15px;
  padding-bottom:25px;
}

.wp-block.product .price {
  padding: 4px 0;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.btn-base {
  color: #fff !important;
  background-color: #3498db;
  border: 1px solid;
  border-color: #258cd1;
}

.btn-icon {
  position: relative;
}

.btn-icon.btn-sm span, .btn-icon.btn-sm input {
  padding-left: 35px;
}

.btn {
    border-radius: 0;
    border: 0;
    border-bottom: 4px solid #CCCCCC;
    margin:0;
    -webkit-box-shadow: 0 5px 5px -6px rgba(0,0,0,.3);
       -moz-box-shadow: 0 5px 5px -6px rgba(0,0,0,.3);
            box-shadow: 0 5px 5px -6px rgba(0,0,0,.3);
}

.btn-info {
    background-color: #39b3d7;
    border-color: #348fd2;
    text-shadow: 1px 1px 0 #238ed5;
}                
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: May 16th 2015, 23:37

Views: 3.7K