<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 m-2"> <div class="row justify-content-center"> <div class="col-sm-6"> <div class="notice notice-primary alert fade show" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <strong>Something to note:</strong> <br> Some message here! </div> <div class="notice notice-secondary alert fade show" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <strong>Something to note:</strong> <br> Some message here! </div> <div class="notice notice-success alert fade show" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <strong>You've done it!</strong> <br> Some message here! </div> <div class="notice notice-info alert fade show" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <strong>Here's a little information:</strong> <br> Some message here! </div> <div class="notice notice-warning alert fade show" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <strong>Something Went Wrong!</strong> <br> Some message here! </div> <div class="notice notice-danger alert fade show" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <strong>Something went horribly wrong!</strong> <br> Some message here! </div> </div> </div> </div>

.notice { padding: 15px; background-color: #fafafa; 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; } /* Primary */ .notice-primary { border-left: 6px solid #cce5ff !important; } .notice-primary>strong { color: #004085; } /* Secondary */ .notice-secondary { border-left: 6px solid #e2e3e5 !important; } .notice-secondary>strong { color: #383d41; } /* Success */ .notice-success { border-left: 6px solid #d4edda !important; } .notice-success>strong { color: #155724; } /* Information */ .notice-info { border-left: 6px solid #d1ecf1 !important; } .notice-info>strong { color: #0c5460; } /* Warning */ .notice-warning { border-left: 6px solid #fff3cd !important; } .notice-warning>strong { color: #856404; } /* Danger */ .notice-danger { border-left: 6px solid #f8d7da !important; } .notice-danger>strong { color: #721c24; }