Bootstrap

Bootstrap 5 Model Box Look Like Gmail

by Niyander

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

Bootstrap 5 Model Box Look Like Gmail

Also Learn about: Diwali Fireworks Basic Script

Also visit: Create Beautiful Love Calculator using JavaScript & Bootstrap 5

 

 
Screenshots
Bootstrap 5 Model Box Look Like Gmail

 

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

 

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.

Source Code 

<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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

https://starkverma111.github.io/Bootstrap-5-Model-Box-Look-Like-Gmail/

Step 1) Download Full Source Code here:

https://github.com/starkverma111/Bootstrap-5-Model-Box-Look-Like-Gmail

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

 

What is Bootstrap 5 ?

Bootstrap 5 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first websites.  It was officially released on 16 June 2020 after several months of redefining its features. Bootstrap 5 supports all major browsers except Internet Explorer 11 and down. It is completely free to download and use

What are the new features of Bootstrap 5?

Bootstrap 5 is the latest version of the popular CSS framework, and it comes with many new features and improvements. Some of the most notable changes in Bootstrap 5 include:

  1. jQuery Dependency Removed: Bootstrap 5 no longer uses the jQuery library. Instead, the development team has improved the JavaScript library to effect this change1.
  2. Support Dropped For Internet Explorer 10 & 11: Bootstrap 5 no longer supports Internet Explorer 10 and 112.
  3. New Look and Feel: Bootstrap 5 now comes with a new look and feel, and with better customization. There’s now more flexibility to customize your themes so that not every site or app bears the same resemblance
  4. Enhanced Grid System: The grid system in Bootstrap 5 has been improved2.
  5. Responsive Font Size (RFS): Bootstrap 5 now includes a responsive font size feature2.
  6. Card Decks Removed: Card decks have been removed in Bootstrap 52.
  7. Custom SVG Icon Library: Bootstrap 5 now includes a custom SVG icon library2.

These are just some of the many new features and improvements in Bootstrap 5.