<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;
}
