Related Producs List

Bootstrap snippet. Related Producs List, this snippet 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: products,list

HTML code

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row">
    <!-- Product Item -->
    <div class="product-grid col-xs-12 col-sm-6 col-md-3">
      <div class="product-item">
        <div class="image">
          <a href="#"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Product 1"></a>
        </div>
        <div class="caption">
          <div class="name text-center">
            <a href="#">Product 1</a>
          </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-grid col-xs-12 col-sm-6 col-md-3">
      <div class="product-item">
        <div class="sale-tag">
          <span>SALE</span>
        </div>
        <div class="image">
          <a href=""><img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Product 2"></a>
        </div>
        <div class="caption">
          <div class="name text-center">
            <a href="#">Product 2</a>
          </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-grid col-xs-12 col-sm-6 col-md-3">
      <div class="product-item">
        <div class="image">
          <a href="#"><img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Product 3"></a>
        </div>
        <div class="caption">
          <div class="name text-center">
            <a href="#">Product 3</a>
          </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-grid col-xs-12 col-sm-6 col-md-3">
      <div class="product-item">
        <div class="sale-tag">
          <span>SALE</span>
        </div>
        <div class="image">
          <a href="#"><img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="Product 4"></a>
        </div>
        <div class="caption">
          <div class="name text-center">
            <a href="product.html">Product 4</a>
          </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>
  </div>

CSS code

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

body{
    margin-top:20px;
    background: #edf0f5;    
}

product-item a {
    display: block;
    color: #434a54;
    font-weight: 700
}

.product-item a:hover {
    color: #37bc9b
}

.product-item .price {
    color: #aab2bd;
    font-weight: 700
}

.product-item .price .price-new {
    color: #37bc9b
}

.product-grid .product-item {
    position: relative;
    width: 100%;
    border: none;
    padding-bottom: 4pc;
    margin-bottom: 30px;
    border-radius: 3px;
    box-shadow: 0 1px 2px 0 #ccd1d9;
    overflow: hidden;
    z-index: 1
}

.product-grid .product-item img {
    width: 100%
}

.product-grid .product-item .item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 0 0;
    border-radius: 3px;
    -webkit-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out
}

.product-grid .product-item:hover .item-overlay {
    background: rgba(170, 178, 189, .42)
}

.product-grid .product-item .clickable a {
    display: block;
    padding: 100%;
    z-index: 9
}

.product-grid .product-item .caption {
    position: absolute;
    bottom: -87pt;
    display: block;
    min-width: 100%;
    min-height: 180px;
    padding: 6px 15px;
    margin: 0;
    background: #fff;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    z-index: 1
}

.product-grid .product-item .caption .cart {
    display: block;
    padding: 27px 0 0;
    clear: both
}

.product-grid .product-item .caption .btn-primary {
    width: 100%;
    color: #fff;
    background: #37bc9b;
    border: 1px solid #37bc9b;
    -webkit-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s
}

.product-grid .product-item .caption .btn-primary:hover {
    color: #434a54;
    background: 0 0;
    border: 1px solid #656d78
}

.product-grid .product-item .caption .name a,
.product-grid .product-item .caption .price {
    text-align: center
}

.product-grid .product-item .caption .name a {
    text-transform: lowercase;
    line-height: 1pc;
    margin: 9px 0 0
}

.product-grid .product-item:hover .caption {
    -webkit-transform: translatey(-83px);
    transform: translatey(-83px)
}

.product-grid .product-item .compare,
.product-grid .product-item .wishlist {
    color: #fff;
    display: none;
    margin-bottom: 3px;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    padding: 0;
    border: none;
    -webkit-transition: .3s;
    transition: .3s
}

.product-grid .product-item .compare a,
.product-grid .product-item .wishlist a {
    display: block;
    color: #fff;
    font-size: 14px
}

.product-grid .product-item .wishlist {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #37bc9b
}

.product-grid .product-item .wishlist:hover {
    background: #33b091
}

.product-grid .product-item .compare {
    position: absolute;
    top: 3pc;
    left: 15px;
    background: #434a54
}

.product-grid .product-item .compare:hover {
    background: #393f47
}

.product-grid .product-item:hover .compare,
.product-grid .product-item:hover .wishlist {
    display: block
}

.product-grid .product-item .sale-tag {
    width: 50px;
    height: 75pt;
    background: #37bc9b;
    position: absolute;
    top: -45px;
    right: -10px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.product-grid .product-item .sale-tag span {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    left: 2px;
    position: absolute;
    top: 3pc;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

@media (min-width:992px) {
    .product-grid .product-item {
        width: 213px
    }
}

@media (min-width:1200px) {
    .product-grid .product-item {
        width: 263px
    }
}
                                    

Similar snippets

Bootstrap snippet bs4 ecommerce products

bs4 ecommerce products

View

Bootstrap snippet card chat list

card chat list

View

Bootstrap snippet bs4 user card task list

bs4 user card task list

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Oct 16th 2016, 21:16

Views: 2.3K

Rated 5/5 based on 6 reviews