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.
<form>
<!-- Email input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="form2Example1" class="form-control" />
<label class="form-label" for="form2Example1">Email address</label>
</div>
<!-- Password input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="password" id="form2Example2" class="form-control" />
<label class="form-label" for="form2Example2">Password</label>
</div>
<!-- 2 column grid layout for inline styling -->
<div class="row mb-4">
<div class="col d-flex justify-content-center">
<!-- Checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form2Example31" checked />
<label class="form-check-label" for="form2Example31"> Remember me </label>
</div>
</div>
<div class="col">
<!-- Simple link -->
<a href="#!">Forgot password?</a>
</div>
</div>
<!-- Submit button -->
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block mb-4">Sign in</button>
<!-- Register buttons -->
<div class="text-center">
<p>Not a member? <a href="#!">Register</a></p>
<p>or sign up with:</p>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-facebook-f"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-google"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-twitter"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-github"></i>
</button>
</div>
</form>
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.
<!-- Pills navs -->
<ul class="nav nav-pills nav-justified mb-3" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="tab-login" data-mdb-pill-init href="#pills-login" role="tab"
aria-controls="pills-login" aria-selected="true">Login</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="tab-register" data-mdb-pill-init href="#pills-register" role="tab"
aria-controls="pills-register" aria-selected="false">Register</a>
</li>
</ul>
<!-- Pills navs -->
<!-- Pills content -->
<div class="tab-content">
<div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="tab-login">
<form>
<div class="text-center mb-3">
<p>Sign in with:</p>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-facebook-f"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-google"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-twitter"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-github"></i>
</button>
</div>
<p class="text-center">or:</p>
<!-- Email input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="loginName" class="form-control" />
<label class="form-label" for="loginName">Email or username</label>
</div>
<!-- Password input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="password" id="loginPassword" class="form-control" />
<label class="form-label" for="loginPassword">Password</label>
</div>
<!-- 2 column grid layout -->
<div class="row mb-4">
<div class="col-md-6 d-flex justify-content-center">
<!-- Checkbox -->
<div class="form-check mb-3 mb-md-0">
<input class="form-check-input" type="checkbox" value="" id="loginCheck" checked />
<label class="form-check-label" for="loginCheck"> Remember me </label>
</div>
</div>
<div class="col-md-6 d-flex justify-content-center">
<!-- Simple link -->
<a href="#!">Forgot password?</a>
</div>
</div>
<!-- Submit button -->
<button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block mb-4">Sign in</button>
<!-- Register buttons -->
<div class="text-center">
<p>Not a member? <a href="#!">Register</a></p>
</div>
</form>
</div>
<div class="tab-pane fade" id="pills-register" role="tabpanel" aria-labelledby="tab-register">
<form>
<div class="text-center mb-3">
<p>Sign up with:</p>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-facebook-f"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-google"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-twitter"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-github"></i>
</button>
</div>
<p class="text-center">or:</p>
<!-- Name input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="text" id="registerName" class="form-control" />
<label class="form-label" for="registerName">Name</label>
</div>
<!-- Username input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="text" id="registerUsername" class="form-control" />
<label class="form-label" for="registerUsername">Username</label>
</div>
<!-- Email input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="registerEmail" class="form-control" />
<label class="form-label" for="registerEmail">Email</label>
</div>
<!-- Password input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="password" id="registerPassword" class="form-control" />
<label class="form-label" for="registerPassword">Password</label>
</div>
<!-- Repeat Password input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="password" id="registerRepeatPassword" class="form-control" />
<label class="form-label" for="registerRepeatPassword">Repeat password</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="registerCheck" checked
aria-describedby="registerCheckHelpText" />
<label class="form-check-label" for="registerCheck">
I have read and agree to the terms
</label>
</div>
<!-- Submit button -->
<button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block mb-3">Sign in</button>
</form>
</div>
</div>
<!-- Pills content -->
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.
<section class="vh-100">
<div class="container-fluid h-custom">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-md-9 col-lg-6 col-xl-5">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.webp"
class="img-fluid" alt="Sample image">
</div>
<div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
<form>
<div class="d-flex flex-row align-items-center justify-content-center justify-content-lg-start">
<p class="lead fw-normal mb-0 me-3">Sign in with</p>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-floating mx-1">
<i class="fab fa-facebook-f"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-floating mx-1">
<i class="fab fa-twitter"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-floating mx-1">
<i class="fab fa-linkedin-in"></i>
</button>
</div>
<div class="divider d-flex align-items-center my-4">
<p class="text-center fw-bold mx-3 mb-0">Or</p>
</div>
<!-- Email input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="form3Example3" class="form-control form-control-lg"
placeholder="Enter a valid email address" />
<label class="form-label" for="form3Example3">Email address</label>
</div>
<!-- Password input -->
<div data-mdb-input-init class="form-outline mb-3">
<input type="password" id="form3Example4" class="form-control form-control-lg"
placeholder="Enter password" />
<label class="form-label" for="form3Example4">Password</label>
</div>
<div class="d-flex justify-content-between align-items-center">
<!-- Checkbox -->
<div class="form-check mb-0">
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example3" />
<label class="form-check-label" for="form2Example3">
Remember me
</label>
</div>
<a href="#!" class="text-body">Forgot password?</a>
</div>
<div class="text-center text-lg-start mt-4 pt-2">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg"
style="padding-left: 2.5rem; padding-right: 2.5rem;">Login</button>
<p class="small fw-bold mt-2 pt-1 mb-0">Don't have an account? <a href="#!"
class="link-danger">Register</a></p>
</div>
</form>
</div>
</div>
</div>
<div
class="d-flex flex-column flex-md-row text-center text-md-start justify-content-between py-4 px-4 px-xl-5 bg-primary">
<!-- Copyright -->
<div class="text-white mb-3 mb-md-0">
Copyright © 2020. All rights reserved.
</div>
<!-- Copyright -->
<!-- Right -->
<div>
<a href="#!" class="text-white me-4">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#!" class="text-white me-4">
<i class="fab fa-twitter"></i>
</a>
<a href="#!" class="text-white me-4">
<i class="fab fa-google"></i>
</a>
<a href="#!" class="text-white">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
<!-- Right -->
</div>
</section>
.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.
<section class="h-100 gradient-form" style="background-color: #eee;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-xl-10">
<div class="card rounded-3 text-black">
<div class="row g-0">
<div class="col-lg-6">
<div class="card-body p-md-5 mx-md-4">
<div class="text-center">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/lotus.webp"
style="width: 185px;" alt="logo">
<h4 class="mt-1 mb-5 pb-1">We are The Lotus Team</h4>
</div>
<form>
<p>Please login to your account</p>
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="form2Example11" class="form-control"
placeholder="Phone number or email address" />
<label class="form-label" for="form2Example11">Username</label>
</div>
<div data-mdb-input-init class="form-outline mb-4">
<input type="password" id="form2Example22" class="form-control" />
<label class="form-label" for="form2Example22">Password</label>
</div>
<div class="text-center pt-1 mb-5 pb-1">
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" type="button">Log
in</button>
<a class="text-muted" href="#!">Forgot password?</a>
</div>
<div class="d-flex align-items-center justify-content-center pb-4">
<p class="mb-0 me-2">Don't have an account?</p>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-danger">Create new</button>
</div>
</form>
</div>
</div>
<div class="col-lg-6 d-flex align-items-center gradient-custom-2">
<div class="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>
</div>
</div>
</div>
</div>
</div>
</section>
.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.
<section class="vh-100">
<div class="container py-5 h-100">
<div class="row d-flex align-items-center justify-content-center h-100">
<div class="col-md-8 col-lg-7 col-xl-6">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.svg"
class="img-fluid" alt="Phone image">
</div>
<div class="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
<form>
<!-- Email input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="form1Example13" class="form-control form-control-lg" />
<label class="form-label" for="form1Example13">Email address</label>
</div>
<!-- Password input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="password" id="form1Example23" class="form-control form-control-lg" />
<label class="form-label" for="form1Example23">Password</label>
</div>
<div class="d-flex justify-content-around align-items-center mb-4">
<!-- Checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form1Example3" checked />
<label class="form-check-label" for="form1Example3"> Remember me </label>
</div>
<a href="#!">Forgot password?</a>
</div>
<!-- Submit button -->
<button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg btn-block">Sign in</button>
<div class="divider d-flex align-items-center my-4">
<p class="text-center fw-bold mx-3 mb-0 text-muted">OR</p>
</div>
<a data-mdb-ripple-init class="btn btn-primary btn-lg btn-block" style="background-color: #3b5998" href="#!"
role="button">
<i class="fab fa-facebook-f me-2"></i>Continue with Facebook
</a>
<a data-mdb-ripple-init class="btn btn-primary btn-lg btn-block" style="background-color: #55acee" href="#!"
role="button">
<i class="fab fa-twitter me-2"></i>Continue with Twitter</a>
</form>
</div>
</div>
</div>
</section>
.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.
<section class="vh-100" style="background-color: #9A616D;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-xl-10">
<div class="card" style="border-radius: 1rem;">
<div class="row g-0">
<div class="col-md-6 col-lg-5 d-none d-md-block">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/img1.webp"
alt="login form" class="img-fluid" style="border-radius: 1rem 0 0 1rem;" />
</div>
<div class="col-md-6 col-lg-7 d-flex align-items-center">
<div class="card-body p-4 p-lg-5 text-black">
<form>
<div class="d-flex align-items-center mb-3 pb-1">
<i class="fas fa-cubes fa-2x me-3" style="color: #ff6219;"></i>
<span class="h1 fw-bold mb-0">Logo</span>
</div>
<h5 class="fw-normal mb-3 pb-3" style="letter-spacing: 1px;">Sign into your account</h5>
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="form2Example17" class="form-control form-control-lg" />
<label class="form-label" for="form2Example17">Email address</label>
</div>
<div data-mdb-input-init class="form-outline mb-4">
<input type="password" id="form2Example27" class="form-control form-control-lg" />
<label class="form-label" for="form2Example27">Password</label>
</div>
<div class="pt-1 mb-4">
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-dark btn-lg btn-block" type="button">Login</button>
</div>
<a class="small text-muted" href="#!">Forgot password?</a>
<p class="mb-5 pb-lg-2" style="color: #393f81;">Don't have an account? <a href="#!"
style="color: #393f81;">Register here</a></p>
<a href="#!" class="small text-muted">Terms of use.</a>
<a href="#!" class="small text-muted">Privacy policy</a>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Login Screen
Full-screen login pages work well with high resolution images and simplistic input fields.
Logo
<section class="vh-100">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 text-black">
<div class="px-5 ms-xl-4">
<i class="fas fa-crow fa-2x me-3 pt-5 mt-xl-4" style="color: #709085;"></i>
<span class="h1 fw-bold mb-0">Logo</span>
</div>
<div class="d-flex align-items-center h-custom-2 px-5 ms-xl-4 mt-5 pt-5 pt-xl-0 mt-xl-n5">
<form style="width: 23rem;">
<h3 class="fw-normal mb-3 pb-3" style="letter-spacing: 1px;">Log in</h3>
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="form2Example18" class="form-control form-control-lg" />
<label class="form-label" for="form2Example18">Email address</label>
</div>
<div data-mdb-input-init class="form-outline mb-4">
<input type="password" id="form2Example28" class="form-control form-control-lg" />
<label class="form-label" for="form2Example28">Password</label>
</div>
<div class="pt-1 mb-4">
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-info btn-lg btn-block" type="button">Login</button>
</div>
<p class="small mb-5 pb-lg-2"><a class="text-muted" href="#!">Forgot password?</a></p>
<p>Don't have an account? <a href="#!" class="link-info">Register here</a></p>
</form>
</div>
</div>
<div class="col-sm-6 px-0 d-none d-sm-block">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/img3.webp"
alt="Login image" class="w-100 vh-100" style="object-fit: cover; object-position: left;">
</div>
</div>
</div>
</section>
.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%;
}
}
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.
Don't have an account? Sign Up
<section class="vh-100 gradient-custom">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-8 col-lg-6 col-xl-5">
<div class="card bg-dark text-white" style="border-radius: 1rem;">
<div class="card-body p-5 text-center">
<div class="mb-md-5 mt-md-4 pb-5">
<h2 class="fw-bold mb-2 text-uppercase">Login</h2>
<p class="text-white-50 mb-5">Please enter your login and password!</p>
<div data-mdb-input-init class="form-outline form-white mb-4">
<input type="email" id="typeEmailX" class="form-control form-control-lg" />
<label class="form-label" for="typeEmailX">Email</label>
</div>
<div data-mdb-input-init class="form-outline form-white mb-4">
<input type="password" id="typePasswordX" class="form-control form-control-lg" />
<label class="form-label" for="typePasswordX">Password</label>
</div>
<p class="small mb-5 pb-lg-2"><a class="text-white-50" href="#!">Forgot password?</a></p>
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-light btn-lg px-5" type="submit">Login</button>
<div class="d-flex justify-content-center text-center mt-4 pt-1">
<a href="#!" class="text-white"><i class="fab fa-facebook-f fa-lg"></i></a>
<a href="#!" class="text-white"><i class="fab fa-twitter fa-lg mx-4 px-2"></i></a>
<a href="#!" class="text-white"><i class="fab fa-google fa-lg"></i></a>
</div>
</div>
<div>
<p class="mb-0">Don't have an account? <a href="#!" class="text-white-50 fw-bold">Sign Up</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.gradient-custom {
/* 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. Check out our modal generator to customize your popup styles and behavior.
Sign in
<section class="vh-100" style="background-color: #508bfc;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-8 col-lg-6 col-xl-5">
<div class="card shadow-2-strong" style="border-radius: 1rem;">
<div class="card-body p-5 text-center">
<h3 class="mb-5">Sign in</h3>
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="typeEmailX-2" class="form-control form-control-lg" />
<label class="form-label" for="typeEmailX-2">Email</label>
</div>
<div data-mdb-input-init class="form-outline mb-4">
<input type="password" id="typePasswordX-2" class="form-control form-control-lg" />
<label class="form-label" for="typePasswordX-2">Password</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-start mb-4">
<input class="form-check-input" type="checkbox" value="" id="form1Example3" />
<label class="form-check-label" for="form1Example3"> Remember password </label>
</div>
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg btn-block" type="submit">Login</button>
<hr class="my-4">
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-lg btn-block btn-primary" style="background-color: #dd4b39;"
type="submit"><i class="fab fa-google me-2"></i> Sign in with google</button>
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-lg btn-block btn-primary mb-2" style="background-color: #3b5998;"
type="submit"><i class="fab fa-facebook-f me-2"></i>Sign in with facebook</button>
</div>
</div>
</div>
</div>
</div>
</section>
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?
<!-- Section: Design Block -->
<section class="">
<!-- Jumbotron -->
<div class="px-4 py-5 px-md-5 text-center text-lg-start" style="background-color: hsl(0, 0%, 96%)">
<div class="container">
<div class="row gx-lg-5 align-items-center">
<div class="col-lg-6 mb-5 mb-lg-0">
<h1 class="my-5 display-3 fw-bold ls-tight">
The best offer <br />
<span class="text-primary">for your business</span>
</h1>
<p 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>
</div>
<div class="col-lg-6 mb-5 mb-lg-0">
<div class="card">
<div class="card-body py-5 px-md-5">
<form>
<!-- 2 column grid layout with text inputs for the first and last names -->
<div class="row">
<div class="col-md-6 mb-4">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form3Example1" class="form-control" />
<label class="form-label" for="form3Example1">First name</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form3Example2" class="form-control" />
<label class="form-label" for="form3Example2">Last name</label>
</div>
</div>
</div>
<!-- Email input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="form3Example3" class="form-control" />
<label class="form-label" for="form3Example3">Email address</label>
</div>
<!-- Password input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="password" id="form3Example4" class="form-control" />
<label class="form-label" for="form3Example4">Password</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example33" checked />
<label class="form-check-label" for="form2Example33">
Subscribe to our newsletter
</label>
</div>
<!-- Submit button -->
<button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block mb-4">
Sign up
</button>
<!-- Register buttons -->
<div class="text-center">
<p>or sign up with:</p>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-facebook-f"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-google"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-twitter"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-github"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Jumbotron -->
</section>
<!-- Section: Design Block -->
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.
<!-- Section: Design Block -->
<section class=" text-center text-lg-start">
<style>
.rounded-t-5 {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
@media (min-width: 992px) {
.rounded-tr-lg-0 {
border-top-right-radius: 0;
}
.rounded-bl-lg-5 {
border-bottom-left-radius: 0.5rem;
}
}
</style>
<div class="card mb-3">
<div class="row g-0 d-flex align-items-center">
<div class="col-lg-4 d-none d-lg-flex">
<img src="https://mdbootstrap.com/img/new/ecommerce/vertical/004.jpg" alt="Trendy Pants and Shoes"
class="w-100 rounded-t-5 rounded-tr-lg-0 rounded-bl-lg-5" />
</div>
<div class="col-lg-8">
<div class="card-body py-5 px-md-5">
<form>
<!-- Email input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="form2Example1" class="form-control" />
<label class="form-label" for="form2Example1">Email address</label>
</div>
<!-- Password input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="password" id="form2Example2" class="form-control" />
<label class="form-label" for="form2Example2">Password</label>
</div>
<!-- 2 column grid layout for inline styling -->
<div class="row mb-4">
<div class="col d-flex justify-content-center">
<!-- Checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form2Example31" checked />
<label class="form-check-label" for="form2Example31"> Remember me </label>
</div>
</div>
<div class="col">
<!-- Simple link -->
<a href="#!">Forgot password?</a>
</div>
</div>
<!-- Submit button -->
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block mb-4">Sign in</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Design Block -->
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?
<!-- Section: Design Block -->
<section class="background-radial-gradient overflow-hidden">
<style>
.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);
}
</style>
<div class="container px-4 py-5 px-md-5 text-center text-lg-start my-5">
<div class="row gx-lg-5 align-items-center mb-5">
<div class="col-lg-6 mb-5 mb-lg-0" style="z-index: 10">
<h1 class="my-5 display-5 fw-bold ls-tight" style="color: hsl(218, 81%, 95%)">
The best offer <br />
<span style="color: hsl(218, 81%, 75%)">for your business</span>
</h1>
<p class="mb-4 opacity-70" style="color: hsl(218, 81%, 85%)">
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?
</p>
</div>
<div class="col-lg-6 mb-5 mb-lg-0 position-relative">
<div id="radius-shape-1" class="position-absolute rounded-circle shadow-5-strong"></div>
<div id="radius-shape-2" class="position-absolute shadow-5-strong"></div>
<div class="card bg-glass">
<div class="card-body px-4 py-5 px-md-5">
<form>
<!-- 2 column grid layout with text inputs for the first and last names -->
<div class="row">
<div class="col-md-6 mb-4">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form3Example1" class="form-control" />
<label class="form-label" for="form3Example1">First name</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form3Example2" class="form-control" />
<label class="form-label" for="form3Example2">Last name</label>
</div>
</div>
</div>
<!-- Email input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="form3Example3" class="form-control" />
<label class="form-label" for="form3Example3">Email address</label>
</div>
<!-- Password input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="password" id="form3Example4" class="form-control" />
<label class="form-label" for="form3Example4">Password</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example33" checked />
<label class="form-check-label" for="form2Example33">
Subscribe to our newsletter
</label>
</div>
<!-- Submit button -->
<button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block mb-4">
Sign up
</button>
<!-- Register buttons -->
<div class="text-center">
<p>or sign up with:</p>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-facebook-f"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-google"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-twitter"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-github"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Design Block -->
Registration Card
This card also uses glassmorphism to subtly overlay the image.
Sign up now
<!-- Section: Design Block -->
<section class="text-center text-lg-start">
<style>
.cascading-right {
margin-right: -50px;
}
@media (max-width: 991.98px) {
.cascading-right {
margin-right: 0;
}
}
</style>
<!-- Jumbotron -->
<div class="container py-4">
<div class="row g-0 align-items-center">
<div class="col-lg-6 mb-5 mb-lg-0">
<div class="card cascading-right bg-body-tertiary" style="
backdrop-filter: blur(30px);
">
<div class="card-body p-5 shadow-5 text-center">
<h2 class="fw-bold mb-5">Sign up now</h2>
<form>
<!-- 2 column grid layout with text inputs for the first and last names -->
<div class="row">
<div class="col-md-6 mb-4">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form3Example1" class="form-control" />
<label class="form-label" for="form3Example1">First name</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form3Example2" class="form-control" />
<label class="form-label" for="form3Example2">Last name</label>
</div>
</div>
</div>
<!-- Email input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="form3Example3" class="form-control" />
<label class="form-label" for="form3Example3">Email address</label>
</div>
<!-- Password input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="password" id="form3Example4" class="form-control" />
<label class="form-label" for="form3Example4">Password</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example33" checked />
<label class="form-check-label" for="form2Example33">
Subscribe to our newsletter
</label>
</div>
<!-- Submit button -->
<button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block mb-4">
Sign up
</button>
<!-- Register buttons -->
<div class="text-center">
<p>or sign up with:</p>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-facebook-f"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-google"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-twitter"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-github"></i>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-6 mb-5 mb-lg-0">
<img src="https://mdbootstrap.com/img/new/ecommerce/vertical/004.jpg" class="w-100 rounded-4 shadow-4"
alt="" />
</div>
</div>
</div>
<!-- Jumbotron -->
</section>
<!-- Section: Design Block -->
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
<!-- Section: Design Block -->
<section class="text-center">
<!-- Background image -->
<div class="p-5 bg-image" style="
background-image: url('https://mdbootstrap.com/img/new/textures/full/171.jpg');
height: 300px;
"></div>
<!-- Background image -->
<div class="card mx-4 mx-md-5 shadow-5-strong bg-body-tertiary" style="
margin-top: -100px;
backdrop-filter: blur(30px);
">
<div class="card-body py-5 px-md-5">
<div class="row d-flex justify-content-center">
<div class="col-lg-8">
<h2 class="fw-bold mb-5">Sign up now</h2>
<form>
<!-- 2 column grid layout with text inputs for the first and last names -->
<div class="row">
<div class="col-md-6 mb-4">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form3Example1" class="form-control" />
<label class="form-label" for="form3Example1">First name</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form3Example2" class="form-control" />
<label class="form-label" for="form3Example2">Last name</label>
</div>
</div>
</div>
<!-- Email input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="form3Example3" class="form-control" />
<label class="form-label" for="form3Example3">Email address</label>
</div>
<!-- Password input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="password" id="form3Example4" class="form-control" />
<label class="form-label" for="form3Example4">Password</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example33" checked />
<label class="form-check-label" for="form2Example33">
Subscribe to our newsletter
</label>
</div>
<!-- Submit button -->
<button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block mb-4">
Sign up
</button>
<!-- Register buttons -->
<div class="text-center">
<p>or sign up with:</p>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-facebook-f"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-google"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-twitter"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
<i class="fab fa-github"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Design Block -->