InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
What is an Alert component 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 alert class also has some contextual classes associated with it for action on alert box: .alert-success: Successful or POSITIVE action .alert-info: Informative action .alert-warning: .alert-danger: Dangerous action .alert-PRIMARY: Important action .alert-secondary: Less important action .alert-light: Light grey .alert-dark: Dark greyLet us now see how we can use them: <!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>Learning about Alerts</h2> <div class="alert alert-success"> <strong>Success! You cracked it!</strong> </div> <div class="alert alert-info"> <strong>Information! More Info!</strong> </div> <div class="alert alert-warning"> <strong>Warning! Close PROGRAM to prevent system failure!</strong> </div> <div class="alert alert-danger"> <strong>Danger! Malware ahead!</strong> </div> <div class="alert alert-primary"> <strong>Primary!</strong> </div> <div class="alert alert-secondary"> <strong>Secondary!</strong> </div> <div class="alert alert-dark"> <strong>Dark alert!</strong> </div> <div class="alert alert-light"> <strong>Light alert!</strong> </div> </div> </body> </html>The following is the output displaying different forms of alerts: |
|