Bootstrap 5 Toasts Custom content
Last Updated :
30 Nov, 2022
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 =
rel = "stylesheet" >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container" >
< div >
< h1 class = "text-success" >GeeksforGeeks</ 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" >
GeeksforGeeks.
</ 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:
Bootstrap 5 Toasts custom content
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 =
rel = "stylesheet" >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container" >
< div >
< h2 class = "text-success" >GeeksforGeeks</ 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" >
GeeksforGeeks.
</ 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" >
GeeksforGeeks
</ 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:
Bootstrap 5 Toast custom content
Reference: https://getbootstrap.com/docs/5.0/components/toasts/#custom-content
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...