Forms customization
Bootstrap forms styles
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a huge discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount
A form within a card
To see more cards options, go here.
<!-- Card -->
<div class="card">
<!-- Card body -->
<div class="card-body">
<!-- Material form register -->
<form>
<p class="h4 text-center py-4">Sign up</p>
<!-- Material input text -->
<div class="md-form">
<i class="fa fa-user prefix grey-text"></i>
<input type="text" id="materialFormCardNameEx" class="form-control">
<label for="materialFormCardNameEx" class="font-weight-light">Your name</label>
</div>
<!-- Material input email -->
<div class="md-form">
<i class="fa fa-envelope prefix grey-text"></i>
<input type="email" id="materialFormCardEmailEx" class="form-control">
<label for="materialFormCardEmailEx" class="font-weight-light">Your email</label>
</div>
<!-- Material input email -->
<div class="md-form">
<i class="fa fa-exclamation-triangle prefix grey-text"></i>
<input type="email" id="materialFormCardConfirmEx" class="form-control">
<label for="materialFormCardConfirmEx" class="font-weight-light">Confirm your email</label>
</div>
<!-- Material input password -->
<div class="md-form">
<i class="fa fa-lock prefix grey-text"></i>
<input type="password" id="materialFormCardPasswordEx" class="form-control">
<label for="materialFormCardPasswordEx" class="font-weight-light">Your password</label>
</div>
<div class="text-center py-4 mt-3">
<button class="btn btn-cyan" type="submit">Register</button>
</div>
</form>
<!-- Material form register -->
</div>
<!-- Card body -->
</div>
<!-- Card -->
<!-- Card -->
<div class="card mx-xl-5">
<!-- Card body -->
<div class="card-body">
<!-- Default form subscription -->
<form>
<p class="h4 text-center py-4">Subscribe</p>
<!-- Default input name -->
<label for="defaultFormCardNameEx" class="grey-text font-weight-light">Your name</label>
<input type="text" id="defaultFormCardNameEx" class="form-control">
<br>
<!-- Default input email -->
<label for="defaultFormCardEmailEx" class="grey-text font-weight-light">Your email</label>
<input type="email" id="defaultFormCardEmailEx" class="form-control">
<div class="text-center py-4 mt-3">
<button class="btn btn-outline-purple" type="submit">Send<i
class="fa fa-paper-plane-o ml-2"></i></button>
</div>
</form>
<!-- Default form subscription -->
</div>
<!-- Card body -->
</div>
<!-- Card -->
A form within a modal
To see more modals options, go here.
<div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<!--Modal: Contact form-->
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header primary-color white-text">
<h4 class="title">
<i class="fa fa-pencil-alt"></i> Contact form</h4>
<button type="button" class="close waves-effect waves-light" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<!-- Material input name -->
<div class="md-form form-sm">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="materialFormNameModalEx1" class="form-control form-control-sm">
<label for="materialFormNameModalEx1">Your name</label>
</div>
<!-- Material input email -->
<div class="md-form form-sm">
<i class="fa fa-lock prefix"></i>
<input type="password" id="materialFormEmailModalEx1" class="form-control form-control-sm">
<label for="materialFormEmailModalEx1">Your email</label>
</div>
<!-- Material input subject -->
<div class="md-form form-sm">
<i class="fa fa-tag prefix"></i>
<input type="text" id="materialFormSubjectModalEx1" class="form-control form-control-sm">
<label for="materialFormSubjectModalEx1">Subject</label>
</div>
<!-- Material textarea message -->
<div class="md-form form-sm">
<i class="fa fa-pencil-alt prefix"></i>
<textarea type="text" id="materialFormMessageModalEx1"
class="md-textarea form-control"></textarea>
<label for="materialFormMessageModalEx1">Your message</label>
</div>
<div class="text-center mt-4 mb-2">
<button class="btn btn-primary">Send
<i class="fa fa-send ml-2"></i>
</button>
</div>
</div>
</div>
<!--/.Content-->
</div>
<!--/Modal: Contact form-->
</div>
<div class="modal fade" id="modalDefaultContactForm" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<!--Modal: Contact form-->
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header info-color white-text">
<h4 class="title">
<i class="fa fa-pencil-alt"></i> Contact form</h4>
<button type="button" class="close waves-effect waves-light" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<!-- Default input name -->
<label for="defaultFormNameModalEx">Your name</label>
<input type="text" id="defaultFormNameModalEx" class="form-control form-control-sm">
<br>
<!-- Default input email -->
<label for="defaultFormEmailModalEx">Your email</label>
<input type="password" id="defaultFormEmailModalEx" class="form-control form-control-sm">
<br>
<!-- Default input subject -->
<label for="defaultFormSubjectModalEx">Subject</label>
<input type="text" id="defaultFormSubjectModalEx" class="form-control form-control-sm">
<br>
<!-- Default textarea message -->
<label for="defaultFormMessageModalEx">Your message</label>
<textarea type="text" id="defaultFormMessageModalEx" class="md-textarea form-control"></textarea>
<div class="text-center mt-4 mb-2">
<button class="btn btn-info">Send
<i class="fa fa-send ml-2"></i>
</button>
</div>
</div>
</div>
<!--/.Content-->
</div>
<!--/Modal: Contact form-->
</div>
Form elegant MDB Pro component
.form-elegant .font-small {
font-size: 0.8rem;
}
.form-elegant .z-depth-1a {
-webkit-box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
}
.form-elegant .z-depth-1-half,
.form-elegant .btn:hover {
-webkit-box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
}
<section class="form-elegant">
<!--Form without header-->
<div class="card">
<div class="card-body mx-4">
<!--Header-->
<div class="text-center">
<h3 class="dark-grey-text mb-5"><strong>Sign in</strong></h3>
</div>
<!--Body-->
<div class="md-form">
<input type="text" id="Form-email1" class="form-control">
<label for="Form-email1">Your email</label>
</div>
<div class="md-form pb-3">
<input type="password" id="Form-pass1" class="form-control">
<label for="Form-pass1">Your password</label>
<p class="font-small blue-text d-flex justify-content-end">Forgot <a href="#" class="blue-text ml-1">
Password?</a></p>
</div>
<div class="text-center mb-3">
<button type="button" class="btn blue-gradient btn-block btn-rounded z-depth-1a">Sign in</button>
</div>
<p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> or Sign in with:
</p>
<div class="row my-3 d-flex justify-content-center">
<!--Facebook-->
<button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i
class="fab fa-facebook-f blue-text text-center"></i></button>
<!--Twitter-->
<button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i
class="fab fa-twitter blue-text"></i></button>
<!--Google +-->
<button type="button" class="btn btn-white btn-rounded z-depth-1a"><i
class="fab fa-google-plus-g blue-text"></i></button>
</div>
</div>
<!--Footer-->
<div class="modal-footer mx-5 pt-3 mb-1">
<p class="font-small grey-text d-flex justify-content-end">Not a member? <a href="#"
class="blue-text ml-1"> Sign Up</a></p>
</div>
</div>
<!--/Form without header-->
</section>
Form gradient MDB Pro component
.form-gradient .font-small {
font-size: 0.8rem;
}
.form-gradient .header {
border-top-left-radius: .3rem;
border-top-right-radius: .3rem;
}
.form-gradient input[type=text]:focus:not([readonly]) {
border-bottom: 1px solid #fd9267;
-webkit-box-shadow: 0 1px 0 0 #fd9267;
box-shadow: 0 1px 0 0 #fd9267;
}
.form-gradient input[type=text]:focus:not([readonly]) + label {
color: #4f4f4f;
}
.form-gradient input[type=password]:focus:not([readonly]) {
border-bottom: 1px solid #fd9267;
-webkit-box-shadow: 0 1px 0 0 #fd9267;
box-shadow: 0 1px 0 0 #fd9267;
}
.form-gradient input[type=password]:focus:not([readonly]) + label {
color: #4f4f4f;
}
<section class="form-gradient">
<!--Form with header-->
<div class="card">
<!--Header-->
<div class="header pt-3 peach-gradient">
<div class="row d-flex justify-content-center">
<h3 class="white-text mb-3 pt-3 font-weight-bold">Log in</h3>
</div>
<div class="row mt-2 mb-3 d-flex justify-content-center">
<!--Facebook-->
<a class="fa-lg p-2 m-2 fb-ic"><i class="fab fa-facebook-f white-text fa-lg"> </i></a>
<!--Twitter-->
<a class="fa-lg p-2 m-2 tw-ic"><i class="fab fa-twitter white-text fa-lg"> </i></a>
<!--Google +-->
<a class="fa-lg p-2 m-2 gplus-ic"><i class="fab fa-google-plus-g white-text fa-lg"> </i></a>
</div>
</div>
<!--Header-->
<div class="card-body mx-4 mt-4">
<!--Body-->
<div class="md-form">
<input type="text" id="Form-email3" class="form-control">
<label for="Form-email3">Your email</label>
</div>
<div class="md-form pb-1 pb-md-3">
<input type="password" id="Form-pass3" class="form-control">
<label for="Form-pass3">Your password</label>
<p class="font-small grey-text d-flex justify-content-end">Forgot <a href="#"
class="dark-grey-text ml-1 font-weight-bold"> Password?</a></p>
</div>
<!--Grid row-->
<div class="row d-flex align-items-center mb-4">
<!--Grid column-->
<div class="col-md-1 col-md-5 d-flex align-items-start">
<div class="text-center">
<button type="button" class="btn btn-grey btn-rounded z-depth-1a">Log in</button>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-7">
<p class="font-small grey-text d-flex justify-content-end mt-3">Don't have an account? <a href="#"
class="dark-grey-text ml-1 font-weight-bold"> Sign up</a></p>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
</div>
<!--/Form with header-->
</section>
Form light MDB Pro component
.form-light .font-small {
font-size: 0.8rem;
}
.form-light [type="radio"] + label,
.form-light [type="checkbox"] + label {
font-size: 0.8rem;
}
.form-light [type="checkbox"] + label:before {
top: 2px;
width: 15px;
height: 15px;
}
.form-light input[type="checkbox"] + label:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 17px;
height: 17px;
z-index: 0;
border-radius: 1px;
margin-top: 2px;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.form-light input[type="checkbox"]:checked + label:before {
top: -4px;
left: -3px;
width: 12px;
height: 22px;
border-style: solid;
border-width: 2px;
border-color: transparent #EB3573 #EB3573 transparent;
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-backface-visibility: hidden;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.form-light .footer {
border-bottom-left-radius: .3rem;
border-bottom-right-radius: .3rem;
}
<!--Section: Live preview-->
<section class="form-light">
<!--Form without header-->
<div class="card">
<div class="card-body mx-4">
<!--Header-->
<div class="text-center">
<h3 class="pink-text mb-5"><strong>Sign up</strong></h3>
</div>
<!--Body-->
<div class="md-form">
<input type="text" id="Form-email2" class="form-control">
<label for="Form-email2">Your email</label>
</div>
<div class="md-form pb-3">
<input type="password" id="Form-pass2" class="form-control">
<label for="Form-pass2">Your password</label>
<div class="form-check my-4">
<input class="form-check-input" type="checkbox" id="defaultCheck12">
<label for="defaultCheck12" class="grey-text">Accept the<a href="#" class="blue-text"> Terms and
Conditions</a></label>
</div>
</div>
<!--Grid row-->
<div class="row d-flex align-items-center mb-4">
<!--Grid column-->
<div class="col-md-3 col-md-6 text-center">
<button type="button" class="btn btn-pink btn-block btn-rounded z-depth-1">Sign up</button>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<p class="font-small grey-text d-flex justify-content-end">Have an account? <a href="#"
class="blue-text ml-1"> Log in</a></p>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!--Footer-->
<div class="footer pt-3 mdb-color lighten-3">
<div class="row d-flex justify-content-center">
<p class="font-small white-text mb-2 pt-3">or Sign up with:</p>
</div>
<div class="row mt-2 mb-3 d-flex justify-content-center">
<!--Facebook-->
<a class="fa-lg p-2 m-2 fb-ic"><i class="fab fa-facebook-f white-text fa-lg"> </i></a>
<!--Twitter-->
<a class="fa-lg p-2 m-2 tw-ic"><i class="fab fa-twitter white-text fa-lg"> </i></a>
<!--Google +-->
<a class="fa-lg p-2 m-2 gplus-ic"><i class="fab fa-google-plus-g white-text fa-lg"> </i></a>
</div>
</div>
</div>
<!--/Form without header-->
</section>
<!--Section: Live preview-->
Form dark MDB Pro component
.form-dark .font-small {
font-size: 0.8rem;
}
.form-dark [type="radio"] + label,
.form-dark [type="checkbox"] + label {
font-size: 0.8rem;
}
.form-dark [type="checkbox"] + label:before {
top: 2px;
width: 15px;
height: 15px;
}
.form-dark .md-form label {
color: #fff;
}
.form-dark input[type=text]:focus:not([readonly]) {
border-bottom: 1px solid #00C851;
-webkit-box-shadow: 0 1px 0 0 #00C851;
box-shadow: 0 1px 0 0 #00C851;
}
.form-dark input[type=text]:focus:not([readonly]) + label {
color: #fff;
}
.form-dark input[type=password]:focus:not([readonly]) {
border-bottom: 1px solid #00C851;
-webkit-box-shadow: 0 1px 0 0 #00C851;
box-shadow: 0 1px 0 0 #00C851;
}
.form-dark input[type=password]:focus:not([readonly]) + label {
color: #fff;
}
.form-dark input[type="checkbox"] + label:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 17px;
height: 17px;
z-index: 0;
border: 1.5px solid #fff;
border-radius: 1px;
margin-top: 2px;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.form-dark input[type="checkbox"]:checked + label:before {
top: -4px;
left: -3px;
width: 12px;
height: 22px;
border-style: solid;
border-width: 2px;
border-color: transparent #00c851 #00c851 transparent;
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-backface-visibility: hidden;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<!--Section: Live preview-->
<section class="form-dark">
<!--Form without header-->
<div class="card card-image"
style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table7.webp'); width: 28rem;">
<div class="text-white rgba-stylish-strong py-5 px-5 z-depth-4">
<!--Header-->
<div class="text-center">
<h3 class="white-text mb-5 mt-4 font-weight-bold"><strong>SIGN</strong> <a
class="green-text font-weight-bold"><strong> UP</strong></a></h3>
</div>
<!--Body-->
<div class="md-form">
<input type="text" id="Form-email5" class="form-control white-text">
<label for="Form-email5">Your email</label>
</div>
<div class="md-form pb-3">
<input type="password" id="Form-pass5" class="form-control white-text">
<label for="Form-pass5">Your password</label>
<div class="form-check my-4">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck17">
<label class="form-check-label white-text" for="defaultCheck17">Accept the<a href="#"
class="green-text font-weight-bold"> Terms and Conditions</a></label>
</div>
</div>
<!--Grid row-->
<div class="row d-flex align-items-center mb-4">
<!--Grid column-->
<div class="text-center mb-3 col-md-12">
<button type="button" class="btn btn-success btn-block btn-rounded z-depth-1">Sign in</button>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid column-->
<div class="col-md-12">
<p class="font-small white-text d-flex justify-content-end">Have an account? <a href="#"
class="green-text ml-1 font-weight-bold"> Log in</a></p>
</div>
<!--Grid column-->
</div>
</div>
<!--/Form without header-->
</section>
<!--Section: Live preview-->
Form simple MDB Pro component
.form-simple .font-small {
font-size: 0.8rem;
}
.form-simple .header {
border-top-left-radius: .3rem;
border-top-right-radius: .3rem;
}
.form-simple input[type=text]:focus:not([readonly]) {
border-bottom: 1px solid #ff3547;
-webkit-box-shadow: 0 1px 0 0 #ff3547;
box-shadow: 0 1px 0 0 #ff3547;
}
.form-simple input[type=text]:focus:not([readonly]) + label {
color: #4f4f4f;
}
.form-simple input[type=password]:focus:not([readonly]) {
border-bottom: 1px solid #ff3547;
-webkit-box-shadow: 0 1px 0 0 #ff3547;
box-shadow: 0 1px 0 0 #ff3547;
}
.form-simple input[type=password]:focus:not([readonly]) + label {
color: #4f4f4f;
}
<section class="form-simple">
<!--Form with header-->
<div class="card">
<!--Header-->
<div class="header pt-3 grey lighten-2">
<div class="row d-flex justify-content-start">
<h3 class="deep-grey-text mt-3 mb-4 pb-1 mx-5">Log in</h3>
</div>
</div>
<!--Header-->
<div class="card-body mx-4 mt-4">
<!--Body-->
<div class="md-form">
<input type="text" id="Form-email4" class="form-control">
<label for="Form-email4">Your email</label>
</div>
<div class="md-form pb-3">
<input type="password" id="Form-pass4" class="form-control">
<label for="Form-pass4">Your password</label>
<p class="font-small grey-text d-flex justify-content-end">Forgot <a href="#"
class="dark-grey-text font-weight-bold ml-1"> Password?</a></p>
</div>
<div class="text-center mb-4">
<button type="button" class="btn btn-danger btn-block z-depth-2">Log in</button>
</div>
<p class="font-small grey-text d-flex justify-content-center">Don't have an account? <a href="#"
class="dark-grey-text font-weight-bold ml-1"> Sign up</a></p>
</div>
</div>
<!--/Form with header-->
</section>