Bootstrap 5 Modal Login Form Design

byCodingFlicks -September 23, 2022

0

Today we will share a Bootstrap 5 Snippet with you. We will learn how to Create a Bootstrap 5 Modal Login Form. A modal is a popup box window that is displayed on the top of the current page when we click on a particular button on an element of the webpage. The collection of user information and the use of modal windows to collect login information are both great. They are more convenient for users and can save valuable space on the page. Check out the video demo below to see what today's snippet looks like. Our website has many more such snippets. To get them, click on the Load More button at the bottom of our homepage and scroll down.

Hopefully, you've seen the video demo above to get an idea of what the snippet will look like.. Modal is usually used to grab the user's attention with some important information on a website or app. This element is useful for people to concentrate on something. It is said that a modal is a good tool for attracting users' attention. The login form can be presented in a modal if it is required to access the website.

Our entire snippet is done with Bootstrap 5. As we all know, The most popular framework for developing responsive and mobile-first websites is bootstrap. Bootstrap 5 is the latest version of bootstrap. It is possible to build a website or app in less time if it is built with bootstrap. We did this project by slightly modifying the default modal and form snippets of Bootstrap 5. A login form is used as a modal in this project. You can also add a signup form or something else if you want.

You May also like:

Bootstrap 5 Modal Login Form design[ Source Code ]:

After creating the project folder, you have to create two files. The external CSS file needs to be linked to the HTML file. You can either use the CDN of bootstrap or you can also download it from the bootstrap website and add the CSS and JS file to your project. You also need to add the latest jquery file otherwise the modal will not work. Put the code from the box below into your files. You can open it in the browser to see if it works. The code can be downloaded if it doesn't work.

ADD HTML:

<!DOCTYPE html>
<!-- codingflicks.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bootstrap 5 Modal Login Form</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ModalForm">
        Contact Us
      </button>
    <div class="modal fade" id="ModalForm" tabindex="-1" aria-labelledby="ModalFormLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="form-area bg-primary">
                    <h1 class="text-center">Login Form</h1>
                    <form>
                        <div class="mb-3 mt-4">
                            <label for="exampleInputEmail1" class="form-label">Your Email</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                        </div>
                        <div class="mb-3">
                            <label for="exampleInputPassword1" class="form-label">Your Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1">
                        </div>
                        <button type="submit" class="btn btn-light mt-3">LOGIN</button>
                        <p>New Here?    <a href="#">Signup</a></p>
                    </form>
                </div>
            </div>
          </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/js/bootstrap.min.js"></script>
</body>
</html>

ADD CSS:

body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}
  .modal-body {
    padding: 0;
  }
  .btn-close {
    position: absolute;
    right: 0;
    padding: 1em;
  }
  .form-area h1 {
    font-size: 2.3em;
    font-weight: bold;
  }
  .form-area {
	padding: 3em;
	max-width: 100%;
	color: #fff;
	box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.5);
} 
  
  .form-control {
    background-color: inherit;
    color: #fff;
    padding-left: 0;
    border: 1px solid #fff;
    border-radius: 0;
  }
  .form-area .btn {
	width: 100%;
	font-weight: 800;
	background-color: #fff;
	padding: 0.5em 0;
	border-radius: 50px;
}
.btn.btn-primary {
	padding: 15px 50px;
	font-family: alfa slab one;
	font-size: 20px;
	letter-spacing: 2px;
	border-radius: 50px;
}
  .form-area .btn:hover {
    background-color: inherit;
    color: #fff;
    border-color: #fff;
  }
  .form-area p {
    text-align: center;
    padding-top: 2em;
    color: #fff;
  }
  .form-area p a {
    color: #e1e1e1;
    text-decoration: none;
  }
  .form-area p a:hover {
    color: #fff;
  }

  @media (max-width: 600px){
    .form-area{
        padding: 1.5em;
    }
    .form-area h1{
        font-size: 18px;
    }
  }

I hope you were able to implement the code correctly. If you want to get the source code for more projects, please visit our website frequently. We appreciate your visit to our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.