Bootstrap 5 Toasts Color Schemes
Last Updated :
22 Dec, 2022
Toasts are a type of alert box that is used to show a message or an update to the user. You can use bootstrap 5 color and background utilities to create different color schemes and customize your toasts.
Bootstrap 5 Toasts Color Schemes Classes: We can use the Bootstrap 5 Color classes to color the toast background and Toast texts.
Syntax:
<div class="toast align-items-center text-* bg-* " >
...
</div>
* can be replaced by any color of preference.
Example 1: In this example, we will learn about Toasts Text Color Schemes.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container text-center col-8" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< strong >Bootstrap 5 Toasts Color schemes</ strong >
< div class = "container" >
< button type = "button" class = "btn btn-success"
id = "success" onClick = "showToast()" >
Show Toasts with Success Text Utility
</ button >
< div class = "toast text-success GFG1" >
< div class = "toast-header" >
< img src =
class = "img-thumbnail rounded me-2"
width = "40px" alt = "GFG Logo" >
< strong class = "me-auto" >
Toast Success
</ strong >
< button type = "button" class = "btn-close"
data-bs-dismiss = "toast" >
</ button >
</ div >
< div class = "toast-body" >
< p >
Welcome to GeeksforGeeks.
I am Text Success
</ p >
</ div >
</ div >
</ div >
</ div >
< script >
function showToast() {
var toastElList =
[].slice.call(document.querySelectorAll('.GFG1'));
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
}
</ script >
</ body >
</ html >
|
Output:
Bootstrap 5 toast color schemes
Example 2: In this example, we will learn about Toasts Background Color Schemes.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container text-center col-8" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >Bootstrap 5 Toasts Color schemes</ h2 >
< div class = "container" >
< button type = "button" class = "btn btn-primary"
id = "success" onClick = "showToast()" >
Show Toasts with Primary Background
</ button >
< div class = "toast GFG1 bg-primary" >
< div class = "toast-header" >
< img src =
width = "40px" >
< strong class = "me-auto" >Toast Success</ strong >
< button type = "button" class = "btn-close"
data-bs-dismiss = "toast" >
</ button >
</ div >
< div class = "toast-body" >
< p >
Welcome to GeeksforGeeks.
I am Background Primary
</ p >
</ div >
</ div >
</ div >
</ div >
< script >
function showToast() {
var toastElList =
[].slice.call(document.querySelectorAll('.GFG1'));
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
}
</ script >
</ body >
</ html >
|
Output
Bootstrap 5 toast color schemes
Reference: https://getbootstrap.com/docs/5.0/components/toasts/#color-schemes
Share your thoughts in the comments
Please Login to comment...