Forms

Forms - Bootstrap 5 & Material Design 2.0

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

This is a general overview with a summary of the most fundamental knowledge. For the more detailed information regarding specific form, types have a look at the dedicated documentation pages.


Basic example

A basic example of a simple login form with input fields (email and password), checkbox and submit button.

Checkbox and "forgot password" link are positioned inline by using 2 column grid layout.

Note: Most of the demo examples have a fixed width for the demo purpose.
Included code examples do not have a fixed width, so they'll naturally fill the full width of its parent element.
To control the width of the form place it in the grid, use the sizing utilities, or set the width inline.


          <form>
            <!-- Email input -->
            <div class="form-outline mb-4">
              <input type="email" id="form1Example1" class="form-control" />
              <label class="form-label" for="form1Example1">Email address</label>
            </div>

            <!-- Password input -->
            <div class="form-outline mb-4">
              <input type="password" id="form1Example2" class="form-control" />
              <label class="form-label" for="form1Example2">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="form1Example3"
                    checked
                  />
                  <label class="form-check-label" for="form1Example3">
                    Remember me
                  </label>
                </div>
              </div>

              <div class="col">
                <!-- Simple link -->
                <a href="#!">Forgot password?</a>
              </div>
            </div>

            <!-- Submit button -->
            <button type="submit" class="btn btn-primary btn-block">Sign in</button>
          </form>
        

Every group of form fields should reside in a <form> element. MDB provides no default styling for the <form> element, but there are some powerful browser features that are provided by default.

  • New to browser forms? Consider reviewing the MDN form docs for an overview and complete list of available attributes.
  • <button>s within a <form> default to type="submit", so strive to be specific and always include a type.
  • You can disable every form element within a form with the disabled attribute on the <form>.

Since MDB applies display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.


Examples

Login form

Typical login form with additional register buttons.

Not a member? Register

or sign up with:


            <form>
              <!-- Email input -->
              <div 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 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="form2Example3"
                      checked
                    />
                    <label class="form-check-label" for="form2Example3">
                      Remember me
                    </label>
                  </div>
                </div>

                <div class="col">
                  <!-- Simple link -->
                  <a href="#!">Forgot password?</a>
                </div>
              </div>

              <!-- Submit button -->
              <button type="submit" 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" class="btn btn-primary btn-floating mx-1">
                  <i class="fab fa-facebook-f"></i>
                </button>

                <button type="button" class="btn btn-primary btn-floating mx-1">
                  <i class="fab fa-google"></i>
                </button>

                <button type="button" class="btn btn-primary btn-floating mx-1">
                  <i class="fab fa-twitter"></i>
                </button>

                <button type="button" class="btn btn-primary btn-floating mx-1">
                  <i class="fab fa-github"></i>
                </button>
              </div>
            </form>
          

Register form

Typical register form with additional register buttons.

or sign up with:


            <form>
              <!-- 2 column grid layout with text inputs for the first and last names -->
              <div class="row mb-4">
                <div class="col">
                  <div 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">
                  <div 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 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 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 mr-2"
                  type="checkbox"
                  value=""
                  id="form2Example3"
                  checked
                />
                <label class="form-check-label" for="form2Example3">
                  Subscribe to our newsletter
                </label>
              </div>

              <!-- Submit button -->
              <button type="submit" 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" class="btn btn-primary btn-floating mx-1">
                  <i class="fab fa-facebook-f"></i>
                </button>

                <button type="button" class="btn btn-primary btn-floating mx-1">
                  <i class="fab fa-google"></i>
                </button>

                <button type="button" class="btn btn-primary btn-floating mx-1">
                  <i class="fab fa-twitter"></i>
                </button>

                <button type="button" class="btn btn-primary btn-floating mx-1">
                  <i class="fab fa-github"></i>
                </button>
              </div>
            </form>
          

Contact form

Typical contact form with textarea input as a message field.


            <form>
              <!-- Name input -->
              <div class="form-outline mb-4">
                <input type="text" id="form4Example1" class="form-control" />
                <label class="form-label" for="form4Example1">Name</label>
              </div>

              <!-- Email input -->
              <div class="form-outline mb-4">
                <input type="email" id="form4Example2" class="form-control" />
                <label class="form-label" for="form4Example2">Email address</label>
              </div>

              <!-- Message input -->
              <div class="form-outline mb-4">
                <textarea class="form-control" id="form4Example3" rows="4"></textarea>
                <label class="form-label" for="form4Example3">Message</label>
              </div>

              <!-- Checkbox -->
              <div class="form-check d-flex justify-content-center mb-4">
                <input
                  class="form-check-input mr-2"
                  type="checkbox"
                  value=""
                  id="form4Example4"
                  checked
                />
                <label class="form-check-label" for="form4Example4">
                  Send me a copy of this message
                </label>
              </div>

              <!-- Submit button -->
              <button type="submit" class="btn btn-primary btn-block mb-4">
                Send
              </button>
            </form>
          

Subscription form

A typical subscription form used when subscribing to the newsletter.


            <form>
              <!-- Name input -->
              <div class="form-outline mb-4">
                <input type="text" id="form5Example1" class="form-control" />
                <label class="form-label" for="form5Example1">Name</label>
              </div>

              <!-- Email input -->
              <div class="form-outline mb-4">
                <input type="email" id="form5Example2" class="form-control" />
                <label class="form-label" for="form5Example2">Email address</label>
              </div>

              <!-- Checkbox -->
              <div class="form-check d-flex justify-content-center mb-4">
                <input
                  class="form-check-input mr-2"
                  type="checkbox"
                  value=""
                  id="form5Example3"
                  checked
                />
                <label class="form-check-label" for="form5Example3">
                  I have read and agree to the terms
                </label>
              </div>

              <!-- Submit button -->
              <button type="submit" class="btn btn-primary btn-block mb-4">
                Subscribe
              </button>
            </form>
          

Checkout form

An example of the extended form with typical checkout inputs.


            <form>
              <!-- 2 column grid layout with text inputs for the first and last names -->
              <div class="row mb-4">
                <div class="col">
                  <div class="form-outline">
                    <input type="text" id="form6Example1" class="form-control" />
                    <label class="form-label" for="form6Example1">First name</label>
                  </div>
                </div>
                <div class="col">
                  <div class="form-outline">
                    <input type="text" id="form6Example2" class="form-control" />
                    <label class="form-label" for="form6Example2">Last name</label>
                  </div>
                </div>
              </div>

              <!-- Text input -->
              <div class="form-outline mb-4">
                <input type="text" id="form6Example3" class="form-control" />
                <label class="form-label" for="form6Example3">Company name</label>
              </div>

              <!-- Text input -->
              <div class="form-outline mb-4">
                <input type="text" id="form6Example4" class="form-control" />
                <label class="form-label" for="form6Example4">Address</label>
              </div>

              <!-- Email input -->
              <div class="form-outline mb-4">
                <input type="email" id="form6Example5" class="form-control" />
                <label class="form-label" for="form6Example5">Email</label>
              </div>

              <!-- Number input -->
              <div class="form-outline mb-4">
                <input type="number" id="form6Example6" class="form-control" />
                <label class="form-label" for="form6Example6">Phone</label>
              </div>

              <!-- Message input -->
              <div class="form-outline mb-4">
                <textarea class="form-control" id="form6Example7" rows="4"></textarea>
                <label class="form-label" for="form6Example7">Additional information</label>
              </div>

              <!-- Checkbox -->
              <div class="form-check d-flex justify-content-center mb-4">
                <input
                  class="form-check-input mr-2"
                  type="checkbox"
                  value=""
                  id="form6Example8"
                  checked
                />
                <label class="form-check-label" for="form6Example8">
                  Create an account?
                </label>
              </div>

              <!-- Submit button -->
              <button type="submit" class="btn btn-primary btn-block mb-4">
                Place order
              </button>
            </form>
          

Login-register

By using pills you can place login and register forms into a single component.

Sign in with:

or:

Not a member? Register

Sign up with:

or:


            <!-- 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-toggle="pill"
                  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-toggle="pill"
                  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" class="btn btn-primary btn-floating mx-1">
                      <i class="fab fa-facebook-f"></i>
                    </button>

                    <button type="button" class="btn btn-primary btn-floating mx-1">
                      <i class="fab fa-google"></i>
                    </button>

                    <button type="button" class="btn btn-primary btn-floating mx-1">
                      <i class="fab fa-twitter"></i>
                    </button>

                    <button type="button" class="btn btn-primary btn-floating mx-1">
                      <i class="fab fa-github"></i>
                    </button>
                  </div>

                  <p class="text-center">or:</p>

                  <!-- Email input -->
                  <div 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 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" 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" class="btn btn-primary btn-floating mx-1">
                      <i class="fab fa-facebook-f"></i>
                    </button>

                    <button type="button" class="btn btn-primary btn-floating mx-1">
                      <i class="fab fa-google"></i>
                    </button>

                    <button type="button" class="btn btn-primary btn-floating mx-1">
                      <i class="fab fa-twitter"></i>
                    </button>

                    <button type="button" class="btn btn-primary btn-floating mx-1">
                      <i class="fab fa-github"></i>
                    </button>
                  </div>

                  <p class="text-center">or:</p>

                  <!-- Name input -->
                  <div 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 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 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 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 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 mr-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" class="btn btn-primary btn-block mb-3">
                    Sign in
                  </button>
                </form>
              </div>
            </div>
            <!-- Pills content -->
          

Layout

There are multiple ways to structure forms and provide them the desired layout. Have a look at the examples below to learn more about forms layout.

Utilities

Margin utilities are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional form text, and form validation messaging. We recommend sticking to margin-bottom utilities, and using a single direction throughout the form for consistency.

Feel free to build your forms however you like, with <fieldset>s, <div>s, or nearly any other element.

In the example below, we add .mb-4 class to provide a proper margin between two input fields.


            <!-- Name input -->
            <div class="form-outline mb-4">
              <input type="text" id="form7Example1" class="form-control" />
              <label class="form-label" for="form7Example1">Name</label>
            </div>

            <!-- Email input -->
            <div class="form-outline mb-4">
              <input type="email" id="form7Example2" class="form-control" />
              <label class="form-label" for="form7Example2">Email address</label>
            </div>
          

Form grid

More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options. Requires the $enable-grid-classes Sass variable to be enabled (on by default).



            <div class="row">
              <div class="col">
                <!-- Name input -->
                <div class="form-outline">
                  <input type="text" id="form8Example1" class="form-control" />
                  <label class="form-label" for="form8Example1">Name</label>
                </div>
              </div>
              <div class="col">
                <!-- Email input -->
                <div class="form-outline">
                  <input type="email" id="form8Example2" class="form-control" />
                  <label class="form-label" for="form8Example2">Email address</label>
                </div>
              </div>
            </div>

            <hr />

            <div class="row">
              <div class="col">
                <!-- Name input -->
                <div class="form-outline">
                  <input type="text" id="form8Example3" class="form-control" />
                  <label class="form-label" for="form8Example3">First name</label>
                </div>
              </div>
              <div class="col">
                <!-- Name input -->
                <div class="form-outline">
                  <input type="text" id="form8Example4" class="form-control" />
                  <label class="form-label" for="form8Example4">Last name</label>
                </div>
              </div>
              <div class="col">
                <!-- Email input -->
                <div class="form-outline">
                  <input type="email" id="form8Example5" class="form-control" />
                  <label class="form-label" for="form8Example5">Email address</label>
                </div>
              </div>
            </div>
          

Gutters

By adding gutter modifier classes, you can have control over the gutter width in as well the inline as block direction. Also requires the $enable-grid-classes Sass variable to be enabled (on by default).



            <!-- Gutter g-1 -->
            <div class="row g-1">
              <div class="col">
                <!-- Name input -->
                <div class="form-outline">
                  <input type="text" id="form9Example1" class="form-control" />
                  <label class="form-label" for="form9Example1">Name</label>
                </div>
              </div>
              <div class="col">
                <!-- Email input -->
                <div class="form-outline">
                  <input type="email" id="form9Example2" class="form-control" />
                  <label class="form-label" for="form9Example2">Email address</label>
                </div>
              </div>
            </div>

            <hr />

            <!-- Gutter g-5 -->
            <div class="row g-5">
              <div class="col">
                <!-- Name input -->
                <div class="form-outline">
                  <input type="text" id="form9Example3" class="form-control" />
                  <label class="form-label" for="form9Example3">Name</label>
                </div>
              </div>
              <div class="col">
                <!-- Email input -->
                <div class="form-outline">
                  <input type="email" id="form9Example4" class="form-control" />
                  <label class="form-label" for="form9Example4">Email address</label>
                </div>
              </div>
            </div>
          

Column sizing

As shown in the previous examples, our grid system allows you to place any number of .cols within a .row. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .cols equally split the rest, with specific column classes like .col-sm-7.


            <div class="row g-3">
              <div class="col-sm-7">
                <div class="form-outline">
                  <input type="text" id="form10Example1" class="form-control" />
                  <label class="form-label" for="form10Example1">Name</label>
                </div>
              </div>
              <div class="col-sm">
                <div class="form-outline">
                  <input type="text" id="form10Example2" class="form-control" />
                  <label class="form-label" for="form10Example2">Name</label>
                </div>
              </div>
              <div class="col-sm">
                <div class="form-outline">
                  <input type="text" id="form10Example3" class="form-control" />
                  <label class="form-label" for="form10Example3">Name</label>
                </div>
              </div>
            </div>
          

Auto-sizing

The example below uses a flexbox utility to vertically center the contents and changes .col to .col-auto so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.


            <form class="row gy-2 gx-3 align-items-center">
              <div class="col-auto">
                <div class="form-outline">
                  <input type="text" id="form11Example1" class="form-control" />
                  <label class="form-label" for="form11Example1">Label</label>
                </div>
              </div>
              <div class="col-auto">
                <div class="form-check">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    value=""
                    id="form11Example2"
                    checked
                  />
                  <label class="form-check-label" for="form11Example2">
                    Checked
                  </label>
                </div>
              </div>
              <div class="col-auto">
                <div class="form-outline">
                  <input type="text" id="form11Example3" class="form-control" />
                  <label class="form-label" for="form11Example3">Label</label>
                </div>
              </div>
              <div class="col-auto">
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="form11Example4" checked />
                  <label class="form-check-label" for="form11Example4"
                    >Checked switch checkbox input</label
                  >
                </div>
              </div>
              <div class="col-auto">
                <button type="submit" class="btn btn-primary">Submit</button>
              </div>
            </form>