Forms customization

Bootstrap forms styles

A form within a card

To see more cards options, go here.

Sign up

                      
<!-- 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 -->

Subscribe


                      
<!-- 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.

Launch Modal Contact Form

Contact form

                  
<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"></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 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>
Launch Modal Contact Form

Contact form




                  
<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"></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

Sign in

Forgot Password?

or Sign in with:

Not a member? Sign Up 

            
.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="fa fa-facebook blue-text text-center"></i></button>
                <!--Twitter-->
                <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fa fa-twitter blue-text"></i></button>
                <!--Google +-->
                <button type="button" class="btn btn-white btn-rounded z-depth-1a"><i class="fa fa-google-plus 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

Log in

Forgot Password?

Don't have an account? Sign up 

            
.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="fa fa-facebook white-text fa-lg"> </i></a>
            <!--Twitter-->
            <a class="fa-lg p-2 m-2 tw-ic"><i class="fa fa-twitter white-text fa-lg"> </i></a>
            <!--Google +-->
            <a class="fa-lg p-2 m-2 gplus-ic"><i class="fa fa-google-plus 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

Sign up

Have an account? Log in

or Sign up with:

            
.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="fa fa-facebook white-text fa-lg"> </i></a>
            <!--Twitter-->
            <a class="fa-lg p-2 m-2 tw-ic"><i class="fa fa-twitter white-text fa-lg"> </i></a>
            <!--Google +-->
            <a class="fa-lg p-2 m-2 gplus-ic"><i class="fa fa-google-plus white-text fa-lg"> </i></a>
        </div>

    </div>

</div>
<!--/Form without header-->

</section>
<!--Section: Live preview-->

Form dark MDB Pro component

SIGN UP

Have an account? Log in 

            
.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.jpg'); 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

Log in

Forgot Password?

Don't have an account? Sign up 

            
.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>

Forms - getting started : download & setup

Download

All the components and features are part of MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.

Click the button below to go to Download Page, where you can download MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires MDB Pro package.

Click the button below to learn more about MDBbootstrap Pro package

MDBootstrap Pro

Tutorials

If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.

5 min Quick Start Full Tutorial

Compilation

To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.

Default componentName:

Material componentName:

Compilation & Customization tutorial

If you need additional help to compile your custom package, use our Compilation & Customization tutorial

Compilation & Customization tutorial