<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="row"> <div class="col-md-9"> <h3> Carousel Product Cart Slider</h3> </div> <div class="col-md-3"> <!-- Controls --> <div class="controls pull-right hidden-xs"> <a class="left fa fa-chevron-left btn btn-success" href="#carousel-example" data-slide="prev"></a><a class="right fa fa-chevron-right btn btn-success" href="#carousel-example" data-slide="next"></a> </div> </div> </div> <div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="carousel-item active"> <div class="row"> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Sample Product</h5> <h5 class="price-text-color"> $199.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Product Example</h5> <h5 class="price-text-color"> $249.99</h5> </div> <div class="rating hidden-sm col-md-6"> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Next Sample Product</h5> <h5 class="price-text-color"> $149.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Sample Product</h5> <h5 class="price-text-color"> $199.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> </div> </div> <div class="carousel-item"> <div class="row"> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Product with Variants</h5> <h5 class="price-text-color"> $199.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Grouped Product</h5> <h5 class="price-text-color"> $249.99</h5> </div> <div class="rating hidden-sm col-md-6"> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Product with Variants</h5> <h5 class="price-text-color"> $149.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Product with Variants</h5> <h5 class="price-text-color"> $199.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="row"> <div class="col-md-9"> <h3> Carousel Product Cart Slider</h3> </div> <div class="col-md-3"> <!-- Controls --> <div class="controls pull-right hidden-xs"> <a class="left fa fa-chevron-left btn btn-primary" href="#carousel-example-generic" data-slide="prev"></a><a class="right fa fa-chevron-right btn btn-primary" href="#carousel-example-generic" data-slide="next"></a> </div> </div> </div> <div id="carousel-example-generic" class="carousel slide hidden-xs" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-sm-4"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Sample Product</h5> <h5 class="price-text-color"> $199.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-4"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Product Example</h5> <h5 class="price-text-color"> $249.99</h5> </div> <div class="rating hidden-sm col-md-6"> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-4"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Next Sample Product</h5> <h5 class="price-text-color"> $149.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-4"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Product with Variants</h5> <h5 class="price-text-color"> $199.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-4"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Grouped Product</h5> <h5 class="price-text-color"> $249.99</h5> </div> <div class="rating hidden-sm col-md-6"> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-4"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Product with Variants</h5> <h5 class="price-text-color"> $149.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css); .col-item { border: 1px solid #E1E1E1; border-radius: 5px; background: #FFF; } .col-item .photo img { margin: 0 auto; width: 100%; } .col-item .info { padding: 10px; border-radius: 0 0 5px 5px; margin-top: 1px; } .col-item:hover .info { background-color: #F5F5DC; } .col-item .price { /*width: 50%;*/ float: left; margin-top: 5px; } .col-item .price h5 { line-height: 20px; margin: 0; } .price-text-color { color: #219FD1; } .col-item .info .rating { color: #777; } .col-item .rating { /*width: 50%;*/ float: left; font-size: 17px; text-align: right; line-height: 52px; margin-bottom: 10px; height: 52px; } .col-item .separator { border-top: 1px solid #E1E1E1; } .clear-left { clear: left; } .col-item .separator p { line-height: 20px; margin-bottom: 0; margin-top: 10px; text-align: center; } .col-item .separator p i { margin-right: 5px; } .col-item .btn-add { width: 50%; float: left; } .col-item .btn-add { border-right: 1px solid #E1E1E1; } .col-item .btn-details { width: 50%; float: left; padding-left: 10px; } .controls { margin-top: 20px; } [data-slide="prev"] { margin-right: 10px; }