Designing Responsive Login Form using Bootstrap 4

1. Introduction

In this article, we will learn how to design a responsive login form using Bootstrap 4. We will use the Bootstrap grid system to develop a responsive login form and apply a super clean CSS to make it beautiful and professional.

Demo link: https://satishpandey.github.io/bootstrap4-examples/login-form.html

2. Prepare Login Form

In an HTML form, the first thing you should consider is using a <form> tag with <input> fields and a button. Let’s create a basic login form.

<form>
  <div class="row">
    <div class="col-auto">
      <label>Sign in</label>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <label for="inputEmail" class="">Email</label> <input
        class="form-control" type="email" id="inputEmail"
        class="form-control" placeholder="Email address" required
        autofocus>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <label for="inputPassword" class="">Password</label> <input
        class="form-control" type="password" id="inputPassword"
        class="form-control" placeholder="Password" required>
    </div>
  </div>
  <div class="row btn-list">
    <div class="col-12">
      <button class="btn btn-primary btn-submit" type="submit">Login</button>
    </div>
  </div>
</form>

You usually need to include a company logo and some heading in login forms along with some useful links and error message display area. The complete HTML page contains all things ready for you.

Let’s see a screenshot how the HTML form looks like before applying any styling. Don’t worry we will apply some styling to make our page more professional.

3. Apply CSS

Now it’s time to design our newly created login form. Let’s see how it will look after applying the styling.

Web view

Mobile view

Designed Responsive Login Form
Designed Responsive Login Form

Now if you see closely after designing, the form is aligned centered vertically. Let’s see how we do that by applying a style.

html, body {
  width: 100%;
  height: 100%;
  align-items: center;
  display: flex;
  background-color: #041e42;
}

All other styling classes are available in the attached CSS file with the developed login form and available on GitHub.

I hope this post will help you to understand the basics of designing a login form. Enjoy!

4. Conclusion

In this article, we have learned how to design a responsive login form using Bootstrap 4. We developed a login form using the Bootstrap grid system and made it beautiful and professional by applying CSS.

As always the full source can be found over on GitHub.

Leave a Reply

Your email address will not be published. Required fields are marked *