1.

Alerts - Bootstrap

Answer»

  • A bootstrap alert is a message sent to users when something goes wrong.

  • In the case of typos such as incorrect email addresses or credit card numbers, the user will receive an error alert message that prompts them to make corrections.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success! alert</strong>
</div>
<div class="alert alert-info">
<strong>Info! alert</strong>
</div>
<div class="alert alert-warning">
<strong>Warning! alert</strong>
</div>
<div class="alert alert-danger">
<strong>Danger! alert</strong>
</div>
</div>
</body>
</html>

 

Tag NameDescriptionCode
Alert-primary Light blue coloured alerts can be created using alert-primary. <div class="alert alert-primary" role="alert">
InterviewBit
</div>
Alert-secondary Light grey coloured alerts can be created using alert-primary. <div class="alert alert-secondary" role="alert">
InterviewBit
</div>
Alert-SuccessFor successful actions. <div class="alert alert-secondary" role="alert">
InterviewBit
</div>
Alert-DangerFor warning messages. <div class="alert alert-danger" role="alert">
InterviewBit
</div>
Alert-warningSimilar to a warning alert, a danger alert is issued in response to more negative actions (e.g., being locked out after too many password failures). <div class="alert alert-warning" role="alert">
InterviewBit
</div>
Alert-headingAlert-heading is used for adding heading to your alert. <div class="alert alert-info">
<h4 class="alert-heading"><i class="fa fa-info"></i></h4>
</div>
Alert-LightAlert-Light is used to display alerts in a light colour. <div class="alert alert-light" role="alert">
InterviewBit
</div>
Alert-DarkAlert-dark is used to display alerts in dark colours. <div class="alert alert-dark" role="alert">
InterviewBit
</div>
Alert-LinkAlert-link class can be added to any links inside the alert box to create "matching coloured links. <div class="alert alert-primary" role="alert">
WELCOME TO INTERVIEWBIT<a href="#" class="alert-link">Bootstrap link for alert</a>. Give it a click if you like.
</div>
Alert-DismissibleAlert-dismissible is used to close the alert after reading. <div class="alert alert-warning alert-dismissible fade show" role="alert">
InterviewBit
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>


Discussion

No Comment Found

Related InterviewSolutions