How to create a modal using bootstrap?

You have probably seen dialog box/popup window on some websites. In the bootstrap world, it is called Modal. Modal is a great way to display some extra content. You can use modal to show lightboxes, user notifications, or custom contents.

In this post, we will create a simple page that contains a navbar. The navbar contains a login button that shows our login modal when clicked.

First, let me show you a screenshot of the page that I have created so that you have a visual idea of what our modal look like.

You can see in the above screenshot that our modal body contains two input fields and two buttons and the modal header contains the title and a dismiss button.

Now, let’s see the HTML file.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">

        <!-- CSS only -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
        rel="stylesheet" 
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 
        crossorigin="anonymous">

        <title>Modal Example</title>
    </head>

    <body>

        <!-- Navbar -->
        <nav class="navbar navbar-dark navbar-expand-sm fixed-top bg-dark">
            <div class="container ps-5">
                <a class="navbar-brand ms-5" href="modal_example.html">
                    <img src="logo.png" alt="logo" width="41" height="31">
                </a>
                <ul class="navbar-nav me-auto">
                    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">About us</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact us</a></li>
                </ul>
                <span class="navbar-text">
                    <a role="button" id="loginButton" data-bs-target="#modalExample" data-bs-toggle="modal">Login</a>
                </span>
            </div>
        </nav>

        <!-- Modal -->
        <div class="modal fade" id="modalExample">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-dark">
                        <h5 class="modal-title text-white">Login</h5>
                        <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="row mb-3">
                                <label for="email" class="col-form-label col-md-3">Email</label>
                                <div class="col-md-9">
                                    <input type="email" id="email" placeholder="Email" class="form-control">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="password" class="col-form-label col-md-3">Password</label>
                                <div class="col-md-9">
                                    <input type="password" id="password" placeholder="Password" class="form-control">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-9 offset-3">
                                    <button class="btn btn-dark">Login</button>
                                    <button class="btn btn-secondary">Cancel</button>
                                </div>
                            </div>
                            
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- JavaScript Bundle with Popper -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" 
     integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 
     crossorigin="anonymous">
    </script>
    </body>
</html>

So, that’s our HTML file that contains a navbar and a modal.

Goodbye.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: