Modal boxes are those little pop-ups you see on websites—super handy for grabbing attention or asking, “You sure about that?” Today, I’m gonna show you How to Create a Gmail-Style Bootstrap 5 Modal Box. It’s clean, it’s pro, and trust me, it’s not hard to slap together. Newbie or pro, you’ll have this done in no time.
Why Bootstrap 5?
Why go with Bootstrap 5? It’s a no-brainer—it works on phones, laptops, whatever, without you stressing over it. Plus, you can tweak it easy—change the words or colors in like two seconds. And for the folks clicking it? It’s got big, obvious buttons and a layout that just makes sense.
Let’s Do This: Step-by-Step
Step 1: Start Fresh
Open any code editor —I am talking Notepad++, Create file index.html. That’s our playground.
Step 2: Insert this code into the index.html file.
Here is the code. Copy this chunk and paste it into your file. It’s got Bootstrap’s styles and scripts, a neat font from Google, and a couple little tweaks to make it look sharp.
<!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>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Step 3: Save & Run
Save the file and open it in your browser—either by dragging it in or clicking to open. Click the “Hit Me” button, and just like that—bam! Your modal pops up. Looks familiar, like Gmail’s, right?
Mess With It
Wanna switch it up? Here’s some ideas:
- Change the Text: Swap that paragraph for something like, “You sure you wanna ditch this?”
- Tweak the Look: Jump into the <style> part—try a wild color or make the buttons bigger.
- Add Stuff: Toss in another button or an emoji if you’re feeling extra.
See It Live
Click this button to see the demo! You can also download my code and tweak it as you like.
All Done!
There you have it—a slick, Gmail-style modal that’s easy to build and looks legit. Tweak it, customize it, and drop it into your project!
Hit a snag or just wanna chat? Drop a comment—I’m here!