<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="row"> <div class="callout-mage text-center fade-in-b"> <h1>Preliminary, unproposed budget draft released <a href="#" class="btn btn-success">View</a></h1> <p>City officials have been quick to point out that this is only a first draft, and not meant as an actual budget proposal.</p> </div> </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: 10px; background-color: #167DC5; 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; }