Bootstrap Alerts Messages

Bootstrap is a free and open source front end development framework for the creation of websites and web apps.
Post Reply
User avatar
C0D3D
Site Admin
Posts: 159
Joined: Sun Jun 26, 2022 10:46 pm
Contact:
Contact C0D3D

Bootstrap Alerts Messages

Post by C0D3D »

Creating success, error, warning and info alert messages with Bootstrap

Example 1

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Common Alert Messages</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <!-- Success Alert -->
    <div class="alert alert-success alert-dismissible fade show">
        <strong>Success!</strong> Your message has been sent successfully.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>

    <!-- Error Alert -->
    <div class="alert alert-danger alert-dismissible fade show">
        <strong>Error!</strong> A problem has been occurred while submitting your data.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>

    <!-- Warning Alert -->
    <div class="alert alert-warning alert-dismissible fade show">
        <strong>Warning!</strong> There was a problem with your network connection.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>

    <!-- Info Alert -->
    <div class="alert alert-info alert-dismissible fade show">
        <strong>Info!</strong> Please read the comments carefully.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
</div>
</body>
</html>

Creating primary, secondary, dark, and light alert messages with Bootstrap

Example 2

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap New Alert Boxes</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <!-- Primary Alert -->
    <div class="alert alert-primary alert-dismissible fade show">
        <strong>Primary!</strong> This is a simple primary alert box.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>

    <!-- Secondary Alert -->
    <div class="alert alert-secondary alert-dismissible fade show">
        <strong>Secondary!</strong> This is a simple secondary alert box.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>

    <!-- Dark Alert -->
    <div class="alert alert-dark alert-dismissible fade show">
        <strong>Dark!</strong> This is a simple dark alert box.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>

    <!-- Light Alert -->
    <div class="alert alert-light alert-dismissible fade show">
        <strong>Light!</strong> This is a simple light alert box.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
</div>
</body>
</html>

Adding icons to Bootstrap alerts

Example 3

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Alerts with Icons</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Custom style to set icon size */
.alert i[class^="bi-"]{
  font-size: 1.5em;
  line-height: 1;
}
</style>
</head>
<body>
<div class="m-4">
    <!-- Success Alert -->
    <div class="alert alert-success alert-dismissible d-flex align-items-center fade show">
      	<i class="bi-check-circle-fill"></i>
        <strong class="mx-2">Success!</strong> Your message has been sent successfully.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>

    <!-- Error Alert -->
    <div class="alert alert-danger alert-dismissible d-flex align-items-center fade show">
      	<i class="bi-exclamation-octagon-fill"></i>
        <strong class="mx-2">Error!</strong> A problem has been occurred while submitting your data.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>

    <!-- Warning Alert -->
    <div class="alert alert-warning alert-dismissible d-flex align-items-center fade show">
      	<i class="bi-exclamation-triangle-fill"></i>
        <strong class="mx-2">Warning!</strong> There was a problem with your network connection.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>

    <!-- Info Alert -->
    <div class="alert alert-info alert-dismissible d-flex align-items-center fade show">
      	<i class="bi-info-circle-fill"></i>
        <strong class="mx-2">Info!</strong> Please read the comments carefully.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
</div>
</body>
</html>

Placing additional content inside Bootstrap alerts

Example 4

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Alert with Additional Content</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Custom style to set icon size */
.alert i[class^="bi-"]{
    font-size: 1.5rem;
    line-height: 1;
}
</style>
</head>
<body>
<div class="m-4">
    <div class="alert alert-danger alert-dismissible fade show">
        <h4 class="alert-heading"><i class="bi-exclamation-octagon-fill"></i> Oops! Something went wrong.</h4>
        <p>Please enter a valid value in all the required fields before proceeding. If you need any help just place the mouse pointer above info icon next to the form field.</p>
        <hr>
        <p class="mb-0">Once you have filled all the details, click on the 'Next' button to continue.</p>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
</div>
</body>
</html>

Matching links color inside Bootstrap alerts

Example 5

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Link inside Bootstrap Alerts</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="alert alert-warning alert-dismissible fade show">
        <strong>Warning!</strong> A simple warning alert with <a href="#" class="alert-link">an example link</a>.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
</div>
</body>
</html>
Dismissal of Bootstrap alerts via data attributes

Example 6

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dismissal of Bootstrap Alerts via Data Attributes</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4"> 
    <div class="alert alert-info alert-dismissible fade show">
        <strong>Note!</strong> This is a simple example of dismissible alert.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
</div>
</body>
</html>


Dismissal of Bootstrap alerts via JavaScript

Example 7

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dismissal of Bootstrap Alerts via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myAlert");

    // Create an alert instance
    var myAlert = new bootstrap.Alert(element);

    btn.addEventListener("click", function(){
        myAlert.close();
    });
});
</script>
</head>
<body>
<div class="m-4"> 
    <div id="myAlert" class="alert alert-info alert-dismissible fade show">
        <strong>Note!</strong> This is a simple example of dismissible alert.
        <button type="button" class="btn-close" id="myBtn"></button>
    </div>
</div>
</body>
</html>

Bootstrap close() alert method

Example 8

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Close Bootstrap Alerts via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myAlert");

    // Create alert instance
    var myAlert = new bootstrap.Alert(element);

    btn.addEventListener("click", function(){
        myAlert.close();
    });
});
</script>
</head>
<body>
<div class="m-4"> 
    <div id="myAlert" class="alert alert-info alert-dismissible fade show">
        <strong>Note!</strong> This is a simple example of an info alert. You can close this alert by clicking the external "Close Alert" button.
    </div>
    <button type="button" class="btn btn-danger" id="myBtn">Close Alert</button>
</div>
</body>
</html>


Bootstrap dispose() alert method

Example 9

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dispose Bootstrap Alerts via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myAlert");
  
  	// Create alert instance
  	var myAlert = new bootstrap.Alert(element);
  	console.log(myAlert);
    // {_element: div#myAlert.alert.alert-info.alert-dismissible.fade.show}

    btn.addEventListener("click", function(){
        myAlert.dispose();
        console.log(myAlert);
        // {_element: null}
    });
});
</script>
</head>
<body>
<div class="m-4"> 
    <div id="myAlert" class="alert alert-info alert-dismissible fade show">
        <strong>Note!</strong> Press the "Dispose Alert" to destroy this alert.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  	<button type="button" class="btn btn-danger" id="myBtn">Dispose Alert</button>
</div>
</body>
</html>


Bootstrap getInstance() alert method

Example 10

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Get Bootstrap Alert Instance Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myAlert");

    // Create alert instance
    var myAlert = new bootstrap.Alert(element);

    // Get tooltip instance on button click
    btn.addEventListener("click", function(){
        var alert = bootstrap.Alert.getInstance(element);
        console.log(alert);
    });
});
</script>
</head>
<body>
<div class="m-4"> 
    <div id="myAlert" class="alert alert-info alert-dismissible fade show">
        <strong>Note!</strong> Press the "Get Alert Instance" to get the alert instance associated with a DOM element.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  	<button type="button" class="btn btn-primary" id="myBtn">Get Alert Instance</button>
</div>
</body>
</html>



Bootstrap getOrCreateInstance() alert method

Example 11

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Get or Create Bootstrap Alert Instance Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myAlert");

    btn.addEventListener("click", function(){
        var myAlert = bootstrap.Alert.getOrCreateInstance(element);
        console.log(myAlert);
    });
});
</script>
</head>
<body>
<div class="m-4"> 
    <div id="myAlert" class="alert alert-info alert-dismissible fade show">
        <strong>Note!</strong> Press the "Get or Create Alert Instance" to <em>create</em> alert instance, or to <em>get</em> the alert instance associated with a DOM element.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  	<button type="button" class="btn btn-primary" id="myBtn">Get or Create Alert Instance</button>
</div>
</body>
</html>



Display a message when Bootstrap alert has been completely closed

Example 12

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Listening to Collapse Events Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var myCollapse = document.getElementById("myCollapse");

    myCollapse.addEventListener("hidden.bs.collapse", function(){
        alert("Collapsible element has been completely closed.");
    });
});
</script>
</head>
<body>
<div class="m-4">
    <!-- Trigger Buttons HTML -->
    <button type="button" class="btn btn-primary mb-4" id="myBtn" data-bs-toggle="collapse" data-bs-target="#myCollapse">Toggle Element</button>

    <!-- Collapsible Element HTML -->
    <div class="collapse show" id="myCollapse">
        <div class="card card-body">This is a simple example of showing and hiding specific element via data attributes. Click the trigger button to toggle this panel.</div>
    </div>
</div>
</body>
</html>
----------------------------------------------------------------------
Together we are one! One we are many... Much Love from one brother to another...
Working together to achieve amazing things!
Teamwork is key.
Knowledge is Power!

4 Basic datatypes.
Strings: Which store a series of characters.
Int: Which store a full integer or number.
Float: A numeric value with a decimal.
Boolean: Only stores True or False and are very useful with if statements
----------------------------------------------------------------------
ImgBB Image upload
Top
Post Reply

Return to “_._Bootstrap_._”

Who is online

Users browsing this forum: Ahrefs [Bot], Semrush [Bot] and 0 guests