Bootstrap

Bootstrap 5 Model Box Look Like Gmail

Bootstrap 5 Model Box Look Like Gmail

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

 
Screenshots
Bootstrap 5 Model Box Look Like Gmail | Bootstrap 5 customize modal box

 

Bootstrap 5 Model Box Look Like Gmail | Bootstrap 5 customize modal box

 

 

Step 1) Create Html file name it index.html</span >

Step 2) Copy all Source code and paste on your Html file.</span >

Step 3) Open html page in Browser.</span >

 

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

also you can more customize it.</span >

 


<!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-colorwhitesmoke;
            font-family‘Raleway’sans-serif;
        }

 

        #xc {
            border-radius50%;
            width40px;
            height40px;
            cursorpointer;
        }

 

        #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:</span >

https://starkverma111.github.io/Bootstrap-5-Model-Box-Look-Like-Gmail/</span ></a >


</span >


</span >

Step 1) Download Full Source Code here:</span ></span >

https://github.com/starkverma111/Bootstrap-5-Model-Box-Look-Like-Gmail</span ></a >

 

 

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