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.

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

Telephone

Number

Date

Month

Time

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

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

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

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

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

Input with success

Success! You've done it.

Input with warning

Shucks, check the formatting of that and try again.

Input with danger

Sorry, that username's taken. Try another?

Example help text that remains unchanged.

<div class="form-group has-success">
  <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 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 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.

Checkbox with success

Checkbox with warning

Checkbox with danger

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

Password

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>