Fluxo

Forms #

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

Overview #

Bootstrap's form controls expand on Bootstrap Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.

Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

Add class required-field on a label element to display a * mark indicating the field is mandatory.

Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for documentation on required classes, form layout, and more. For more information, see Bootstrap Forms.

<form>
  <div class="form-group">
    <label class="required-field" for="exampleEmail">Email address</label>
    <input type="email" class="form-control" id="exampleEmail" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="required-field" for="examplePassword">Password</label>
    <input type="password" class="form-control" id="examplePassword" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleSelect">Gender</label>
    <select class="form-control" id="exampleSelect">
      <option>Male</option>
      <option>Female</option>
      <option>Prefer not to say</option>
    </select>
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck">
    <label class="form-check-label" for="exampleCheck">Send me news and updates</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Inline Form #

<form class="form-inline">
  <div class="input-group mr-sm-3 mb-2">
    <input type="email" class="form-control" id="email" placeholder="Email address">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Get Started Today</button>
</form>

Form Text #

Form text is a small label located under the field.

Use a valid email address.
Forgot password? 
<form>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" class="form-control" id="email" placeholder="Email address">
    <span class="d-block">
      <small class="form-text text-muted">Use a valid email address.</small>
    </span>
  </div>

  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="8 characters or more">
    <span class="d-block text-lg-right">
      <small class="form-text"><a href="#0">Forgot password?</a></small>
    </span>
  </div>
</form>

Sizing #

Set heights using classes like .form-control-lg and .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

Switches #

A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. Switches also support the disabled attribute.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

File Browser #

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul class="pl-5">
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>