<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="Coe-StatusBar errorMsg"> <i class="icon icon-error-solid"></i> <b>Error Status Bar Title/Header.</b> </div> <div class="Coe-StatusBar validMsg"> <i class="icon icon-error-solid"></i> <b>Success Status Bar Title/Header.</b> </div> <div class="Coe-StatusBar warningMsg"> <i class="icon icon-error-solid"></i> <b>Warning Status Bar Title/Header.</b> </div> <div class="Coe-StatusBar infoMsg"> <i class="icon icon-information-solid"></i> <b>Information Status Bar Title/Header.</b> </div>

.Coe-StatusBar { margin-top: 10px; float: left; padding: 3px 10px; font-size: 11px; width: 100%; } .Coe-StatusBar i { font-size: 12px; } .errorMsg { border: 1.5px solid #ff1d46; border-left: 5px solid #ff1d46; background: #f8e8e8; } .errorMsg i { color: #ff1d46; } .validMsg { border: 1.5px solid #4bcd3e; border-left: 5px solid #4bcd3e; background: #e5ffe2; } .validMsg i { color: #4bcd3e; } .warningMsg { border: 1.5px solid #f68a61; border-left: 5px solid #f68a61; background: #fff7f4; } .warningMsg i { color: #f68a61; } .infoMsg { border: 1.5px solid #3bccea; border-left: 5px solid #3bccea; background: #d7f8ff; } .infoMsg i { color: #3bccea; }