Bootstrap 5 Toasts Basic

Last Updated : 15 Apr, 2024

Bootstrap 5 Toasts Basic feature showcases brief alert notifications, resembling mobile and desktop push notifications. It elaborates on fundamental toast functionality, providing a user-friendly way to display important information to users.

Bootstrap 5 Toasts Basic Class: No special classes are used in Toasts Basic. The usage of display: flex in toast headers makes it simple to align content. You just need to have knowledge of Bootstrap 5 Toasts.

Syntax:

<div class="toast" role="alert">
    <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <button type="button" class="btn-close" 
                data-bs-dismiss="toast">
        </button>
    </div>
    <div class="toast-body">...</div>
</div>

Example 1: The following code demonstrates the Toasts basic using the Toasts Basic 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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />
        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
        <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
        </script>
    </head>

    <body class="m-2">
        <h2>Bootstrap 5 Toasts Basic</h2>
        <button
            type="button"
            class="btn btn-primary"
            id="myBtn"
        >
            Show Toast
        </button>
        <div class="toast" role="alert">
            <div class="toast-header">
                <strong class="me-auto">
                    GeeksforGeeks
                </strong>
                <small>GFG</small>
                <button
                    type="button"
                    class="btn-close"
                    id="btn-closeit"
                    data-bs-dismiss="toast"
                ></button>
            </div>
            <div class="toast-body">
                Hi Welcome to GeeksforGeeks!
            </div>
        </div>
        <script>
            $(document).ready(function () {
                $("#myBtn").click(function () {
                    $("div:first").addClass(
                        "show"
                    );
                });
            });
            $(document).ready(function () {
                $("#btn-closeit").click(
                    function () {
                        $(
                            "div:first"
                        ).removeClass("show");
                    }
                );
            });
        </script>
    </body>
</html>

Output:

Bootstrap 5 Toasts Basic Example Output

Example 2: The following code demonstrates the Toasts basic with an image icon for a specific period of time using the Toasts Basic 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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>

<body class="m-2">
    <h2>Bootstrap 5 Toasts Basic</h2>
    <button type="button" 
            class="btn btn-primary" 
            id="myBtn">
            Show Toast
    </button>
    <div class="toast" role="alert" 
         aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png"
                class="rounded me-2" alt="LOGO" 
                 style="width: 60px;">
            <strong class="me-auto">
                GeeksforGeeks
            </strong>
        </div>
        <div class="toast-body">
            It will automatically disappear 
            after some time.
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('#myBtn').click(function () {
                $('.toast').toast({
                    animation: false,
                    delay: 3000
                });
                $('.toast').toast('show');
            });
        });
    </script>
</body>
</html>