6 Forms Forms

Default form elements

We'll never share your email with anyone else.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.

Supported Bootstrap classes

Below is a complete list of the specific from controls supported by Bootstrap and the classes that customize them. Additional documentation is available for each group.

Classes Used for Supported variations

.form-group

 Any group of form controls

Use with any block-level element like <fieldset> or <div>

.form-control

 Textual inputs

text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, color
Select menus

multiple, size
Textareas N/A

.form-control-file

 File inputs

file

.radio
.radio-inline
.checkbox
.checkbox-inline

 Checkboxes and radios N/A

6.1 Forms - Buttons Buttons

We use bootstrap base css with our own color and sizing tweaks. For full bootstrap documentation, see http://getbootstrap.com/css/

Example 

<p>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</p>
<p>
<button type="button" class="btn btn-primary-outline">Primary</button>
<button type="button" class="btn btn-secondary-outline">Secondary</button>
<button type="button" class="btn btn-success-outline">Success</button>
<button type="button" class="btn btn-info-outline">Info</button>
<button type="button" class="btn btn-warning-outline">Warning</button>
<button type="button" class="btn btn-danger-outline">Danger</button>
</p>

6.1 Forms - Buttons Buttons

We use bootstrap base css with our own color and sizing tweaks. For full bootstrap documentation, see http://getbootstrap.com/css/

Example 

<p>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</p>
<p>
<button type="button" class="btn btn-primary-outline">Primary</button>
<button type="button" class="btn btn-secondary-outline">Secondary</button>
<button type="button" class="btn btn-success-outline">Success</button>
<button type="button" class="btn btn-info-outline">Info</button>
<button type="button" class="btn btn-warning-outline">Warning</button>
<button type="button" class="btn btn-danger-outline">Danger</button>
</p>

6.1.1 Forms - Buttons - Sizes Button sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm for additional sizes.

Example 

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-secondary btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-secondary">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-secondary btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-block">Block level button</button>
  <button type="button" class="btn btn-secondary btn-block">Block level button</button>
</p>

6.1.1 Forms - Buttons - Sizes Button sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm for additional sizes.

Example 

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-secondary btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-secondary">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-secondary btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-block">Block level button</button>
  <button type="button" class="btn btn-secondary btn-block">Block level button</button>
</p>

6.1.2 Forms - Buttons - States Button states

Here are some example states

Examples
Default styling
.active
active button
.disabled
disabled button 
    <button class="btn btn-primary [modifier class]">Bootstrap Button</button>
    <button class="btn btn-default [modifier class]">Bootstrap Button</button>

6.1.2 Forms - Buttons - States Button states

Here are some example states

Examples
Default styling
.active
active button
.disabled
disabled button 
    <button class="btn btn-primary [modifier class]">Bootstrap Button</button>
    <button class="btn btn-default [modifier class]">Bootstrap Button</button>

6.2 Forms - Validation Validation

Example 
<div class="form-group has-success">
  <label class="form-control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control form-control-success" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="form-control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control form-control-warning" id="inputWarning1">
</div>
<div class="form-group has-danger">
  <label class="form-control-label" for="inputDanger1">Input with danger</label>
  <input type="text" class="form-control form-control-danger" id="inputDanger1">
</div>
<div class="checkbox has-success">
  <label>
    <input type="checkbox" id="checkboxSuccess" value="option1">
    Checkbox with success
  </label>
</div>
<div class="checkbox has-warning">
  <label>
    <input type="checkbox" id="checkboxWarning" value="option1">
    Checkbox with warning
  </label>
</div>
<div class="checkbox has-danger">
  <label>
    <input type="checkbox" id="checkboxDanger" value="option1">
    Checkbox with danger
  </label>
</div>

6.3 Forms - › Examples › Examples

Here's an example of a typical form

Example

Join Lyft to get started

Have a Lyft account? Log In 

<div class="container-fluid">
  <div class="row bg-charcoal p-y-l justify-center">
    <div class="col-lg-6 col-sm-8">
      <form class="bg-white border border-moonstone radius p-a-m">
        <p class="m-b-m text-xs-center">
            Join Lyft to get started
        </p>
        <div class="row gutter-small m-y-s">
          <div class="col-xs-6">
              <input class="form-control" placeholder="First Name">
          </div>
          <div class="col-xs-6">
              <input class="form-control" placeholder="Last Name">
          </div>
        </div>
        <div class="row gutter-small m-y-s">
          <div class="col-xs-12">
              <input class="form-control" placeholder="Email address">
          </div>
        </div>
        <label class="block m-y-s">
            <input type="checkbox">
            I agree to the <a href="#">Terms of Service</a>
        </label>
        <button class="btn btn-primary btn-block" type="submit">
            Submit
        </button>
        <p class="m-b-0 m-t col-xs-12 text-xs-center">
            Have a Lyft account? <a href="#">Log In</a>
        </p>
      </form>
    </div>
  </div>
</div>

6.3.1 Forms - › Examples - Error state Error state form

Example

Join Lyft to get started

Please enter a valid email

Have a Lyft account? Log In 

<div class="container-fluid">
  <div class="row bg-charcoal p-y-l justify-center">
    <div class="col-lg-6 col-sm-8">
      <form class="bg-white border border-moonstone radius p-a-m">
        <p class="m-b-m text-xs-center">
            Join Lyft to get started
        </p>
        <div class="row gutter-small m-y-s">
          <div class="col-xs-6">
              <input class="form-control" placeholder="First Name" value="Logan">
          </div>
          <div class="col-xs-6">
              <input class="form-control" placeholder="Last Name" value="Green">
          </div>
        </div>
        <div class="row gutter-small m-y-s">
          <div class="col-xs-12">
              <input class="form-control text-red" placeholder="Email address" value="logan@lyft">
              <div class="text-small text-red m-t-s">
                  Please enter a valid email
              </div>
          </div>
        </div>
        <label class="block m-y-s">
            <input type="checkbox" checked>
            I agree to the <a href="#">Terms of Service</a>
        </label>
        <button class="btn btn-primary btn-block" type="submit">
            Submit
        </button>
        <p class="m-b-0 m-t col-xs-12 text-xs-center">
            Have a Lyft account? <a href="#">Log In</a>
        </p>
      </form>
    </div>
  </div>
</div>

6.3.2 Forms - › Examples - Inline Forms Single input and submit Forms

Here, the inline-form has a submit button that scales according to the width of the container, and

Example 
<div class="container-fluid">
  <div class="row bg-moonstone p-y-l">
    <div class="col-sm-7 col-md-6">
      <form class="row gutter-small">
        <div class="col-xs-12 col-md-8 m-y-s">
            <input class="form-control" placeholder="Email">
        </div>
        <div class="col-xs-12 col-md-4 shrink-1 m-y-s">
            <button class="btn btn-primary btn-block">
              Sign Up
            </button>
        </div>
      </form>
    </div>
  </div>
</div>