Bootstrap Toasts

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 Toasts

Post by C0D3D »

Creating toasts 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>Creating Toast in Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <p><strong>Note:</strong> The <code>.show</code> is added to display the toast, and the class <code>.fade</code> apply a CSS fade transition to the toast. By default, toast it is hidden.</p>

    <div class="toast fade show" id="myToast">
        <div class="toast-header">
            <strong class="me-auto"><i class="bi-gift-fill"></i> We miss you!</strong>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            It's been a long time since you visited us. We've something special for you. <a href="#">Click here!</a>
        </div>
    </div>
</div>
</body>
</html>
Stacking toasts vertically in 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>Stacking Toasts Vertically in Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
    $(".toast").toast({
    	autohide: false
    });
});
</script>
</head>
<body>
<div class="m-4">
    <p><strong>Note:</strong> The <code>.show</code> is added to display the toast, and the class <code>.fade</code> apply a CSS fade transition to the toast. By default, toast it is hidden.</p>

    <div class="toast-container">
        <div class="toast fade show">
            <div class="toast-header">
                <strong class="me-auto"><i class="bi-globe"></i> Hello, world!</strong>
                <small>just now</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body">
                This is a basic toast message.
            </div>
        </div>
    
        <div class="toast fade show">
            <div class="toast-header">
                <strong class="me-auto"><i class="bi-globe"></i> Hello, world!</strong>
                <small>5 seconds ago</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body">
                See? This is another toast message.
            </div>
        </div>
    </div>
</div>
</body>
</html>


Placing Bootstrap toasts on screen with CSS

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>Placement of Bootstrap Toasts</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
    $(".toast").toast({
    	autohide: false
    });
});
</script>
</head>
<body>
<div class="m-4">
    <p><strong>Note:</strong> The <code>.show</code> is added to display the toast, and the class <code>.fade</code> apply a CSS fade transition to the toast. By default, toast it is hidden.</p>

    <div class="toast-container" style="position: absolute; top: 10px; right: 10px;">
        <div class="toast fade show">
            <div class="toast-header">
                <strong class="me-auto"><i class="bi-globe"></i> Hello, world!</strong>
                <small>just now</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body">
                This is a basic toast message.
            </div>
        </div>
    
        <div class="toast fade show">
            <div class="toast-header">
                <strong class="me-auto"><i class="bi-globe"></i> Hello, world!</strong>
                <small>5 seconds ago</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body">
                See? This is another toast message.
            </div>
        </div>
    </div>
</div>
</body>
</html>

Stop hiding Bootstrap toasts automatically via data attributes

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>Stop Hiding Bootstrap Toast Automatically Via Data Attributes</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Style for positioning toast */
.toast{
    position: absolute; 
    top: 10px; 
    right: 10px;
}
</style>
<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myToast").toast("show");
    });
});
</script>
</head>
<body>
<div class="m-4">
  	<p><strong>Note:</strong> The toast message will not hide automatically as autohide option is set to false.</p>
	<button type="button" class="btn btn-primary" id="myBtn">Show Toast</button>
    
    <div class="toast" id="myToast" data-bs-autohide="false">
    <div class="toast-header">
        <strong class="me-auto"><i class="bi-gift-fill"></i> We miss you!</strong>
        <small>10 mins ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
        It's been a long time since you visited us. We've something special for you. <a href="#">Click here!</a>
    </div>
</div>
</div>
</body>
</html>
Disable Bootstrap toasts autohide via JavaScript

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>Disable Bootstrap Toast Autohide via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Style for positioning toast */
.toast{
    position: absolute; 
    top: 10px; 
    right: 10px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myToast");

    /* Create toast instance */
    var myToast = new bootstrap.Toast(element, {
        autohide: false
    });

    btn.addEventListener("click", function(){
        myToast.show();
    });
});
</script>
</head>
<body>
<div class="m-4">
    <button type="button" class="btn btn-primary" id="myBtn">Show Toast</button>
    
  	<div class="toast" id="myToast">
      <div class="toast-header">
          <strong class="me-auto"><i class="bi-gift-fill"></i> We miss you!</strong>
          <small>10 mins ago</small>
          <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
      </div>
      <div class="toast-body">
          It's been a long time since you visited us. We've something special for you. <a href="#">Click here!</a>
      </div>
  </div>
</div>
</body>
</html>

Increasing Bootstrap toasts autohide time via JavaScript

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>Increase Bootstrap Toast Autohide Time Via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Style for positioning toast */
.toast{
    position: absolute; 
    top: 10px; 
    right: 10px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myToast");

    /* Create toast instance */
    var myToast = new bootstrap.Toast(element, {
        delay: 10000
    });

    btn.addEventListener("click", function(){
        myToast.show();
    });
});
</script>
</head>
<body>
<div class="m-4">
    <button type="button" class="btn btn-primary" id="myBtn">Show Toast</button>
    
  	<div class="toast" id="myToast">
      <div class="toast-header">
          <strong class="me-auto"><i class="bi-gift-fill"></i> We miss you!</strong>
          <small>10 mins ago</small>
          <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
      </div>
      <div class="toast-body">
          It's been a long time since you visited us. We've something special for you. <a href="#">Click here!</a>
      </div>
  </div>
</div>
</body>
</html>
Bootstrap show() toast method

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>Calling Bootstrap Toast Methods via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
  	var showBtn = document.getElementById("showBtn");
    var hideBtn = document.getElementById("hideBtn");
    var disposeBtn = document.getElementById("disposeBtn");
  
  	// Create toast instance
    var myToast = new bootstrap.Toast(document.getElementById("myToast"));
  
  	showBtn.addEventListener("click", function(){
        myToast.show();
    });
  
  	hideBtn.addEventListener("click", function(){
        myToast.hide();
    });
  
  	disposeBtn.addEventListener("click", function(){
        myToast.dispose();
    });
});
</script>
</head>
<body>
<div class="m-4">
    <h3>Toast Methods</h3>
    <p>Click on the buttons to manually show/hide the toast.</p> 
    <button type="button" class="btn btn-primary" id="showBtn">Show Toast</button>
    <button type="button" class="btn btn-warning" id="hideBtn">Hide Toast</button>
    <button type="button" class="btn btn-danger" id="disposeBtn">Dispose Toast</button>

  	<div class="toast" id="myToast" data-bs-autohide="false" style="position: absolute; top: 10px; right: 10px;">
        <div class="toast-header">
            <strong class="me-auto"><i class="bi-gift-fill"></i> We miss you!</strong>
            <small>10 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            It's been a long time since you visited us. We've something special for you. <a href="#">Click here!</a>
        </div>
    </div>
</div>
</body>
</html>
Bootstrap hide() toast 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>Calling Bootstrap Toast Methods via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
  	var showBtn = document.getElementById("showBtn");
    var hideBtn = document.getElementById("hideBtn");
    var disposeBtn = document.getElementById("disposeBtn");
  
  	// Create toast instance
    var myToast = new bootstrap.Toast(document.getElementById("myToast"));
  
  	showBtn.addEventListener("click", function(){
        myToast.show();
    });
  
  	hideBtn.addEventListener("click", function(){
        myToast.hide();
    });
  
  	disposeBtn.addEventListener("click", function(){
        myToast.dispose();
    });
});
</script>
</head>
<body>
<div class="m-4">
    <h3>Toast Methods</h3>
    <p>Click on the buttons to manually show/hide the toast.</p> 
    <button type="button" class="btn btn-primary" id="showBtn">Show Toast</button>
    <button type="button" class="btn btn-warning" id="hideBtn">Hide Toast</button>
    <button type="button" class="btn btn-danger" id="disposeBtn">Dispose Toast</button>

  	<div class="toast" id="myToast" data-bs-autohide="false" style="position: absolute; top: 10px; right: 10px;">
        <div class="toast-header">
            <strong class="me-auto"><i class="bi-gift-fill"></i> We miss you!</strong>
            <small>10 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            It's been a long time since you visited us. We've something special for you. <a href="#">Click here!</a>
        </div>
    </div>
</div>
</body>
</html>
Bootstrap dispose() toast 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>Calling Bootstrap Toast Methods via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
  	var showBtn = document.getElementById("showBtn");
    var hideBtn = document.getElementById("hideBtn");
    var disposeBtn = document.getElementById("disposeBtn");
  
  	// Create toast instance
    var myToast = new bootstrap.Toast(document.getElementById("myToast"));
  
  	showBtn.addEventListener("click", function(){
        myToast.show();
    });
  
  	hideBtn.addEventListener("click", function(){
        myToast.hide();
    });
  
  	disposeBtn.addEventListener("click", function(){
        myToast.dispose();
    });
});
</script>
</head>
<body>
<div class="m-4">
    <h3>Toast Methods</h3>
    <p>Click on the buttons to manually show/hide the toast.</p> 
    <button type="button" class="btn btn-primary" id="showBtn">Show Toast</button>
    <button type="button" class="btn btn-warning" id="hideBtn">Hide Toast</button>
    <button type="button" class="btn btn-danger" id="disposeBtn">Dispose Toast</button>

  	<div class="toast" id="myToast" data-bs-autohide="false" style="position: absolute; top: 10px; right: 10px;">
        <div class="toast-header">
            <strong class="me-auto"><i class="bi-gift-fill"></i> We miss you!</strong>
            <small>10 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            It's been a long time since you visited us. We've something special for you. <a href="#">Click here!</a>
        </div>
    </div>
</div>
</body>
</html>
Bootstrap getInstance() toast 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 Toast Instance Using jQuery</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Style for positioning toast */
.toast{
    position: absolute; 
    bottom: 10px; 
    right: 10px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myToast");

    // Create toast instance
    var bsToast = new bootstrap.Toast(element);

    // Show toast on page load
    bsToast.show();

    // Get toast instance on button click
    btn.addEventListener("click", function(){
        var myToast = bootstrap.Toast.getInstance(element);
        console.log(myToast);
    });
});
</script>
</head>
<body>
<div class="m-4">
  	<p class="mt-4"><strong>Note:</strong> Press the "Get Toast Instance" button to get the toast instance associated with a DOM element.</p>
    <p>Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac) to open the browser console panel.</p>
	<button type="button" class="btn btn-primary" id="myBtn">Get Toast Instance</button>
    
    <div class="toast" id="myToast" data-bs-autohide="false">
    <div class="toast-header">
        <strong class="me-auto"><i class="bi-gift-fill"></i> We miss you!</strong>
        <small>10 mins ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
        It's been a long time since you visited us. We've something special for you. <a href="#">Click here!</a>
    </div>
</div>
</div>
</body>
</html>

Bootstrap getOrCreateInstance() toast 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 Toast Instance Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Style for positioning toast */
.toast{
    position: absolute; 
    bottom: 10px; 
    right: 10px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myToast");

    btn.addEventListener("click", function(){
        var myToast = bootstrap.Toast.getOrCreateInstance(element);
        console.log(myToast);
        myToast.show();
    });
});
</script>
</head>
<body>
<div class="m-4">
  	<p class="mt-4"><strong>Note:</strong> Press the "Get or Create Toast Instance" button to create toast instance or get the toast instance associated with a DOM element.</p>
    <p>Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac) to open the browser console panel.</p>
	<button type="button" class="btn btn-primary" id="myBtn">Get or Create Toast Instance</button>
    
    <div class="toast" id="myToast" data-bs-autohide="false">
    <div class="toast-header">
        <strong class="me-auto"><i class="bi-gift-fill"></i> We miss you!</strong>
        <small>10 mins ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
        It's been a long time since you visited us. We've something special for you. <a href="#">Click here!</a>
    </div>
</div>
</div>
</body>
</html>
Display a message when Bootstrap toast 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 Bootstrap Toast Events Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var myToast = document.getElementById("myToast");

    // Create toast instance
    var toast = new bootstrap.Toast(myToast);

    myToast.addEventListener("hidden.bs.toast", function(){
        alert("Toast component has been completely closed.");
    });
});
</script>
</head>
<body>
<div class="m-4">
	<h2>Toast Events</h2>
	<p>An alert will be displayed once you close the toast.</p>
    
    <div class="toast fade show" id="myToast">
        <div class="toast-header">
            <strong class="me-auto"><i class="bi-gift-fill"></i> We miss you!</strong>
            <small>10 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            It's been a long time since you visited us. We've something special for you. <a href="#">Click here!</a>
        </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] and 0 guests