<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 id="admyCarousel" class="carousel slide" data-interval="false" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="item_ad_div"> <div class="items_ad"> <div class="col"> <div class="col-sm-12"> <img src="http://aparanjisilks.in/uploads/product_photo/103/d44fa2429fb3e56047d3b24f2fc53a7a.jpg" class="img-responsive"/> </div> <div class="col-sm-12"> <h3 class="ad_rate"> ₨ 12290.00</h3> <button class="ad_view">View</button> </div> </div> <div class="col"> <div class="col-sm-12"> <img src="http://aparanjisilks.in/uploads/product_photo/103/d44fa2429fb3e56047d3b24f2fc53a7a.jpg" class="img-responsive"/> </div> <div class="col-sm-12"> <h3 class="ad_rate"> ₨ 12290.00</h3> <button class="ad_view">View</button> </div> </div> <div class="col"> <div class="col-sm-12"> <img src="http://aparanjisilks.in/uploads/product_photo/103/d44fa2429fb3e56047d3b24f2fc53a7a.jpg" class="img-responsive"/> </div> <div class="col-sm-12"> <h3 class="ad_rate"> ₨ 12290.00</h3> <button class="ad_view">View</button> </div> </div> </div> </div> </div> <div class="item "> <div class="item_ad_div"> <div class="items_ad"> <div class="col"> <div class="col-sm-12"> <img src="http://aparanjisilks.in/uploads/product_photo/103/d44fa2429fb3e56047d3b24f2fc53a7a.jpg" class="img-responsive"/> </div> <div class="col-sm-12"> <h3 class="ad_rate"> ₨ 12290.00</h3> <button class="ad_view">View</button> </div> </div> <div class="col"> <div class="col-sm-12"> <img src="http://aparanjisilks.in/uploads/product_photo/103/d44fa2429fb3e56047d3b24f2fc53a7a.jpg" class="img-responsive"/> </div> <div class="col-sm-12"> <h3 class="ad_rate"> ₨ 12290.00</h3> <button class="ad_view">View</button> </div> </div> <div class="col"> <div class="col-sm-12"> <img src="http://aparanjisilks.in/uploads/product_photo/103/d44fa2429fb3e56047d3b24f2fc53a7a.jpg" class="img-responsive"/> </div> <div class="col-sm-12"> <h3 class="ad_rate"> ₨ 12290.00</h3> <button class="ad_view">View</button> </div> </div> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#admyCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#admyCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>

.item_ad_div{width:50%; margin:auto;} .items_ad{display:flex; justify-content:space-between ; margin:30px 0;} .col{background:#fff; box-shadow:0 0 3px #aaa; box-sizing:border-box; flex-basis:30%; text-align:center;} .ad_rate{color:#15C552; font-weight:600; font-size:17px;} .ad_view{padding:2px 7px;background:#D8B569; border:none; border-radius:5px; font-size:12px; color:#fff; margin:5px 0;} @media(min-width:900px){ .items_ad{display:flex; justify-content:space-between ;} }