Login form
React Bootstrap 5 Login form
Responsive React 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 (
<MDBContainer className="p-3 my-5 d-flex flex-column w-50">
<MDBInput wrapperClass='mb-4' label='Email address' id='form1' type='email'/>
<MDBInput wrapperClass='mb-4' label='Password' id='form2' type='password'/>
<div className="d-flex justify-content-between mx-3 mb-4">
<MDBCheckbox name='flexCheck' value='' id='flexCheckDefault' label='Remember me' />
<a href="!#">Forgot password?</a>
</div>
<MDBBtn className="mb-4">Sign in</MDBBtn>
<div className="text-center">
<p>Not a member? <a href="#!">Register</a></p>
<p>or sign up with:</p>
<div className='d-flex justify-content-between mx-auto' style={{width: '40%'}}>
<MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='facebook-f' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='twitter' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='google' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='github' size="sm"/>
</MDBBtn>
</div>
</div>
</MDBContainer>
);
}
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 (
<MDBContainer className="p-3 my-5 d-flex flex-column w-50">
<MDBTabs pills justify className='mb-3 d-flex flex-row justify-content-between'>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleJustifyClick('tab1')} active={justifyActive === 'tab1'}>
Login
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleJustifyClick('tab2')} active={justifyActive === 'tab2'}>
Register
</MDBTabsLink>
</MDBTabsItem>
</MDBTabs>
<MDBTabsContent>
<MDBTabsPane show={justifyActive === 'tab1'}>
<div className="text-center mb-3">
<p>Sign in with:</p>
<div className='d-flex justify-content-between mx-auto' style={{width: '40%'}}>
<MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='facebook-f' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='twitter' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='google' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='github' size="sm"/>
</MDBBtn>
</div>
<p className="text-center mt-3">or:</p>
</div>
<MDBInput wrapperClass='mb-4' label='Email address' id='form1' type='email'/>
<MDBInput wrapperClass='mb-4' label='Password' id='form2' type='password'/>
<div className="d-flex justify-content-between mx-4 mb-4">
<MDBCheckbox name='flexCheck' value='' id='flexCheckDefault' label='Remember me' />
<a href="!#">Forgot password?</a>
</div>
<MDBBtn className="mb-4 w-100">Sign in</MDBBtn>
<p className="text-center">Not a member? <a href="#!">Register</a></p>
</MDBTabsPane>
<MDBTabsPane show={justifyActive === 'tab2'}>
<div className="text-center mb-3">
<p>Sign un with:</p>
<div className='d-flex justify-content-between mx-auto' style={{width: '40%'}}>
<MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='facebook-f' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='twitter' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='google' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='github' size="sm"/>
</MDBBtn>
</div>
<p className="text-center mt-3">or:</p>
</div>
<MDBInput wrapperClass='mb-4' label='Name' id='form1' type='text'/>
<MDBInput wrapperClass='mb-4' label='Username' id='form1' type='text'/>
<MDBInput wrapperClass='mb-4' label='Email' id='form1' type='email'/>
<MDBInput wrapperClass='mb-4' label='Password' id='form1' type='password'/>
<div className='d-flex justify-content-center mb-4'>
<MDBCheckbox name='flexCheck' id='flexCheckDefault' label='I have read and agree to the terms' />
</div>
<MDBBtn className="mb-4 w-100">Sign up</MDBBtn>
</MDBTabsPane>
</MDBTabsContent>
</MDBContainer>
);
}
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 (
<MDBContainer fluid className="p-3 my-5 h-custom">
<MDBRow>
<MDBCol col='10' md='6'>
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.webp" class="img-fluid" alt="Sample image" />
</MDBCol>
<MDBCol col='4' md='6'>
<div className="d-flex flex-row align-items-center justify-content-center">
<p className="lead fw-normal mb-0 me-3">Sign in with</p>
<MDBBtn floating size='md' tag='a' className='me-2'>
<MDBIcon fab icon='facebook-f' />
</MDBBtn>
<MDBBtn floating size='md' tag='a' className='me-2'>
<MDBIcon fab icon='twitter' />
</MDBBtn>
<MDBBtn floating size='md' tag='a' className='me-2'>
<MDBIcon fab icon='linkedin-in' />
</MDBBtn>
</div>
<div className="divider d-flex align-items-center my-4">
<p className="text-center fw-bold mx-3 mb-0">Or</p>
</div>
<MDBInput wrapperClass='mb-4' label='Email address' id='formControlLg' type='email' size="lg"/>
<MDBInput wrapperClass='mb-4' label='Password' id='formControlLg' type='password' size="lg"/>
<div className="d-flex justify-content-between mb-4">
<MDBCheckbox name='flexCheck' value='' id='flexCheckDefault' label='Remember me' />
<a href="!#">Forgot password?</a>
</div>
<div className='text-center text-md-start mt-4 pt-2'>
<MDBBtn className="mb-0 px-5" size='lg'>Login</MDBBtn>
<p className="small fw-bold mt-2 pt-1 mb-2">Don't have an account? <a href="#!" className="link-danger">Register</a></p>
</div>
</MDBCol>
</MDBRow>
<div className="d-flex flex-column flex-md-row text-center text-md-start justify-content-between py-4 px-4 px-xl-5 bg-primary">
<div className="text-white mb-3 mb-md-0">
Copyright © 2020. All rights reserved.
</div>
<div>
<MDBBtn tag='a' color='none' className='mx-3' style={{ color: 'white' }}>
<MDBIcon fab icon='facebook-f' size="md"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='mx-3' style={{ color: 'white' }}>
<MDBIcon fab icon='twitter' size="md"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='mx-3' style={{ color: 'white' }}>
<MDBIcon fab icon='google' size="md"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='mx-3' style={{ color: 'white' }}>
<MDBIcon fab icon='linkedin-in' size="md"/>
</MDBBtn>
</div>
</div>
</MDBContainer>
);
}
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 (
<MDBContainer className="my-5 gradient-form">
<MDBRow>
<MDBCol col='6' className="mb-5">
<div className="d-flex flex-column ms-5">
<div className="text-center">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/lotus.webp"
style={{width: '185px'}} alt="logo" />
<h4 className="mt-1 mb-5 pb-1">We are The Lotus Team</h4>
</div>
<p>Please login to your account</p>
<MDBInput wrapperClass='mb-4' label='Email address' id='form1' type='email'/>
<MDBInput wrapperClass='mb-4' label='Password' id='form2' type='password'/>
<div className="text-center pt-1 mb-5 pb-1">
<MDBBtn className="mb-4 w-100 gradient-custom-2">Sign in</MDBBtn>
<a className="text-muted" href="#!">Forgot password?</a>
</div>
<div className="d-flex flex-row align-items-center justify-content-center pb-4 mb-4">
<p className="mb-0">Don't have an account?</p>
<MDBBtn outline className='mx-2' color='danger'>
Danger
</MDBBtn>
</div>
</div>
</MDBCol>
<MDBCol col='6' className="mb-5">
<div className="d-flex flex-column justify-content-center gradient-custom-2 h-100 mb-4">
<div className="text-white px-3 py-4 p-md-5 mx-md-4">
<h4 class="mb-4">We are more than just a company</h4>
<p class="small mb-0">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.
</p>
</div>
</div>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default App;
.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;
}
}
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 (
<MDBContainer fluid className="p-3 my-5">
<MDBRow>
<MDBCol col='10' md='6'>
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.svg" class="img-fluid" alt="Phone image" />
</MDBCol>
<MDBCol col='4' md='6'>
<MDBInput wrapperClass='mb-4' label='Email address' id='formControlLg' type='email' size="lg"/>
<MDBInput wrapperClass='mb-4' label='Password' id='formControlLg' type='password' size="lg"/>
<div className="d-flex justify-content-between mx-4 mb-4">
<MDBCheckbox name='flexCheck' value='' id='flexCheckDefault' label='Remember me' />
<a href="!#">Forgot password?</a>
</div>
<MDBBtn className="mb-4 w-100" size="lg">Sign in</MDBBtn>
<div className="divider d-flex align-items-center my-4">
<p className="text-center fw-bold mx-3 mb-0">OR</p>
</div>
<MDBBtn className="mb-4 w-100" size="lg" style={{backgroundColor: '#3b5998'}}>
<MDBIcon fab icon="facebook-f" className="mx-2"/>
Continue with facebook
</MDBBtn>
<MDBBtn className="mb-4 w-100" size="lg" style={{backgroundColor: '#55acee'}}>
<MDBIcon fab icon="twitter" className="mx-2"/>
Continue with twitter
</MDBBtn>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
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 (
<MDBContainer className="my-5">
<MDBCard>
<MDBRow className='g-0'>
<MDBCol md='6'>
<MDBCardImage src='https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/img1.webp' alt="login form" className='rounded-start w-100'/>
</MDBCol>
<MDBCol md='6'>
<MDBCardBody className='d-flex flex-column'>
<div className='d-flex flex-row mt-2'>
<MDBIcon fas icon="cubes fa-3x me-3" style={{ color: '#ff6219' }}/>
<span className="h1 fw-bold mb-0">Logo</span>
</div>
<h5 className="fw-normal my-4 pb-3" style={{letterSpacing: '1px'}}>Sign into your account</h5>
<MDBInput wrapperClass='mb-4' label='Email address' id='formControlLg' type='email' size="lg"/>
<MDBInput wrapperClass='mb-4' label='Password' id='formControlLg' type='password' size="lg"/>
<MDBBtn className="mb-4 px-5" color='dark' size='lg'>Login</MDBBtn>
<a className="small text-muted" href="#!">Forgot password?</a>
<p className="mb-5 pb-lg-2" style={{color: '#393f81'}}>Don't have an account? <a href="#!" style={{color: '#393f81'}}>Register here</a></p>
<div className='d-flex flex-row justify-content-start'>
<a href="#!" className="small text-muted me-1">Terms of use.</a>
<a href="#!" className="small text-muted">Privacy policy</a>
</div>
</MDBCardBody>
</MDBCol>
</MDBRow>
</MDBCard>
</MDBContainer>
);
}
export default App;
body {
background-color: #9A616D;
}
Login Screen
Full-screen login pages work well with high resolution images and simplistic input fields.
Logo
import React from 'react';
import {
MDBBtn,
MDBContainer,
MDBRow,
MDBCol,
MDBIcon,
MDBInput
}
from 'mdb-react-ui-kit';
function App() {
return (
<MDBContainer fluid>
<MDBRow>
<MDBCol sm='6'>
<div className='d-flex flex-row ps-5 pt-5'>
<MDBIcon fas icon="crow fa-3x me-3" style={{ color: '#709085' }}/>
<span className="h1 fw-bold mb-0">Logo</span>
</div>
<div className='d-flex flex-column justify-content-center h-custom-2 w-75 pt-4'>
<h3 className="fw-normal mb-3 ps-5 pb-3" style={{letterSpacing: '1px'}}>Log in</h3>
<MDBInput wrapperClass='mb-4 mx-5 w-100' label='Email address' id='formControlLg' type='email' size="lg"/>
<MDBInput wrapperClass='mb-4 mx-5 w-100' label='Password' id='formControlLg' type='password' size="lg"/>
<MDBBtn className="mb-4 px-5 mx-5 w-100" color='info' size='lg'>Login</MDBBtn>
<p className="small mb-5 pb-lg-3 ms-5"><a class="text-muted" href="#!">Forgot password?</a></p>
<p className='ms-5'>Don't have an account? <a href="#!" class="link-info">Register here</a></p>
</div>
</MDBCol>
<MDBCol sm='6' className='d-none d-sm-block px-0'>
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/img3.webp"
alt="Login image" className="w-100" style={{objectFit: 'cover', objectPosition: 'left'}} />
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
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 (
<MDBContainer fluid>
<MDBRow className='d-flex justify-content-center align-items-center h-100'>
<MDBCol col='12'>
<MDBCard className='bg-dark text-white my-5 mx-auto' style={{borderRadius: '1rem', maxWidth: '400px'}}>
<MDBCardBody className='p-5 d-flex flex-column align-items-center mx-auto w-100'>
<h2 className="fw-bold mb-2 text-uppercase">Login</h2>
<p className="text-white-50 mb-5">Please enter your login and password!</p>
<MDBInput wrapperClass='mb-4 mx-5 w-100' labelClass='text-white' label='Email address' id='formControlLg' type='email' size="lg"/>
<MDBInput wrapperClass='mb-4 mx-5 w-100' labelClass='text-white' label='Password' id='formControlLg' type='password' size="lg"/>
<p className="small mb-3 pb-lg-2"><a class="text-white-50" href="#!">Forgot password?</a></p>
<MDBBtn outline className='mx-2 px-5' color='white' size='lg'>
Login
</MDBBtn>
<div className='d-flex flex-row mt-3 mb-5'>
<MDBBtn tag='a' color='none' className='m-3' style={{ color: 'white' }}>
<MDBIcon fab icon='facebook-f' size="lg"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='m-3' style={{ color: 'white' }}>
<MDBIcon fab icon='twitter' size="lg"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='m-3' style={{ color: 'white' }}>
<MDBIcon fab icon='google' size="lg"/>
</MDBBtn>
</div>
<div>
<p className="mb-0">Don't have an account? <a href="#!" class="text-white-50 fw-bold">Sign Up</a></p>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
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 (
<MDBContainer fluid>
<MDBRow className='d-flex justify-content-center align-items-center h-100'>
<MDBCol col='12'>
<MDBCard className='bg-white my-5 mx-auto' style={{borderRadius: '1rem', maxWidth: '500px'}}>
<MDBCardBody className='p-5 w-100 d-flex flex-column'>
<h2 className="fw-bold mb-2 text-center">Sign in</h2>
<p className="text-white-50 mb-3">Please enter your login and password!</p>
<MDBInput wrapperClass='mb-4 w-100' label='Email address' id='formControlLg' type='email' size="lg"/>
<MDBInput wrapperClass='mb-4 w-100' label='Password' id='formControlLg' type='password' size="lg"/>
<MDBCheckbox name='flexCheck' id='flexCheckDefault' className='mb-4' label='Remember password' />
<MDBBtn size='lg'>
Login
</MDBBtn>
<hr className="my-4" />
<MDBBtn className="mb-2 w-100" size="lg" style={{backgroundColor: '#dd4b39'}}>
<MDBIcon fab icon="google" className="mx-2"/>
Sign in with google
</MDBBtn>
<MDBBtn className="mb-4 w-100" size="lg" style={{backgroundColor: '#3b5998'}}>
<MDBIcon fab icon="facebook-f" className="mx-2"/>
Sign in with facebook
</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
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 (
<MDBContainer fluid className='p-4'>
<MDBRow>
<MDBCol md='6' className='text-center text-md-start d-flex flex-column justify-content-center'>
<h1 className="my-5 display-3 fw-bold ls-tight px-3">
The best offer <br />
<span className="text-primary">for your business</span>
</h1>
<p className='px-3' style={{color: 'hsl(217, 10%, 50.8%)'}}>
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?
</p>
</MDBCol>
<MDBCol md='6'>
<MDBCard className='my-5'>
<MDBCardBody className='p-5'>
<MDBRow>
<MDBCol col='6'>
<MDBInput wrapperClass='mb-4' label='First name' id='form1' type='text'/>
</MDBCol>
<MDBCol col='6'>
<MDBInput wrapperClass='mb-4' label='Last name' id='form1' type='text'/>
</MDBCol>
</MDBRow>
<MDBInput wrapperClass='mb-4' label='Email' id='form1' type='email'/>
<MDBInput wrapperClass='mb-4' label='Password' id='form1' type='password'/>
<div className='d-flex justify-content-center mb-4'>
<MDBCheckbox name='flexCheck' value='' id='flexCheckDefault' label='Subscribe to our newsletter' />
</div>
<MDBBtn className='w-100 mb-4' size='md'>sign up</MDBBtn>
<div className="text-center">
<p>or sign up with:</p>
<MDBBtn tag='a' color='none' className='mx-3' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='facebook-f' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='mx-3' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='twitter' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='mx-3' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='google' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='mx-3' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='github' size="sm"/>
</MDBBtn>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
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 (
<MDBContainer className='my-5'>
<MDBCard>
<MDBRow className='g-0 d-flex align-items-center'>
<MDBCol md='4'>
<MDBCardImage src='https://mdbootstrap.com/img/new/ecommerce/vertical/004.jpg' alt='phone' className='rounded-t-5 rounded-tr-lg-0' fluid />
</MDBCol>
<MDBCol md='8'>
<MDBCardBody>
<MDBInput wrapperClass='mb-4' label='Email address' id='form1' type='email'/>
<MDBInput wrapperClass='mb-4' label='Password' id='form2' type='password'/>
<div className="d-flex justify-content-between mx-4 mb-4">
<MDBCheckbox name='flexCheck' value='' id='flexCheckDefault' label='Remember me' />
<a href="!#">Forgot password?</a>
</div>
<MDBBtn className="mb-4 w-100">Sign in</MDBBtn>
</MDBCardBody>
</MDBCol>
</MDBRow>
</MDBCard>
</MDBContainer>
);
}
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 (
<MDBContainer fluid className='p-4 background-radial-gradient overflow-hidden'>
<MDBRow>
<MDBCol md='6' className='text-center text-md-start d-flex flex-column justify-content-center'>
<h1 className="my-5 display-3 fw-bold ls-tight px-3" style={{color: 'hsl(218, 81%, 95%)'}}>
The best offer <br />
<span style={{color: 'hsl(218, 81%, 75%)'}}>for your business</span>
</h1>
<p className='px-3' style={{color: 'hsl(218, 81%, 85%)'}}>
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?
</p>
</MDBCol>
<MDBCol md='6' className='position-relative'>
<div id="radius-shape-1" className="position-absolute rounded-circle shadow-5-strong"></div>
<div id="radius-shape-2" className="position-absolute shadow-5-strong"></div>
<MDBCard className='my-5 bg-glass'>
<MDBCardBody className='p-5'>
<MDBRow>
<MDBCol col='6'>
<MDBInput wrapperClass='mb-4' label='First name' id='form1' type='text'/>
</MDBCol>
<MDBCol col='6'>
<MDBInput wrapperClass='mb-4' label='Last name' id='form2' type='text'/>
</MDBCol>
</MDBRow>
<MDBInput wrapperClass='mb-4' label='Email' id='form3' type='email'/>
<MDBInput wrapperClass='mb-4' label='Password' id='form4' type='password'/>
<div className='d-flex justify-content-center mb-4'>
<MDBCheckbox name='flexCheck' value='' id='flexCheckDefault' label='Subscribe to our newsletter' />
</div>
<MDBBtn className='w-100 mb-4' size='md'>sign up</MDBBtn>
<div className="text-center">
<p>or sign up with:</p>
<MDBBtn tag='a' color='none' className='mx-3' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='facebook-f' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='mx-3' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='twitter' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='mx-3' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='google' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='mx-3' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='github' size="sm"/>
</MDBBtn>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
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 (
<MDBContainer fluid className='my-5'>
<MDBRow className='g-0 align-items-center'>
<MDBCol col='6'>
<MDBCard className='my-5 cascading-right' style={{background: 'hsla(0, 0%, 100%, 0.55)', backdropFilter: 'blur(30px)'}}>
<MDBCardBody className='p-5 shadow-5 text-center'>
<h2 className="fw-bold mb-5">Sign up now</h2>
<MDBRow>
<MDBCol col='6'>
<MDBInput wrapperClass='mb-4' label='First name' id='form1' type='text'/>
</MDBCol>
<MDBCol col='6'>
<MDBInput wrapperClass='mb-4' label='Last name' id='form2' type='text'/>
</MDBCol>
</MDBRow>
<MDBInput wrapperClass='mb-4' label='Email' id='form3' type='email'/>
<MDBInput wrapperClass='mb-4' label='Password' id='form4' type='password'/>
<div className='d-flex justify-content-center mb-4'>
<MDBCheckbox name='flexCheck' value='' id='flexCheckDefault' label='Subscribe to our newsletter' />
</div>
<MDBBtn className='w-100 mb-4' size='md'>sign up</MDBBtn>
<div className="text-center">
<p>or sign up with:</p>
<MDBBtn tag='a' color='none' className='mx-3' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='facebook-f' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='mx-3' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='twitter' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='mx-3' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='google' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='mx-3' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='github' size="sm"/>
</MDBBtn>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol col='6'>
<img src="https://mdbootstrap.com/img/new/ecommerce/vertical/004.jpg" class="w-100 rounded-4 shadow-4"
alt="" fluid/>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
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 (
<MDBContainer fluid>
<div className="p-5 bg-image" style={{backgroundImage: 'url(https://mdbootstrap.com/img/new/textures/full/171.jpg)', height: '300px'}}></div>
<MDBCard className='mx-5 mb-5 p-5 shadow-5' style={{marginTop: '-100px', background: 'hsla(0, 0%, 100%, 0.8)', backdropFilter: 'blur(30px)'}}>
<MDBCardBody className='p-5 text-center'>
<h2 className="fw-bold mb-5">Sign up now</h2>
<MDBRow>
<MDBCol col='6'>
<MDBInput wrapperClass='mb-4' label='First name' id='form1' type='text'/>
</MDBCol>
<MDBCol col='6'>
<MDBInput wrapperClass='mb-4' label='Last name' id='form1' type='text'/>
</MDBCol>
</MDBRow>
<MDBInput wrapperClass='mb-4' label='Email' id='form1' type='email'/>
<MDBInput wrapperClass='mb-4' label='Password' id='form1' type='password'/>
<div className='d-flex justify-content-center mb-4'>
<MDBCheckbox name='flexCheck' value='' id='flexCheckDefault' label='Subscribe to our newsletter' />
</div>
<MDBBtn className='w-100 mb-4' size='md'>sign up</MDBBtn>
<div className="text-center">
<p>or sign up with:</p>
<MDBBtn tag='a' color='none' className='mx-3' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='facebook-f' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='mx-3' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='twitter' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='mx-3' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='google' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='mx-3' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='github' size="sm"/>
</MDBBtn>
</div>
</MDBCardBody>
</MDBCard>
</MDBContainer>
);
}
export default App;