Responsive login form built with Bootstrap 5. Collection of examples for signup forms, full page login templates, login modals & many other sign in designs.
Typical sign in / login form with additional register buttons.
or sign up with:
By using pills you can place login and register forms in a single component. Check out our registration / signup form docs for more examples.
It’s a common practice to create a separate login page that takes the entire viewport. You can utilize one half of the page by placing a brand related image in it, and put your login inputs in a second column by using the Bootstrap grid.
Copyright © 2020. All rights reserved.
.divider:after, .divider:before < content: ""; flex: 1; height: 1px; background: #eee; >.h-custom < height: calc(100% - 73px); >@media (max-width: 450px) < .h-custom < height: 100%; >>
Login Template
Putting your brand logo on the login page is a great practice, in addition to a logo you can also add a mission statement or other text like in the example below. If you want to create a beautiful background for your text that will match your brand colors use our gradient generator.
We are The Lotus Team
We are more than just a company
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
We are The Lotus Team
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
.gradient-custom-2 < /* fallback for old browsers */ background: #fccb90; /* Chrome 10-25, Safari 5.1-6 */ background: -webkit-linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background: linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593); >@media (min-width: 768px) < .gradient-form < height: 100vh !important; >> @media (min-width: 769px) < .gradient-custom-2 < border-top-right-radius: .3rem; border-bottom-right-radius: .3rem; >> This is another variation of a sign in form, this one puts emphasis on social account login options by making the social account buttons as wide as the main sign in button.
OR
Continue with Facebook Continue with Twitter .divider:after, .divider:before
You can use the card component to make your sign in card stand out with a subtle shadow and rounded corners.
Full-screen login pages work well with high resolution images and simplistic input fields.
Logo .bg-image-vertical < position: relative; overflow: hidden; background-repeat: no-repeat; background-position: right center; background-size: auto 100%; >@media (min-width: 1025px) < .h-custom-2 < height: 100%; >>
This example of a login card would work great as a popup on lighter backgrounds. Check out our modal generator to customize your popup styles and behavior.
Please enter your login and password!
Login
Please enter your login and password!
Forgot password?
Sign Up
This example of a login card would work great as a popup on darker backgrounds. Check out our modal generator to customize your popup styles and behavior.
Sign in with google
A sign up page is different than a login page because it is used to create a new account, not to sign the user into an existing account.
You should consider adding more input fields to your registration pages. The example below uses additional inputs for first and last name. Other commonly used inputs are address forms, credit card and payment related inputs or even different varieties of survey forms in case you need to gather more data during registration.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, itaque accusantium odio, soluta, corrupti aliquam quibusdam tempora at cupiditate quis eum maiores libero veritatis? Dicta facilis sint aliquid ipsum atque?
Bootstrap is a free and open-source framework for creating responsive and user-friendly websites. While scrolling through the internet, we are often required to register ourselves to access certain website content for which we use the sign-in/ login form. With the use of Bootstrap, we can easily create responsive and user-friendly login forms for our usage.
A Bootstrap login form is used for entering the authentication credentials for a user and getting them access to the restricted content of a website. While accessing the contents of a website, we are often required to register ourselves and then log in with our credentials to access the content of the website.
This login step is added to fulfil the fundamental task of security in a website and restrict the user to access a certain part or the whole website.
The login form contains fields like Username and Password as the credentials that we have made while registering ourselves on the website. These credentials- username and password are what separate each user from the other.
Now, let us see the syntax to create a basic login form in bootstrap.
To create a login form in bootstrap, we have used the below-mentioned utility classes.
In this way, we can make a bootstrap login form using the above-mentioned classes.
Now, let us add some basic CSS to style the login form and make the login form a bit more attractive to the users.
We will be adding the CSS in a separate file that has already been imported into the HTML syntax. The CSS file is named login_style.css which contains the below-mentioned styling:
As you can see in the above output, we have changed the background colour and added some padding from the top. Moreover, we have added some border-radius to change the size of the form and some padding to the form itself.
As you have seen in the syntax above that for a desktop screen , the login form would look like the below —
Now, let us see how the login form has been made responsive and would appear ON mobile devices.
Bootstrap provides three different types of form layouts that are —
The vertical form is the one in which the labels and the input elements are placed vertically one below the other. For making a vertical form layout, we use certain bootstrap utilities such as container-fluid , form-container , form-group , checkbox , and btn btn-primary .
Now, let us see a vertical login form with the help of a code example.
Therefore, as you can see in the above output, we first have a heading in vertical form, after which we have the labels and their corresponding input elements placed one below the other in the login form. This is the default form layout provided by bootstrap.
The horizontal forms are the ones that have both the label and the input element on the same line. We place them in the same line by using the .row and .col-* utility classes of bootstrap.
As discussed previously, to make a login form, we surround the fields like the label and input element with the .form-group class. Therefore, we put the .row class with the .form-group utility and the .col-* utility with the label and the input element.
Now, let us see how to make a horizontal form with the help of a code example.
As you can see in the above output, we first have the heading in horizontal form, after which we have the label and the input elements placed on the same line.
The inline forms are the ones in which all the fields, that is, labels, input elements, buttons, and checkboxes are all in the same line.
Let us see an inline form with the help of a code example.
As you can see in the above output, we first have the heading as inline form, after which the email, password, remember me check box and the submit button are all in the same line.
Hey everyone. Today we will create login form page using plan bootstrap 5. So we will create responsive decent look sign in form, you can use easily on you website. You need just setup bootstrap 5 on your project and put below login form page code snippets example. As we now before we start you should setup bootstrap 5 project or you can use cdn or read below article.
1. Bootstrap 5 simple responsive login from.
/> [email protected]/dist/css/bootstrap.min.css" > > > > > > >Brand>Please enter your login and password!>Email address[email protected]"> >Password >Don't have an account? >Sign Up
Bootstrap 5 Login form Page Image
2. Bootstrap 5 decent look login from using border class.
> > > >> > > >Brand>Please enter your login and password!>Email address[email protected]"> >Password >Don't have an account? >Sign Up
Bootstrap 5 Login From Style
3. Bootstrap 5 login from using border & shadow classes.
> > > >> > > >Brand>Please enter your login and password!>Email address[email protected]"> >Password >Don't have an account? >Sign Up
Bootstrap 5 Login From Shadow Style