Bootstrap is an amazing front-end framework. It is a library that consists of already written and compiled CSS code. The developer can freely incorporate the code from Bootstrap’s official website and use it for their own projects.

Image by Lawrence Monk from Pixabay. Bootstrap Tutorial: Easy way to create a Login Form

Bootstrap acts as a life savior for the developers who do not know the styling part well. If you’ve never really used it before, then I can surely help you in getting started. Do not panic, Bootstrap is as simple as copying and pasting. If that is something you can do, then I highly recommend you to proceed further.

Creating a Login Form using Bootstrap is a pretty straightforward task and requires you to have some basic knowledge of HTML and CSS before. Now don’t run out of anxiety if you don’t know the basics of HTML, stay here and follow along. I promise to make the process as simple as I can to make you understand every bit of it.

So here we go, make sure you have the following before you dive in to follow the steps:

  • A Code Editor with which you are comfortable with

Now we all are on the same page, so lets begin the step-by-step process to make a classy Login Page.

  • Make a folder and name it. Like I’ve made my folder named “Login Form using Bootstrap” on desktop.
Bootstrap Tutorial: Easy way to create a Login Form
Make a folder and open it in VS Code
  • Now in your VS Code, open the folder that you just created.
Bootstrap Tutorial: Easy way to create a Login Form
Create a new folder in VS Code wherein we will put all our files
  • Make a new file under that folder, with the name “LoginForm.html“. Note that even if we will be using bootstrap, the file extension for that also remains .html only.
Bootstrap Tutorial: Easy way to create a Login Form
Make a new .html file

Adding Content to the <head> tag

  • Now it is time to code. But wait if you have VS code, then it comes with an extension called “EMMET”. It is an awesome extension to help you write the code with ease. We now need a basic HTML page structure which is known as “Boiler Plate Code”.
Bootstrap Tutorial: Easy way to create a Login Form
Add the “Boilerplate code to the page”
  • Change the title of your page and add the Bootstrap CSS CDN link. It will help us to add Bootstrap’s classes to our template. Simply google search “getbootstrap.com” and scroll till you get this CSS-only CDN link.
Bootstrap Tutorial: Easy way to create a Login Form
Open Bootstrap and copy paste the CSS-only CDN link
  • Now let’s just add some custom CSS to the page. For that, open your <style> tag under the <head> section. We want to change the background color of the page, so we will select the * property. In CSS, * is the universal selector, which basically means selecting all the elements of the page.
Bootstrap Tutorial: Easy way to create a Login Form
Adding Custom CSS to the webpage

Adding Content to the <body> tag

  • Head over to the official site of Bootstrap, and visit “Docs“. Search for “navbar” in the search menu. We need the navbar with a class called fixed-top. Search for it and copy the code. Now paste it into the HTML file under the “body” section.
Bootstrap Tutorial: Easy way to create a Login Form
Finding the fixed-top class in the Navbar section
  • Now modify the code as the code given below:
<nav class="navbar fixed-top">
  <div class="container-fluid d-flex justify-content-center">
   <a class="navbar-brand ml-3" href="#">
     <span class="text-light text-sm">Login Form Using</span>
     <span class="text-warning text-xl">Bootstrap</span>
   </a>
  </div>
</nav>
<br><br>
  • Now to add a heading, search the “Docs” again for “Container-fluid“. It is a type of container that takes up 100% width in all screen sizes.
<div class="container-fluid">
  ...
</div>
  • Within the container, we have to add our heading.
<h5 class=" d-flex justify-content-center pt-4 pb-4 font-weight-bold text-warning">
<em>
Enter your credentials here to login into your account!
</em>
</h5>
Bootstrap Tutorial: Easy way to create a Login Form
We have completed till much. For opening this, just go to the particular folder in your computer & double-click on the file that you made.
Bootstrap Tutorial: Easy way to create a Login Form
Your LoginForm.html will look like this if you’ve followed all the steps well.

Finally adding the Form code in our Login Form

The basic HTML form works with 2 fields: the label field and the input field. Here I have used a “div” tag instead of a label and styled it with bootstrap classes. Also for the Input fields, I have styled using Boostrap’s pre-defined classes.

Bootstrap Tutorial: Easy way to create a Login Form
Before you add the form code, understand the hierarchy

Make sure to insert the below code inside the main <div> tag which has the heading as well as the form.

<div class="container-fluid form-group d-flex justify-content-center">
<form action="#">
<div class="col-12 d-flex justify-content-center bg-transparent text-warning font-weight-bolder">
Enter your email-id</div>
<div class="col-12"><input class="col-12 bg-dark text-white border rounded-3 border-warning border-2 rounded-pill px-4 my-2 py-2" type="email"></div>
<br>
<div class="col-12 d-flex justify-content-center bg-transparent text-warning font-weight-bolder">Enter your Password</div>
<div class="col-12"><input class="col-12 bg-dark text-white border-2 rounded-3 border border-warning rounded-pill px-4 my-2 py-2" type="password"></div>
<br>
<div class="col-12 d-flex justify-content-center bg-transparent text-warning  font-weight-bolder">Enter your Date of Birth</div>
<div class="col-12"><input class="col-12 bg-dark text-white border border-2 rounded-3 border-warning rounded-pill px-4 my-2 py-2" type="datetime-local"></div>
<br>
<div>
<input
 class="w-100 bg-dark text-warning border border-5 border-warning font-weight-bolder rounded-pill px-4 py-2 my-1" type="submit" value="Login">Login</div>
</form>
</div>
Bootstrap Tutorial: Easy way to create a Login Form
Closing body tag and html tag

Phewww!! We have finally completed our Login Form using Bootstrap. Now it’s time to actually reveal what we have just made.

Our Login Form using Bootstrap

Here’s the google drive link, where you can find the source code: https://drive.google.com/file/d/1wZpZpgVSaQzg50JV6yDxkaYpGy-O6s6H/view?usp=sharing

If you’ve made it till here, I would highly appreciate it if you can share your feedback.

You can check my other related posts here.


Vaishali Rastogi

Hey There! I am Vaishali Rastogi and I am a tech-researcher. I've been doing writing for a good 4-5 years, so here I am now. Working on my own website to make people digitally aware of the updates in technology.

4 Comments

Akansha · May 26, 2021 at 5:49 am

Very Informative!

Marcin · May 29, 2021 at 7:20 pm

Keep it up. New developers need similar content. How about using Bootstrap and an API source next? Namaste

    Vaishali Rastogi · May 30, 2021 at 7:24 am

    Namaste Marcin! Glad to see this greeting 🙂
    Thanks and your suggestion is noted.

Comments are closed.