<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="notice notice-success"> <strong>Notice</strong> notice-success </div> <div class="notice notice-danger"> <strong>Notice</strong> notice-danger </div> <div class="notice notice-info"> <strong>Notice</strong> notice-info </div> <div class="notice notice-warning"> <strong>Notice</strong> notice-warning </div> <div class="notice notice-lg"> <strong>Big notice</strong> notice-lg </div> <div class="notice notice-sm"> <strong>Small notice</strong> notice-sm </div> </div>

.notice { padding: 15px; background-color: #fafafa; border-left: 6px solid #7f7f84; margin-bottom: 10px; -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2); box-shadow: 0 5px 8px -6px rgba(0,0,0,.2); } .notice-sm { padding: 10px; font-size: 80%; } .notice-lg { padding: 35px; font-size: large; } .notice-success { border-color: #80D651; } .notice-success>strong { color: #80D651; } .notice-info { border-color: #45ABCD; } .notice-info>strong { color: #45ABCD; } .notice-warning { border-color: #FEAF20; } .notice-warning>strong { color: #FEAF20; } .notice-danger { border-color: #d73814; } .notice-danger>strong { color: #d73814; }