<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="alert alert-info alert-dismissable" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true" style="color: white;">Dismiss ×</span></button> <p class="alert-title">Bootsnipp.com</p> <p class="alert-body"> Free Bootstrap snippets for the web. Example content goes here. Optionally, use the grid system to apply smaller alerts! </p> </div> <!-- End Alert 1 --> <div class="alert alert-warning alert-dismissable" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true" style="color: white;">Dismiss ×</span></button> <p class="alert-title">Bootsnipp.com</p> <p class="alert-body"> Free Bootstrap snippets for the web. Example content goes here. Optionally, use the grid system to apply smaller alerts! </p> </div> <!-- End Alert 2 --> <div class="row"> <div class="col-sm-6"> <div class="alert alert-warning alert-dismissable" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true" style="color: white;">Dismiss ×</span></button> <p class="alert-title">Bootsnipp.com</p> <p class="alert-body"> Free Bootstrap snippets for the web. Example content goes here. Optionally, use the grid system to apply smaller alerts! </p> </div> <!-- End Alert 2 --> </div> </div> </div>

.alert-info { border-radius: 0; background: #0061E8; border: 0; color: white; } .alert-body { font-size: 15px; } .alert-title { font-size: 15px; font-weight: bold; } .alert-warning { border-radius: 0; background: orange; border: 0; color: white; }