Bootstrap

How to Create a Bootstrap 5 Modal Box That Looks Like Gmail

August 19, 2021September 6, 2024 by Niyander

In this tutorial, we will walk you through the steps to create a Bootstrap 5 modal box that mimics the look and feel of Gmail’s delete confirmation box. Whether you’re adding a modal to a delete section or any other part of your application, this guide will help you achieve a sleek, professional look with minimal effort. | How to Create a Bootstrap 5 Modal Box That Looks Like Gmail

Introduction

Bootstrap 5 makes it easy to create modern, responsive web elements. In this guide, we focus on creating a modal box similar to the one used in Gmail for deleting messages. This modal box includes a confirmation dialog with options to cancel or proceed, designed to enhance user experience and provide a clean, user-friendly interface.

Step-by-Step Guide

Step 1: Create an HTML File
First, you’ll need to create an HTML file. Name this file index.html. This file will serve as the foundation for your modal box.
Step 2: Add Source Code
Copy the source code provided below and paste it into your index.html file. This code includes the necessary Bootstrap CSS and JavaScript, as well as custom styles to achieve the Gmail-like appearance for your modal.

<!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">
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Google Fonts -->
<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 Modal 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 Modal 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>
</body>
</html>

Step 3: View in Browser
After pasting the code into your HTML file, open the file in a web browser. You should see a button labeled “Launch demo modal.” Clicking this button will display the modal box with a Gmail-like design.

Customization Options

The provided modal box can be customized to fit your specific needs. You can adjust the styling, modify the text, or even change the layout. Here are some customization tips:

Change Modal Text: Modify the text within the <div class=”p-2 bd-highlight”> elements to fit your message.
Adjust Styles: Update the CSS in the <style> section to match your website’s color scheme and design.
Add More Buttons: Include additional buttons or features as needed for your application.

Demo and Source Code

To see a live demo of the modal box, visit the following link:

See Demo Here

Download the full source code

Download Full Source Code

If you encounter any issues or have questions, feel free to leave a comment. I’ll be happy to help!

Conclusion

Creating a Bootstrap 5 modal box that resembles Gmail’s design is straightforward with the provided code. By following this guide, you can enhance your website’s user experience with a clean and modern confirmation dialog. Customize the modal to fit your needs and integrate it into your project with ease.

Niyander Tech