How to Create a Login Form using Bootstrap 4

byCodingFlicks -August 18, 2020

1

Login Form design using HTML CSS and Bootstrap

Welcome Back. Today we will create a Simple Responsive login form with the help of HTML and CSS. In my previous blog, We shared an article about Responsive Homepage Design using HTML and CSS. Today we will use the Bootstrap 4 Framework to design this beautiful-looking login form.

Login Form is used to authenticate a particular user by filling up the credentials. Generally, a login form contains information like username, password, PIN, etc. But for the sake of this snippet, we will create only two information fields, username and password. Login forms are used in websites, applications, and so on. So designing a contact form is an essential part of web design or web application design process.

Video Tutorial:

In this snippet (login form Bootstrap 4), we used Bootstrap 4 classes to design the login form. Every class used here has its styling. However, I made some modifications in styling to give it a different look. To make this snippet work, you have added Bootstrap 4 CDN files to your HTML page. I have added those in the following for your convenience. You have to copy the files and paste them to your project.

You May Also Like:

In the HTML part, we took the bootstrap 4 container class and brought the h-100 bootstrap class to make the container 100% width. Inside that, We have taken a div with class d-flex. We have also added a justify-content-center and h-100 class to move the form to the web page's center. After that, I did the HTML markup for the form, taking the required input groups. We have also added a font-awesome icon for both the input boxes in the login form. For that, We had to add font-awesome CDN in the HTML file. We did some basic styling of form in the CSS part which you can watch in the above video tutorial.

Login Form using Bootstrap 4 [ Source Code ]:

To create this snippet, you need to create two files. One of them is an HTML file, and the other is a CSS file. After that, you need to copy the HTML and CSS code from the code box below, Later, paste them into the appropriate files, and save them. If you want to download the whole code, you can do it by clicking the download button below this post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->	
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to Create a Login Form using Bootstrap 4</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    

    <div class="container h-100">
		<div class="container h-100">
			<div class="d-flex justify-content-center h-100">
				<div class="form-area">
					<div class="d-flex justify-content-center">
						<h2>Signin Your Account</h2>
					</div>
					<div class="d-flex justify-content-center form_container">
						<form>
							<div class="input-group mb-3">
								<div class="input-group-append">
									<span class="input-group-text"><i class="fa fa-user"></i></span>
								</div><input class="form-control input_user" name="" placeholder="username" type="text" value="">
							</div>
							<div class="input-group mb-3">
								<div class="input-group-append">
									<span class="input-group-text"><i class="fa fa-key"></i></span>
								</div><input class="form-control input_pass" name="" placeholder="password" type="password" value="">
							</div>
							<div class="form-group">
								<div class="custom-control custom-checkbox">
									<input class="custom-control-input" id="customControlInline" type="checkbox"> <label class="custom-control-label" for="customControlInline">Remember me</label>
								</div>
							</div>
							<div class="d-flex justify-content-center mt-3 login_container">
								<button class="btn login_btn" name="button" type="button">Login</button>
							</div>
						</form>
					</div>
					<div class="mt-4">
						<div class="d-flex justify-content-center links">
							Don't have an account? <a class="ml-2" href="#">Sign Up</a>
						</div>
						<div class="d-flex justify-content-center links">
							<a href="#">Forgot your password?</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>





    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

ADD CSS:

body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	background: #6a62d2 !important;
	color: #262626;
}
.form-area {
	height: 400px;
	width: 350px;
	margin-top: auto;
	margin-bottom: auto;
	background: #fff;
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 10px;
	box-shadow: 15px 15px 20px 0px rgba(0, 0, 0, 0.3);
	border-radius: 30px;
}
a {
	color: #acacac;
}
.form-area h2 {
	color: #262626;
	font-family: lato;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 20px;
}
.form_container {
	margin-top: 35px;
}
.login_btn {
	width: 100%;
	background: deeppink !important;
	color: #fff !important;
	text-transform: uppercase;
	font-weight: bold;
}
.login_btn:focus {
	box-shadow: none !important;
	outline: 0px !important;
}
.login_container {
	padding: 0 2rem;
}
.input-group-text {
	background: deeppink !important;
	color: white !important;
	border: 0 !important;
	border-radius: 0.25rem 0 0 0.25rem !important;
}
.input_user, .input_pass:focus {
	box-shadow: none !important;
	outline: 0px !important;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
	background-color: #c0392b !important;
}

That's it for this tutorial. You can click the Load More button on our homepage to get more such snippets. Follow this blog on our social media profiles to stay updated with latest articles. Thanks for visiting our website.

DOWNLOAD CODE

1 Comments

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

Unknown5 April 2022 at 14:15
Hi guys,
We can get a huge knowledge about web developing from https://w3schoolweb.com/ .This site covers vast area in Web Developing .
ReplyDelete
Replies

Add comment

Post a Comment