How to create a Login Form using Bootstrap 5 !!!!

Ankan Das
Ankan Das
Apr 6 · 3 min read

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.

I’m using Visual studio Code for Code Editor and Windows machine. In this article , I completely focused with bootstrap for beginners & didn’t spend much time to design the form more attractive. You can definitely design the form much more better than me.

1.Create HTML Template:

Before using bootstrap, let’s create a file a blank html file with boilerplate html template.

2. Bootstrap Installation:

To use bootstrap in your current project, first visit the official website of Bootstrap. You can download the bootstrap from here but I recommend you that there is no need to download anything right now, just follow my instructions .

Now click on “ Get Started “

Here you will get a CSS link & a Javascript buddle link.

First Copy that CSS link and paste it your code after the </title> tag. Like this:

Like the same way you just need to copy and paste the javascript buddle link in your code

Now your code suppose to look like this. There is a Separate Javascript link provided in the bootstrap page, we do not need to copy and paste it in our code. So here we are done with bootstrap installation in our project.

3. Create a Form:

We have to search for a From in search section.

Here, you can see that there are various type of form are available for us. Now scroll down a little bit. and we have to select this:

This is our Login Form

Just copy the provided code and paste it in you code after the </body> tag.

if you now save the code and open it in your browser, you will get to see this:

This is it !!!

We are done with our form. Now if you want to align it properly and change the look and feel of the form, you feel free to do so.

And one of the most important thing i.e. the form is completely responsive in nature.

Thank You So much for reading !!

Feel free to ask any problem.

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Ankan Das

Written by

Ankan Das

I’m a Web Developer and Content Creator on Youtube . To know more about me lets connect : https://ankandaslinks.netlify.app/

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store