Open In App

Bootstrap 5 Toasts Translucent

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 provides the Toasts which are used to show the alert notifications. Toasts are brief alerts designed to resemble the push notifications made popular by mobile and desktop operating systems. 

The Toast translucent feature is used to be slightly translucent to blend in with the content below them.

Toasts Translucent Classes:

  • toast: This class is used to create a toast notification in Bootstrap.
  • toast-header: This class is used to specify the header of the toast.
  • toast-body: This class is used to specify the body of the toast.

 

Syntax:

<div class="toast">
      <div class="toast-header">
        ...
    </div>
      <div class="toast-body">
        ...
    </div>
</div>

Example 1: The following code demonstrates the Toasts Translucent feature using the Toasts Translucent Bootstrap 5 properties.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href=
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src=
        integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <script src=
    </script>
</head>
  
<body class="bg-success">
    <div class="container">
        <h1 class="text-white">GeeksforGeeks</h1>
        <button type="button" 
            class="btn btn-primary" id="myBtn">
            Click Here
        </button>
        <div class="toast">
            <div class="toast-header">
                <strong class="me-auto">
                    GeeksforGeeks
                </strong>
            </div>
            <div class="toast-body">
                Hi, Welcome to GeeksforGeeks.
            </div>
        </div>
    </div>
  
    <script>
        $(document).ready(function () {
            $('#myBtn').click(function () {
                $('.toast').toast({
                    animation: false,
                    delay: 3000
                });
                $('.toast').toast('show');
            });
        });
    </script>
</body>
  
</html>


Output:

 

Example 2: The following code demonstrates the Toasts Translucent feature with logo and small text using the Toasts Translucent Bootstrap 5 properties.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href=
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src=
        integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <script src=
    </script>
</head>
  
<body class="bg-success">
    <div class="container">
        <h1 class="text-white">GeeksforGeeks</h1>
  
        <button type="button" 
            class="btn btn-primary" id="myBtn">
            Click Here
        </button>
          
        <div class="toast">
            <div class="toast-header">
                <img src=
                    class="rounded me-2" alt="LOGO" 
                    style="width:60px;">
                <strong class="me-auto">
                    GeeksforGeeks
                </strong>
                <small class="text-muted">GFG</small>
            </div>
            <div class="toast-body">
                Hi, Welcome to GeeksforGeeks.
            </div>
        </div>
    </div>
  
    <script>
        $(document).ready(function () {
            $('#myBtn').click(function () {
                $('.toast').toast({
                    animation: false,
                    delay: 3000
                });
                $('.toast').toast('show');
            });
        });
    </script>
</body>
  
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/components/toasts/#translucent



Last Updated : 21 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads