<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <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 post-img-content"> <img src="http://app-hb.cloudapp.net:81/portfolio_images/54ccc12740d590cd9e0d8a27/AshroyProject_desktop.jpg" class="img-responsive" alt="a" /> <span class="post-title"><b>Locality in City</b><br /> </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"> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-thumbs-o-up"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Shortlist</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Full details</a></p> </div> <div class="clearfix"> </div> </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; height: 270px; } .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; } /*For Text over Image*/ .post-title { display: table-cell; vertical-align: bottom; z-index: 2; position: relative; } .post-title b { background-color: rgba(51, 51, 51, 0.58); display: inline-block; margin-bottom: 5px; color: #FFF; padding: 10px 15px; margin-top: 5px; } .post-img-content { height: 300px; position: relative; } .post-img-content img { position: absolute; } /*For Text over Image Ends her*/