"bootstrap alert(css code)"
Bootstrap 3.3.0 Snippet by amr rashed

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <h2>Alerts</h2> <div class="alert alert-success fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> <strong>Success!</strong> This alert box could indicate a successful or positive action. </div> </body> </html>
<style> .fade.in { opacity: 1; } .alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } .fade { opacity: 0; -webkit-transition: opacity .15s linear; -o-transition: opacity .15s linear; transition: opacity .15s linear; } .close { float: right; font-size: 21px; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; filter: alpha(opacity=20); opacity: .2; } a { color: #337ab7; text-decoration: none; } a { background-color: transparent; } </style>

Related: See More

Vue Light Bootstrap Dashboard
Alert Group
Alert with action button
A different Approach to Bootstrap Alert

Questions / Comments: