This code implements Bootstrap 5 Toast Dynamic Message functionality. It allows you to create customizable toast messages on your web page. You can specify the message content, type (e.g., success, warning), and position (e.g., top-right, bottom-left). The “Create a Toast” button triggers the display of these dynamic toast messages, providing informative feedback or alerts to users.
How to Create Bootstrap 5 Toast Dynamic Message
1. First of all, load the Bootstrap CSS by adding the following CDN link to the head tag of your website.
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css'>
2. Inside the <body> of your HTML, create the elements for your toast messages. This includes an input field for the message content, dropdowns for selecting the type and position of the toast, and a button to trigger the toast creation.
<div class="container">
<div class="row py-5 text-center">
<div class="col-12 input-group">
<input type="text" class="form-control" name="content" placeholder="Toast content">
<select class="form-select" name="type">
<option value="" selected>Toast type</option>
<option value="primary">Primary</option>
<option value="secondary">Secondary</option>
<option value="success">Success</option>
<option value="danger">Danger</option>
<option value="warning">Warning</option>
<option value="info">Info</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
<select class="form-select" name="position">
<option value="" selected>Toast position</option>
<option value="top-0,end-0">Top Right</option>
<option value="bottom-0,end-0">Bottom Right</option>
<option value="bottom-0,start-0">Bottom Left</option>
<option value="top-0,start-0">Top Left</option>
</select>
<button id="create-toast" class="btn btn-primary">Create a Toast</button>
</div>
</div>
</div>
<div aria-live="polite" aria-atomic="true">
<div class="toast-container position-absolute p-3" id="toast-container" style="z-index:9;"></div>
</div>
3. You can customize the appearance of the toast messages generated by JS code using CSS: (Optional)
body{
background-color: #e5e5f7;
opacity: 0.8;
}
/* Change Toast Background Color */
.bg-success {
background-color: #YourColorHere;
}
/* Modify Toast Text Color */
.text-success {
color: #YourColorHere;
}
/* Adjust Toast Border */
.border-success {
border-color: #YourColorHere;
}
/* Change Toast Positioning (e.g., top-left) */
.toast-container {
top: 0;
left: 0;
}
/* Customize Toast Close Button (e.g., change color) */
.btn-close {
color: #YourColorHere;
}
/* Change Toast Border Radius (e.g., make them rounded) */
.toast {
border-radius: 10px;
}
4. Now, load the jQuery and Bootstrap JS by adding the following scripts at the end of the HTML code:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js'></script>
5. Finally, add the following JavaScript code between <script> tag just before closing the body element. This code handles the creation and display of toast messages when the “Create a Toast” button is clicked.
document.querySelector('#create-toast').addEventListener('click', function() {
document.querySelector('#toast-container').classList.remove('top-0','end-0','bottom-0','start-0');
var content = (document.querySelector('input[name=content]').value != '')
? document.querySelector('input[name=content]').value
: 'Lorem ipsum dolor sit amet';
var type = (document.querySelector('select[name=type]').value != '')
? document.querySelector('select[name=type]').value
: 'success';
var position = (document.querySelector('select[name=position]').value != '')
? document.querySelector('select[name=position]').value.split(',')
: ['top-0','end-0'];
showToast(content, type, position);
});
function showToast(content, type, position) {
var delay = 15000;
position.forEach((el) => {
document.querySelector("#toast-container").classList.add(el);
});
var html = `<div class="toast align-items-center text-white bg-${type} border-0" role="alert" aria-live="assertive" aria-atomic="true"><div class="d-flex"><div class="toast-body h6 p-3 m-0">${content}</div><button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button></div></div>`;
var toast = htmlToElement(html);
var toastContainer = document.querySelector("#toast-container");
toastContainer.appendChild(toast);
var toast = new bootstrap.Toast(toast, {delay:delay, animation:true});
toast.show();
setTimeout(() => toast.remove(), delay + 15000);
}
function htmlToElement(html) {
var template = document.createElement('template');
html = html.trim();
template.innerHTML = html;
return template.content.firstChild;
}
Inside the showToast function, you can customize the appearance and behavior of your toast messages. You can change the delay, styling, and content to suit your needs.
That’s all! hopefully, you have successfully created Bootstrap 5 Toast Dynamic Message. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
- Bootstrap 5 Number Counter Animation
- Bootstrap 5 Responsive Navbar Example
- Bootstrap Datepicker Today Date Selected
- Summernote Editor Compatible With Bootstrap 5
- Bootstrap Date and Time Picker
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.