Forms

Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.

Form controls

Bootstrap’s form controls expand on our Rebooted form styles with classes.

We'll never share your email with anyone else.
Make sure the label of the input[type=file] is below it and have the class .btn.btn-secondary. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div> 
  <div class="form-group">
    <label for="exampleSelect1">Example select</label>
    <select class="form-control" id="exampleSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div> 
  <div class="form-group">
    <label for="exampleTextarea">Example textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </div>
  <div class="form-group">
    <input type="file" id="exampleInputFile" class="form-control-file" data-multiple-caption="{count} arquivos selecionados" multiple>
    <label for="exampleInputFile" class="btn btn-secondary">      
      <span>Escolha um arquivo...</span>
    </label>
    <small id="fileHelp" class="form-text text-muted">Make sure the label of the <code>input[type=file]</code> is below it and have the class <code>.btn.btn-secondary.</code></small>
  </div>  
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Specific form controls

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-local, date, month, time, week, number, email, url, search, tel, color
Select menus

multiple, size
Textareas N/A

.form-control-file

 File inputs

file

.form-check
.form-check-inline

 Checkboxes and radios N/A

Textual inputs

Here are examples of .form-control applied to each textual HTML5 <input> type.

<div class="form-group row">
  <label for="example-tel-input" class="col-xs-2 col-form-label">Telephone</label>
  <div class="col-xs-10">
    <input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
  </div>
</div> 
<div class="form-group row">
  <label for="example-number-input" class="col-xs-2 col-form-label">Number</label>
  <div class="col-xs-10">
    <input class="form-control" type="number" value="42" id="example-number-input">
  </div>
</div> 
<div class="form-group row">
  <label for="example-date-input" class="col-xs-2 col-form-label">Date</label>
  <div class="col-xs-10">
    <input class="form-control" type="date" value="2011-08-19" id="example-date-input">
  </div>
</div>
<div class="form-group row">
  <label for="example-month-input" class="col-xs-2 col-form-label">Month</label>
  <div class="col-xs-10">
    <input class="form-control" type="month" value="2011-08" id="example-month-input">
  </div>
</div> 
<div class="form-group row">
  <label for="example-time-input" class="col-xs-2 col-form-label">Time</label>
  <div class="col-xs-10">
    <input class="form-control" type="time" value="13:45:00" id="example-time-input">
  </div>
</div>

Upload area

Use .is-active class for highlighted component.

Arraste ou clique para realizar o upload dos arquivos. Máx de 100MB 
<a href="javascript:;" class="drag-area">
  <div class="media">
    <div class="media-left pr-3">
      <span class="icon icon-cloud-upload icon-4x"></span>
    </div>
    <div class="media-body">
      <b class="font-bold">Arraste ou clique</b> para realizar o upload dos arquivos.
      <small class="d-block font-bold">Máx de 100MB</small>
    </div>
  </div>
</a>

Form groups

The .form-group class is the easiest way to add some structure to forms. Its only purpose is to provide margin-bottom around a label and control pairing. You can use it with <fieldset>s, <div>s, or nearly any other element.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

Inline forms

Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row.

  • Controls are display: inline-block to provide alignment control via vertical-align and margin.
  • Controls receive width: auto to override the Bootstrap default width: 100%.
  • Controls only appear inline in viewports that are at least 768px wide.

Because of this, you may need to manually address the width and alignment of individual form controls.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control mr-2" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-primary">Send invitation</button>
</form>
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>
$
.00
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Input Code

Add class .input-code to .form-control or .input-groupelement.

$
.00
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control input-code" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group input-code">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div> 
</form>

Using the Grid

Add the .row class to form groups and use the .col-*-* classes to specify the width of your labels and controls.

Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls. For <legend> elements, you can use .col-form-legend to make them appear similar to regular <label> elements.

Radios 
<div class="container">
  <form>
    <div class="form-group row">
      <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div> 
    <fieldset class="form-group row">
      <legend class="col-form-legend col-sm-2">Radios</legend>
      <div class="col-sm-10">
          <div class="form-check">
            <input id="gridRadios1" class="form-check-input" type="radio" name="gridRadios" value="" checked>
            <label class="form-check-label" for="gridRadios1">
              Option one is this and that
            </label>
          </div>
          <div class="form-check">
            <input id="gridRadios2" class="form-check-input" type="radio" name="gridRadios" value="">
            <label class="form-check-label" for="gridRadios2">
              Option two can be something else 
            </label>
          </div>
          <div class="form-check disabled">
            <input id="gridRadios3" class="form-check-input" type="radio" name="gridRadios" value="" disabled>
            <label class="form-check-label" for="gridRadios3">
              Option three is disabled
            </label>
          </div>  
      </div>
    </fieldset> 
    <div class="form-group row">
      <div class="offset-sm-2 col-sm-10">
        <button type="submit" class="btn btn-primary">Sign in</button>
      </div>
    </div>
  </form>
</div>

Grid-based form layouts also support large and small inputs.

<div class="container">
  <form>
    <div class="form-group row">
      <label for="lgFormGroupInput" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="you@example.com">
      </div>
    </div>
    <div class="form-group row">
      <label for="smFormGroupInput" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control form-control-sm" id="smFormGroupInput" placeholder="you@example.com">
      </div>
    </div>
  </form>
</div>

Static controls

When you need to place plain text next to a form label within a form, use the .form-control-static class on a <p>.

email@example.com

<form>
  <div class="form-group row">
    <label class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

email@example.com

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">email@example.com</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Confirm identity</button>
</form>

Disabled states

Add the disabled boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a not-allowed cursor.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Add the disabled attribute to a <fieldset> to disable all the controls within.

$
.00
<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <div class="input-group">
        <div class="input-group-addon">$</div>
        <input type="text" class="form-control" placeholder="Amount">
        <div class="input-group-addon">.00</div>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Readonly inputs

Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Control sizing

Set heights using classes like .form-control-lg, and set widths using grid column classes like .col-lg-*.

<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">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Column sizing

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Help text block level

Block-level help text in forms can be created using .form-text. This class includes display: block and adds some top margin for easy spacing from the inputs above.

Your password must be 8-20 characters long, contain letters and numbers. 

<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<p id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers.
</p>

Help text Inline

Inline text can use any typical inline HTML element (be it a <small>, <span>, or something else).

Must be 8-20 characters long. 
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword4">Password</label>
    <input type="password" id="inputPassword4" class="form-control" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

Input security

Cross-browser alternative to -webkit-text-security. Use .form-control-security.

<form>
  <div class="form-group">
    <label>Password</label>
    <input type="text" class="form-control form-control-security" value="h!|cX/fu*wHz^I-" />
  </div>
</form>