"bootstrap alert(css code)"
Bootstrap 4.0.0 Snippet by gabycampagna

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <!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

Now UI Dashboard Angular
Alert Group
Alert with action button
A different Approach to Bootstrap Alert

Questions / Comments: