Form đăng nhập bootstrap 4

Bootstrap 5 Login form component

Basic example

Typical sign in / login form with additional register buttons.

Login - register

By using pills you can place login and register forms in a single component. Check out our registration / signup form docs for more examples.

• Login
• Register

Login Page

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.

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

Please login to your account

Username

Password

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.

Sign in form

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.

Login Card

You can use the card component to make your sign in card stand out with a subtle shadow and rounded corners.

Login Screen

Full-screen login pages work well with high resolution images and simplistic input fields.

Login Modal

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.

Login Popup

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

Email

Password

Remember password

Sign up page

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.

The best offer
for your business

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?

Simple login form

Login / sign in forms on the other hand should include only the bare minimum of inputs required to sign into the existing account.

Registration page

Once again, the example below is a signup not a signin form. This one uses the glassmorphism effect along with minimalistic social media icons.

The best offer
for your business

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus, expedita iusto veniam atque, magni tempora mollitia dolorum consequatur nulla, neque debitis eos reprehenderit quasi ab ipsum nisi dolorem modi. Quos?

Registration Card

This card also uses glassmorphism to subtly overlay the image.

Sign up now

Sign up example

The last sign up example doesn't use columns. Instead it is embedded inside of a jumbotron card that spans the entire width of the signup page.

Sign up now