Saved Bookmarks
| 1. |
How to build a dismissal alert in Bootstrap? |
|
Answer» To create alert messages on your website, work with the Alert component in Bootstrap. We will use the .alert class for this purpose. The dismissal alert provided user with an option to close the alert message. For this purpose, use the .alert-dismissible class. After that include class="close" and data-dismiss="alert". Here, we will use × HTML character to display the close sign for closing alert buttons. Let us see an example: .<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap DEMO</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <LINK rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Dismissible Alerts</h2> <div class="alert alert-success alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Success! You cracked it!</strong> </div> <div class="alert alert-info alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Information! More Info!</strong> </div> <div class="alert alert-warning alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Warning! Close program to prevent system failure!</strong> </div> <div class="alert alert-DANGER alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Danger! MALWARE ahead!</strong> </div> <div class="alert alert-primary alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Primary!</strong> </div> <div class="alert alert-secondary alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Secondary!</strong> </div> <div class="alert alert-dark alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Dark alert!</strong> </div> </div> </body> </html>The output displays dismissible alerts: |
|