<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-9 cta-contents"> <h1 class="cta-title">Its a Call To Action</h1> <div class="cta-desc"> <p>Describe the action here.</p> <p>Describe the action here.</p> <p>Describe the action here.</p> </div> </div> <div class="col-md-3 cta-button"> <a href="#" class="btn btn-lg btn-block btn-default">Go for It!</a> </div> </div> </div> <div class="bs-calltoaction bs-calltoaction-primary"> <div class="row"> <div class="col-md-9 cta-contents"> <h1 class="cta-title">Its a Call To Action</h1> <div class="cta-desc"> <p>Describe the action here.</p> <p>Describe the action here.</p> <p>Describe the action here.</p> </div> </div> <div class="col-md-3 cta-button"> <a href="#" class="btn btn-lg btn-block btn-primary">Go for It!</a> </div> </div> </div> <div class="bs-calltoaction bs-calltoaction-info"> <div class="row"> <div class="col-md-9 cta-contents"> <h1 class="cta-title">Its a Call To Action</h1> <div class="cta-desc"> <p>Describe the action here.</p> <p>Describe the action here.</p> <p>Describe the action here.</p> </div> </div> <div class="col-md-3 cta-button"> <a href="#" class="btn btn-lg btn-block btn-info">Go for It!</a> </div> </div> </div> <div class="bs-calltoaction bs-calltoaction-success"> <div class="row"> <div class="col-md-9 cta-contents"> <h1 class="cta-title">Its a Call To Action</h1> <div class="cta-desc"> <p>Describe the action here.</p> <p>Describe the action here.</p> <p>Describe the action here.</p> </div> </div> <div class="col-md-3 cta-button"> <a href="#" class="btn btn-lg btn-block btn-success">Go for It!</a> </div> </div> </div> <div class="bs-calltoaction bs-calltoaction-warning"> <div class="row"> <div class="col-md-9 cta-contents"> <h1 class="cta-title">Its a Call To Action</h1> <div class="cta-desc"> <p>Describe the action here.</p> <p>Describe the action here.</p> <p>Describe the action here.</p> </div> </div> <div class="col-md-3 cta-button"> <a href="#" class="btn btn-lg btn-block btn-warning">Go for It!</a> </div> </div> </div> <div class="bs-calltoaction bs-calltoaction-danger"> <div class="row"> <div class="col-md-9 cta-contents"> <h1 class="cta-title">Its a Call To Action</h1> <div class="cta-desc"> <p>Describe the action here.</p> <p>Describe the action here.</p> <p>Describe the action here.</p> </div> </div> <div class="col-md-3 cta-button"> <a href="#" class="btn btn-lg btn-block btn-danger">Go for It!</a> </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: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: #286090; /*color: #fff;*/ background-color: rgba(51, 122, 183, 0.25); /*background-color: #337ab7;*/ border-color: #2e6da4; } .bs-calltoaction.bs-calltoaction-info{ color: #31b0d5; /*color: #fff;*/ background-color: rgba(91, 192, 222, 0.25); /*background-color: #5bc0de;*/ border-color: #46b8da; } .bs-calltoaction.bs-calltoaction-success{ /*color: #fff;*/ color: #449d44; /*background-color: #5cb85c;*/ background-color: rgba(92, 184, 92, 0.25); border-color: #4cae4c; } .bs-calltoaction.bs-calltoaction-warning{ /*color: #fff;*/ color: #d58512; /*background-color: #f0ad4e;*/ background-color: rgba(240, 173, 78, 0.25); border-color: #eea236; } .bs-calltoaction.bs-calltoaction-danger{ color: #c9302c; /*color: #fff;*/ background-color: rgba(217, 83, 79, 0.25); /*background-color: #d9534f;*/ border-color: #d43f3a; }