Create A Responsive Modern Login Form for Smartphones
Tags: frontend, bootstrap, loginform, responsive
Published: 2020-01-19 17:46:37

In this article I’m creating a login form with validation error, using **HTML, CSS, bootstrap4 and font-awesome4.7**.

The project is optimized for smartphones and is responsive.

The design is created by Nikoleta, and if you need more info about it let me know!

![loginDesign](https://miro.medium.com/max/438/1*0WFJE0r4tilhpWlxqy9TeA.png)

#Let’s go
Create a folder to host your project. We are going to need an html and a css file. Optionally, you can have an image. I created a folder /image and in there I dropped my .png.

###HTML###
In the head add the bootstrap and the font-awesome library. 
Just before the closing /body tag, add the jquery and bootstrap.js library.

**HEAD**

```
<head>
<title>Login</title>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<!-- Bootstrap CSS -->
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
```

**BODY**

```
<!-- jQuery and Bootstrap JS -->
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
```

The first thing inside body it’s going to be a container to keep everything tidy (id=”loginContainer”). After that, I will have my form.

```
<div id=”loginContainer”>
<div class=”login-form”>
<form action=”” method=”post”>
.
.
.

</form>

</div>
</div>
```

Inside the form I will add the logo of our potential app

```
<div class="text-center padding-top-100px">
<img class=”mx-auto d-block margin-bottom-25px” width=”100px” src=”images/logo.png” >
</div>
```

And I will add three form groups: a. About the Username, b. About the Password and c. About the login button. For the first two form groups I’ll also use the font-awesome library, to add an icon next to the word.

```
<div class=”form-group “>
<div class=”input-group”>
<span class=”input-group-addon”><i class=”fa fa-user”></i></span>
<input type=”text” name=”username” class=”form-control” placeholder=”username” required=”required”>
</div>
</div>

<div class=”form-group”>
<div class=”input-group”>
<span class=”input-group-addon”><i class=”fa fa-lock”></i></span>
<input type=”password” name=”password” class=”form-control” placeholder=”*********” required=”required”>
</div>
</div>

<div class=”form-group”>
<button type=”submit” class=”btn btn-success btn-block”>
<a href=”#” class=”light-green-color”>Sign In</a>
</button>
</div>
```

Just before closing the </form> I will also add some common actions, like: “Remember me” and “Forgot Password?”

```
<div class=”clearfix”>
<label class=”pull-left checkbox-inline white-color”><input type=”checkbox”> Remember me</label>
<a href=”#” class=”pull-right text-success light-green-color”>Forgot Password?</a>
</div>
```

After the /form I’ll also add the “Don’t have an account, register”

```
<div class=”hint-text”>Don’t have an account? <a href=”#” class=”text-success light-green-color”>Register Now!</a></div>
```

And that’s it with html!! Let’s go to CSS.


##CSS##

I will start with some basic colors and padding/margins:

```CSS 
/* Basic Colors*/
.light-green-color { color: #95D99B }
.light-green-bg-color { background-color: #95D99B; }
.dark-green-color { color: #4D6F50; }
.dark-green-bg-color { background-color: #4D6F50; }
.white-color { color: #fff; }
.padding-top-100px {padding-top: 100px;}
.margin-bottom-25px {margin-bottom: 25px;}
```

And then I’ll continue with styling the actual form. In some cases, we are going to override the predefined style.


```CSS
#loginContainer{
background-color: #4D6F50;
height: 100vh;
}

.login-form {
width: auto;
margin: 0 auto;
}

.login-form .hint-text {
color: #fff;
text-align: center;
font-size: 0.8em;
}

.form-control, .btn {
min-height: 38px;
border-radius: 8px;
}

.login-btn {
font-size: 15px;
font-weight: bold;
}

.input-group {
background-color: #4D6F50;
color: green;
border: 2px solid #95D99B;
border-radius: 8px;
}

.input-group input::placeholder {
color: #fff;
background-color: #4D6F50;
font-size: 1em;
}

.input-group>.custom-select:not(:first-child),
.input-group>.form-control:not(:first-child) {
color: #fff;
background-color: #4D6F50;
text-transform: none;
font-size: 1em;
border: none;
}

.input-group-addon .fa {
font-size: 18px;
padding: 10px;
color: #95D99B;
}

.form-group {
margin-bottom: 1rem;
padding-left: 55px;
padding-right: 55px;
}

.clearfix {
padding-left: 55px;
padding-right: 55px;
}

.btn-success,
.btn-success:hover {
height: 42px;
color: #4D6F50;
background-color: #fff;
border-color: #4D6F50 !important;
text-transform: uppercase;
font-size: 1em;
}
```

And that’s it guys!! You just created a modern responsive login form optimized for smartphones!!

💻Find the code on:
* [Github](https://github.com/EleftheriaBatsou/modernLoginWithBootstrap4)
* [Codepen](https://codepen.io/EleftheriaBatsou/pen/YzPRKRb?editors=1000)

📹Or watch the video tutorial here:
{% youtube bmmVdDytE7g %}

--


**Thank you for taking the time to read my story and watch my videos.**

*Would you like to get me a coffee?!☕️
You can do that here → paypal.me/eleftheriabatsou
But If you can’t, that’s ok too 😍.*

It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.
[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/elef_in_tech/)