Bootstrap 5 Toasts Custom content

Last Updated : 29 Jul, 2024

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/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </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
        let 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/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </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
        let 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

Bootstrap 5 Toasts Color Schemes

prashantrathore1159

Improve

Article Tags :

Bootstrap 5 Toasts Custom content

Similar Reads

Thank You!

What kind of Experience do you want to share?