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.
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.
Table of Contents
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
- If you are a newbie, I highly recommend you download and install Visual Studio Code.
Now we all are on the same page, so let’s 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.
- Now in your VS Code, open the folder that you just created.
- 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.
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”.
- 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.
- 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.
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.
- 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>
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.
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>
Phewww!! We have finally completed our Login Form using Bootstrap. Now it’s time to actually reveal what we have just made.
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.
5 Comments
Akansha · May 26, 2021 at 5:49 am
Very Informative!
Vaishali Rastogi · May 26, 2021 at 9:52 am
Thanks, Akansha!
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.
create a login form in bootstrap Customer Service Support Information, Account Bill Pay - autocreditapprouve.com · November 30, 2021 at 6:56 pm
[…] Bootstrap Tutorial: Easy way to create a Login Form […]