<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 class="container"> <div class="col-sm-12"> <div class="bs-calltoaction bs-calltoaction-default"> <div class="row"> <div class="col-md-2 cta-contents"> <h1 class="cta-title"><img src="https://pbs.twimg.com/profile_images/786187830091407360/FUH63jZv.jpg" width="128" height="128"></h1> <div class="cta-desc"> <p>24% Cashback</p> <a href="#" class="btn btn-primary btn-block">Go to store</a> </div> </div> <div class="col-md-10 cta-button"> <h3>Flat Rs 10000 OFF on Exchange of Dell Premium Laptops</h3> <p>Flipkart is giving away flat Rs 10000 discount on Dell Premium Laptops which are listed on the landing page. Shop from high configuration laptops at Flipkart and take away flat Rs 10000 on exchange. </p> </div> </div> </div> </div> </div>

.bs-calltoaction{ position: relative; width:auto; padding: 15px 25px; border: 1px solid black; margin-top: 10px; margin-bottom: 10px; border-radius: 5px; } .bs-calltoaction > .row{ display:table; width: calc(100% + 30px); } .bs-calltoaction > .row > [class^="col-"], .bs-calltoaction > .row > [class*=" col-"]{ float:none; display:table-cell; vertical-align:top; } .cta-contents{ padding-top: 10px; padding-bottom: 10px; border-right:1px solid #cacaca; } .cta-title > img{ width:128px; height:128px; text-align:center; } .cta-title{ margin: 0 auto; padding: 0; } .cta-desc{ padding: 0; text-align:center; font-weight:bold; } .cta-desc p:last-child{ margin-bottom: 0; } .cta-button{ padding-top: 10px; padding-bottom: 10px; } @media (max-width: 991px){ .bs-calltoaction > .row{ display:block; width: auto; } .bs-calltoaction > .row > [class^="col-"], .bs-calltoaction > .row > [class*=" col-"]{ float:none; display:block; position: relative; } .cta-contents{ text-align: center; } } .bs-calltoaction.bs-calltoaction-default{ color: #333; background-color: #fff; border-color: #ccc; } .bs-calltoaction.bs-calltoaction-primary{ color: #fff; background-color: #337ab7; border-color: #2e6da4; } .bs-calltoaction.bs-calltoaction-info{ color: #fff; background-color: #5bc0de; border-color: #46b8da; } .bs-calltoaction.bs-calltoaction-success{ color: #fff; background-color: #5cb85c; border-color: #4cae4c; } .bs-calltoaction.bs-calltoaction-warning{ color: #fff; background-color: #f0ad4e; border-color: #eea236; } .bs-calltoaction.bs-calltoaction-danger{ color: #fff; background-color: #d9534f; border-color: #d43f3a; } .bs-calltoaction.bs-calltoaction-primary .cta-button .btn, .bs-calltoaction.bs-calltoaction-info .cta-button .btn, .bs-calltoaction.bs-calltoaction-success .cta-button .btn, .bs-calltoaction.bs-calltoaction-warning .cta-button .btn, .bs-calltoaction.bs-calltoaction-danger .cta-button .btn{ border-color:#fff; }

.bs-calltoaction{ position: relative; width:auto; padding: 15px 25px; border: 1px solid black; margin-top: 10px; margin-bottom: 10px; border-radius: 5px; } .bs-calltoaction > .row{ display:table; width: calc(100% + 30px); } .bs-calltoaction > .row > [class^="col-"], .bs-calltoaction > .row > [class*=" col-"]{ float:none; display:table-cell; vertical-align:middle; } .cta-contents{ padding-top: 10px; padding-bottom: 10px; } .cta-title{ margin: 0 auto 15px; padding: 0; } .cta-desc{ padding: 0; } .cta-desc p:last-child{ margin-bottom: 0; } .cta-button{ padding-top: 10px; padding-bottom: 10px; } @media (max-width: 991px){ .bs-calltoaction > .row{ display:block; width: auto; } .bs-calltoaction > .row > [class^="col-"], .bs-calltoaction > .row > [class*=" col-"]{ float:none; display:block; vertical-align:middle; position: relative; } .cta-contents{ text-align: center; } } .bs-calltoaction.bs-calltoaction-default{ color: #333; background-color: #fff; border-color: #ccc; } .bs-calltoaction.bs-calltoaction-primary{ color: #fff; background-color: #337ab7; border-color: #2e6da4; } .bs-calltoaction.bs-calltoaction-info{ color: #fff; background-color: #5bc0de; border-color: #46b8da; } .bs-calltoaction.bs-calltoaction-success{ color: #fff; background-color: #5cb85c; border-color: #4cae4c; } .bs-calltoaction.bs-calltoaction-warning{ color: #fff; background-color: #f0ad4e; border-color: #eea236; } .bs-calltoaction.bs-calltoaction-danger{ color: #fff; background-color: #d9534f; border-color: #d43f3a; } .bs-calltoaction.bs-calltoaction-primary .cta-button .btn, .bs-calltoaction.bs-calltoaction-info .cta-button .btn, .bs-calltoaction.bs-calltoaction-success .cta-button .btn, .bs-calltoaction.bs-calltoaction-warning .cta-button .btn, .bs-calltoaction.bs-calltoaction-danger .cta-button .btn{ border-color:#fff; }