Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.
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.
Below is a complete list of the specific form controls supported by Bootstrap and the classes that customize them.
| 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 |
Checkboxes and radios | N/A |
Coding html
Since Bootstrap utilizes the HTML5 doctype, all inputs must have a type attribute.
<form>
<div class=”form-group”>
<label for=”exampleFormControlInput1″>Email address</label>
<input type=”email” class=”form-control” id=”exampleFormControlInput1″ placeholder=”name@example.com”>
</div>
<div class=”form-group”>
<label for=”exampleFormControlSelect1″>Example select</label>
<select class=”form-control” id=”exampleFormControlSelect1″>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class=”form-group”>
<label for=”exampleFormControlSelect2″>Example multiple select</label>
<select multiple class=”form-control” id=”exampleFormControlSelect2″>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class=”form-group”>
<label for=”exampleFormControlTextarea1″>Example textarea</label>
<textarea class=”form-control” id=”exampleFormControlTextarea1″ rows=”3″></textarea>
</div>
</form>
Recent Comments