"Callouts - Call to Action"
Bootstrap 3.3.0 Snippet by martinfrancisco

<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="row"> <div class="callout-light text-center fade-in-b"> <h1>Callout Light - <b>Bubble</b> - Template <a href="#" class="btn btn-default">Button</a></h1> </div> </div> <div class="row"> <div class="callout-dark text-center fade-in-b"> <h1>Callout Dark - <b>Bubble</b> - Template <a href="#" class="btn btn-danger">Button</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat ad assumenda nisi harum omnis itaque ea accusamus sint numquam nam est quod ab dolorum atque, quisquam exercitationem tempora similique! Corrupti.</p> </div> </div> <div class="row"> <div class="callout-bubble text-center fade-in-b"> <h1>Callout Bubble - <b>Bubble</b> - Template <a href="#" class="btn btn-warning">Button</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat ad assumenda nisi harum omnis itaque ea accusamus sint numquam nam est quod ab dolorum atque, quisquam exercitationem tempora similique! Corrupti.</p> </div> </div> <div class="row"> <div class="callout-block text-center fade-in-b"> <h1>Callout Block - <b>Bubble</b> - Template <a href="#" class="btn btn-danger">Button</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat ad assumenda nisi harum omnis itaque ea accusamus sint numquam nam est quod ab dolorum atque, quisquam exercitationem tempora similique! Corrupti.</p> </div> </div> <div class="row"> <div class="callout-mage text-center fade-in-b"> <h1>Callout Mage - <b>Bubble</b> - Template <a href="#" class="btn btn-success">Button</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat ad assumenda nisi harum omnis itaque ea accusamus sint numquam nam est quod ab dolorum atque, quisquam exercitationem tempora similique! Corrupti.</p> </div> </div> </div>
/* ---------------------------- * Callouts * ---------------------------- */ .callout-light { padding: 30px; color: #000; background-color: #ccc; } .callout-light h1, h2, h3, h4 { font-weight: 300; line-height: 1.4; } .callout-dark { padding: 30px; color: #fff; background-color: #252525; } .callout-dark h1, h2, h3, h4 { font-weight: 300; line-height: 1.4; } .callout-dark p { color: #B1B1B1; font-size: 17px; } .callout-mage { padding: 30px; background-color: #743C58; color: #fff; } .callout-bubble { padding: 30px; color: #fff; background-color: #A94545; } .callout-bubble h1, h2, h3, h4 { font-weight: 300; line-height: 1.4; } .callout-block { background-color: #F5F3F4; border-left: 5px solid #a94545; border-right: 5px solid #a94545; padding: 15px; } .callout-block h1, .callout-block h2, .callout-block h3, .callout-block h4 { font-weight: 300; line-height: 1.4; }

Related: See More


Questions / Comments: