Login form
Bootstrap 5 Login form component
Responsive login form built with Bootstrap 5. Collection of examples for signup forms, full page login templates, login modals & many other sign in designs.
Basic example
Typical sign in / login form with additional register buttons.
import React from 'react';
import {
MDBContainer,
MDBInput,
MDBCheckbox,
MDBBtn,
MDBIcon
}
from 'mdb-react-ui-kit';
function App() {
return (
Sign in
);
}
export default App;
Login - register
By using pills you can place login and register forms in a single component.
import React, { useState } from 'react';
import {
MDBContainer,
MDBTabs,
MDBTabsItem,
MDBTabsLink,
MDBTabsContent,
MDBTabsPane,
MDBBtn,
MDBIcon,
MDBInput,
MDBCheckbox
}
from 'mdb-react-ui-kit';
function App() {
const [justifyActive, setJustifyActive] = useState('tab1');;
const handleJustifyClick = (value) => {
if (value === justifyActive) {
return;
}
setJustifyActive(value);
};
return (
handleJustifyClick('tab1')} active={justifyActive === 'tab1'}>
Login
handleJustifyClick('tab2')} active={justifyActive === 'tab2'}>
Register
Sign in with:
or:
Sign in
Not a member? Register
Sign un with:
or:
Sign up
);
}
export default App;
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.
import React from 'react';
import {MDBContainer, MDBCol, MDBRow, MDBBtn, MDBIcon, MDBInput, MDBCheckbox } from 'mdb-react-ui-kit';
function App() {
return (
Sign in with
Or
Login
Don't have an account? Register
Copyright © 2020. All rights reserved.
);
}
export default App;
.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.
import React from 'react';
import {
MDBBtn,
MDBContainer,
MDBRow,
MDBCol,
MDBInput
}
from 'mdb-react-ui-kit';
function App() {
return (
We are The Lotus Team
Please login to your account
Sign in
Forgot password?
Don't have an account?
Danger
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.
);
}
export default App;
.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%;
}
}
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.
import React from 'react';
import {
MDBContainer,
MDBCol,
MDBRow,
MDBBtn,
MDBIcon,
MDBInput,
MDBCheckbox
}
from 'mdb-react-ui-kit';
function App() {
return (
Sign in
OR
);
}
export default App;
.divider:after,
.divider:before {
content: "";
flex: 1;
height: 1px;
background: #eee;
}
Login Card
You can use the card component to make your sign in card stand out with a subtle shadow and rounded corners.
import React from 'react';
import {
MDBBtn,
MDBContainer,
MDBCard,
MDBCardBody,
MDBCardImage,
MDBRow,
MDBCol,
MDBIcon,
MDBInput
}
from 'mdb-react-ui-kit';
function App() {
return (
Sign into your account
Login
Forgot password?
Don't have an account? Register here
);
}
export default App;
body {
background-color: #9A616D;
}
Login Screen
Full-screen login pages work well with high resolution images and simplistic input fields.
import React from 'react';
import {
MDBBtn,
MDBContainer,
MDBRow,
MDBCol,
MDBIcon,
MDBInput
}
from 'mdb-react-ui-kit';
function App() {
return (
);
}
export default App;
@media (min-width: 1025px) {
.h-custom-2 {
height: 100%;
}
}
Login Modal
This example of a login card would work great as a popup on lighter backgrounds.
Don't have an account? Sign Up
import React from 'react';
import {
MDBBtn,
MDBContainer,
MDBRow,
MDBCol,
MDBCard,
MDBCardBody,
MDBInput,
MDBIcon
}
from 'mdb-react-ui-kit';
function App() {
return (
Login
Please enter your login and password!
Login
Don't have an account? Sign Up
);
}
export default App;
body {
/* fallback for old browsers */
background: #6a11cb;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1))
}
Login Popup
This example of a login card would work great as a popup on darker backgrounds.
Sign in
import React from 'react';
import {
MDBBtn,
MDBContainer,
MDBRow,
MDBCol,
MDBCard,
MDBCardBody,
MDBInput,
MDBIcon,
MDBCheckbox
}
from 'mdb-react-ui-kit';
function App() {
return (
Sign in
Please enter your login and password!
Login
);
}
export default App;
body {
background-color: #508bfc;
}
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?
import React from 'react';
import {
MDBBtn,
MDBContainer,
MDBRow,
MDBCol,
MDBCard,
MDBCardBody,
MDBInput,
MDBCheckbox,
MDBIcon
}
from 'mdb-react-ui-kit';
function App() {
return (
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?
sign up
or sign up with:
);
}
export default App;
body {
background-color: hsl(0, 0%, 96%);
}
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
import React from 'react';
import {
MDBBtn,
MDBContainer,
MDBCard,
MDBCardBody,
MDBCardImage,
MDBRow,
MDBCol,
MDBInput,
MDBCheckbox
}
from 'mdb-react-ui-kit';
function App() {
return (
Sign in
);
}
export default App;
.rounded-t-5 {
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
@media (max-width: 550px) {
.rounded-tr-lg-0 {
border-top-right-radius: 0.5rem;
border-bottom-left-radius: 0rem;
}
}
Registration page
Once again, the example below is a sign up not a sign in 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?
import React from 'react';
import {
MDBBtn,
MDBContainer,
MDBRow,
MDBCol,
MDBCard,
MDBCardBody,
MDBInput,
MDBCheckbox,
MDBIcon
}
from 'mdb-react-ui-kit';
function App() {
return (
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?
sign up
or sign up with:
);
}
export default App;
.background-radial-gradient {
background-color: hsl(218, 41%, 15%);
background-image: radial-gradient(650px circle at 0% 0%,
hsl(218, 41%, 35%) 15%,
hsl(218, 41%, 30%) 35%,
hsl(218, 41%, 20%) 75%,
hsl(218, 41%, 19%) 80%,
transparent 100%),
radial-gradient(1250px circle at 100% 100%,
hsl(218, 41%, 45%) 15%,
hsl(218, 41%, 30%) 35%,
hsl(218, 41%, 20%) 75%,
hsl(218, 41%, 19%) 80%,
transparent 100%);
}
#radius-shape-1 {
height: 220px;
width: 220px;
top: -60px;
left: -130px;
background: radial-gradient(#44006b, #ad1fff);
overflow: hidden;
}
#radius-shape-2 {
border-radius: 38% 62% 63% 37% / 70% 33% 67% 30%;
bottom: -60px;
right: -110px;
width: 300px;
height: 300px;
background: radial-gradient(#44006b, #ad1fff);
overflow: hidden;
}
.bg-glass {
background-color: hsla(0, 0%, 100%, 0.9) !important;
backdrop-filter: saturate(200%) blur(25px);
}
Registration Card
This card also uses glassmorphism to subtly overlay the image.
Sign up now
import React from 'react';
import {
MDBBtn,
MDBContainer,
MDBCard,
MDBCardBody,
MDBInput,
MDBIcon,
MDBRow,
MDBCol,
MDBCheckbox
}
from 'mdb-react-ui-kit';
function App() {
return (
Sign up now
sign up
or sign up with:
);
}
export default App;
.cascading-right {
margin-right: -50px;
}
@media (max-width: 900px) {
.cascading-right {
margin-right: 0;
}
}
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
import React from 'react';
import {
MDBBtn,
MDBContainer,
MDBCard,
MDBCardBody,
MDBCol,
MDBRow,
MDBInput,
MDBCheckbox,
MDBIcon
}
from 'mdb-react-ui-kit';
function App() {
return (
Sign up now
sign up
or sign up with:
);
}
export default App;