InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
Include links in Alerts in Bootstrap |
|
Answer» The .alert-LINK class is USED in Bootstrap to include links in Alerts. You need to use the anchor element: <a href="#" class="alert-link">Since we are using contextual CLASSES to color alerts, you need to provide matching colored links within any alert. The following is 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>Link in Alerts</h2> <div class="alert alert-success alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Success! You cracked it!</strong> Demo <a href="#" class="alert-link"> Link!</a> </div> <div class="alert alert-info alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Information! More Info!</strong> Demo <a href="#" class="alert-link"> Link!</a> </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> Demo <a href="#" class="alert-link"> Link!</a> </div> <div class="alert alert-danger alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Danger! Malware ahead!</strong> Demo <a href="#" class="alert-link"> Link!</a> </div> <div class="alert alert-primary alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Primary!</strong> Demo <a href="#" class="alert-link"> Link!</a> </div> <div class="alert alert-secondary alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Secondary!</strong> Demo <a href="#" class="alert-link"> Link!</a> </div> <div class="alert alert-dark alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Dark alert!</strong> Demo <a href="#" class="alert-link"> Link!</a> </div> </div> </body> </html>The OUTPUT: Above, you can see the alert links have the same color as alerts. We added color to alerts using contextual classes. |
|