Bootstrap 5 Toasts Custom content
Bootstrap 5 Toasts Custom content is used to add your own markup by removing sub-components. Users can easily Customize toasts by adding their own content or by adding other bootstrap components inside toast. There are no predefined classes for toast custom content. You can custom-create them by giving additional controls and adding components like cards, icons, etc inside the toast.
Pre-requisite: Bootstrap 5 Toast knowledge required.
Bootstrap 5 Toasts Custom content Class: There is no predefined class to create custom content on the toast, we can use any Bootstrap 5 utilities, flex-box utilities, or Bootstrap 5 Icons.
Syntax:
<div class="toast" role="alert"> <div class="toast-header"> Toast Header </div> <div class="toast-body"> <!-- Custom Content for toast body--> </div> </div>
Example 1: In this example, we customize the toast content by adding two bootstrap buttons inside it.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > </ head > < body > < div class = "container" > < div > < h1 class = "text-success" >w3wiki</ h1 > < h3 > Bootstrap 5 Toasts Custom content</ h3 > </ div > < div > < button type = "button" class = "btn btn-success" id = "toastBtn" onclick = "showToast()" > Show the Toast </ button > < div id = "gfg" class = "toast mt-5" role = "alert" > < div class = "toast-header" > w3wiki. </ div > < div class = "toast-body" > < p class = "border-bottom mb-3 pb-2" > Accept Privacy Policy? </ p > < button type = "button" class = "btn btn-success btn-sm" > Yes </ button > < button type = "button" class = "btn btn-danger btn-sm" data-bs-dismiss = "toast" > No </ button > </ div > </ div > </ div > </ div > < script > // Initialize the Toasts var myToast = new bootstrap.Toast(document.getElementById('gfg')); function showToast() { myToast.show(); } </ script > </ body > </ html > |
Output:
Example 2: In this example, we added a card inside the toast component. The card has some text and a button inside it.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > </ head > < body > < div class = "container" > < div > < h2 class = "text-success" >w3wiki</ h2 > < h4 > Bootstrap 5 Toasts Custom content</ h4 > </ div > < div > < button type = "button" class = "btn btn-success" id = "toastBtn" onclick = "showToast()" > Show the Toast </ button > < div id = "gfg" class = "toast mt-5" role = "alert" > < div class = "toast-header" > w3wiki. </ div > < div class = "toast-body" > < div class = "card" > < div class = "card-body" > < h6 class = "card-title" >New Message!</ h6 > < p class = "card-text" >< span class = "user" > w3wiki </ span > sent you a message.</ p > < button class = "btn btn-warning btn-sm" > Open Message </ button > </ div > </ div > </ div > </ div > </ div > </ div > < script > // Initialize the Toasts var myToast = new bootstrap.Toast(document.getElementById('gfg')); function showToast() { myToast.show(); } </ script > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/toasts/#custom-content
Contact Us