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

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

Similar snippets: See More


Comments:

comments powered by Disqus