<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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"> <br><br> <div class="error-notice"> <div class="oaerror danger"> <strong>Error</strong> - You provided a wrong username/password </div> <div class="oaerror warning"> <strong>Error</strong> - You left a field Blank </div> <div class="oaerror info"> <strong>Error</strong> - Please Select a Different Username </div> <div class="oaerror success"> <strong>Yeppi</strong> - You are successfully registered. Please login. </div> </div> </div> </div> <center>Cursed By <a href="http://ioritro.com/486/a-different-approach-to-bootstrap-alert/">Oritro Ahmed </a></center>

.error-notice { margin: 5px 5px; /* Making sure to keep some distance from all side */ } .oaerror { width: 90%; /* Configure it fit in your design */ margin: 0 auto; /* Centering Stuff */ background-color: #FFFFFF; /* Default background */ padding: 20px; border: 1px solid #eee; border-left-width: 5px; border-radius: 3px; margin: 0 auto; font-family: 'Open Sans', sans-serif; font-size: 16px; } .danger { border-left-color: #d9534f; /* Left side border color */ background-color: rgba(217, 83, 79, 0.1); /* Same color as the left border with reduced alpha to 0.1 */ } .danger strong { color: #d9534f; } .warning { border-left-color: #f0ad4e; background-color: rgba(240, 173, 78, 0.1); } .warning strong { color: #f0ad4e; } .info { border-left-color: #5bc0de; background-color: rgba(91, 192, 222, 0.1); } .info strong { color: #5bc0de; } .success { border-left-color: #2b542c; background-color: rgba(43, 84, 44, 0.1); } .success strong { color: #2b542c; }