Bootstrap

Bootstrap 5 Model Box Look Like Gmail

August 19, 2021December 21, 2022 by Niyander

In this article i am gone to share how you can create a Bootstrap 5 model box Look like Gmail with you.

Screenshots

Step 1) Create Html file name it index.html

Step 2) Copy all Source code and paste on your Html file.

Step 3) Open html page in Browser.

You can use this type of Bootstrap 5 Model box in delete section or where you want..

also you can more customize it.

<!doctype html>

<html lang=“en”>

<head>

    <!– Required meta tags –>

    <meta charset=“utf-8”>

    <meta name=“viewport” content=“width=device-width, initial-scale=1”>

    <!– Bootstrap CSS –>

    <link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css” rel=“stylesheet”>

    <!– Option 1: Bootstrap Bundle with Popper –>

    <script src=“https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js”></script>

    <link rel=“preconnect” href=“https://fonts.googleapis.com”>

    <link rel=“preconnect” href=“https://fonts.gstatic.com” crossorigin>

    <link href=“https://fonts.googleapis.com/css2?family=Raleway&display=swap” rel=“stylesheet”>

    <style>

        body {

            background-color: whitesmoke;

            font-family: ‘Raleway’, sans-serif;

}

        #xc {

            border-radius: 50%;

            width: 40px;

            height: 40px;

            cursor: pointer;

}

        #xc:hover {

            background-color: #e7e7e7;

}

    </style>

    <title>Gmail Delete Model Box</title>

</head>

<body>

    <!– Button trigger modal –>

    <center>

        <br />

        <button type=“button” class=“btn btn-primary” data-bs-toggle=“modal” data-bs-target=“#exampleModal”> Launch demo

            modal </button>

        <br /><br />

        <h1>Bootstrap 5 Model Box Look Like Gmail</h1>

    </center>

    <!– Modal –>

    <div class=“modal fade” id=“exampleModal” tabindex=“-1” aria-labelledby=“exampleModalLabel” aria-hidden=“true”>

        <div class=“modal-dialog modal-dialog-centered”>

            <div class=“modal-content”>

                <div class=“modal-body”>

                    <div class=“p-2 d-flex justify-content-between align-items-center”>

                        <div class=” p-2 bd-highlight”><b>Confirm deleting messages</b></div>

                        <div class=“p-2 text-center” id=“xc” data-bs-dismiss=“modal”><b>X</b> </div>

                    </div>

                    <div class=“ms-2 me-4 d-flex justify-content-between”>

                        <div class=“p-2 bd-highlight”>This action will affect all 18 conversations in Trash. Are you

                            sure you want to continue ?</div>

                    </div>

                    <div class=“d-flex flex-row pt-2 justify-content-end”>

                        <div class=“p-2 bd-highlight”>

                            <button type=“button” class=“btn btn-default”

                                data-bs-dismiss=“modal”>Cancel</button>&nbsp;&nbsp;

                            <button type=“button” class=“btn btn-primary”>OK</button>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    </div>

</body>

</html>

Step 1) See Demo here:

Step 1) Download Full Source Code here:

Note: If You get any error , mention me in comments i will fix it..

Niyander Tech