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.

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

$
.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 ml-2">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>

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>

Form validation

To use, add .has-warning, .has-danger, or .has-success to the parent element. Contextual validation text, in addition to your usual form field help text, can be added with the use of .form-control-feedback.

Example help text that remains unchanged.
<div class="form-group has-success">
  <label class="col-form-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control form-control-success" id="inputSuccess1">
  <div class="form-control-feedback">Success! You've done it.</div> 
</div>
<div class="form-group has-warning">
  <label class="col-form-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control form-control-warning" id="inputWarning1">
  <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div> 
</div>
<div class="form-group has-danger">
  <label class="col-form-label" for="inputDanger1">Input with danger</label>
  <input type="text" class="form-control form-control-danger" id="inputDanger1">
  <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>

Validation states

Add other states to your custom forms with our validation classes.

<div class="form-check has-success">
  <input type="checkbox" class="form-check-input" id="checkboxSuccess" value="option1">
  <label class="form-check-label" for="checkboxSuccess">
    Checkbox with success
  </label>
</div>  
<div class="form-check has-warning">
  <input type="checkbox" class="form-check-input" id="checkboxWarning" value="option2">
  <label class="form-check-label" for="checkboxWarning">
    Checkbox with warning
  </label>
</div>  
<div class="form-check has-danger">
  <input type="checkbox" class="form-check-input" id="checkboxDanger" value="option3">
  <label class="form-check-label" for="checkboxDanger">
    Checkbox with danger
  </label>
</div>

Input group states

https://umbler.com/

$ .00

$ 0.00
<div class="input-group has-success">
  <span class="input-group-addon" id="basic-addon3">https://umbler.com/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<br>
<div class="input-group has-warning">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    <span class="input-group-addon">.00</span>
</div> 
<br>
<div class="input-group has-danger">
    <span class="input-group-addon">$</span>
    <span class="input-group-addon">0.00</span>
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</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>

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>