Forms customization

Bootstrap forms styles

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5


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.

        
            
              <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

Sign in

Forgot Password?

or Sign in with:

        
            
        .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

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

Sign up

Have an account? Log in

        
            
        .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

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

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>