Bootstrap Form Inputs
Bootstrap Input
Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
<div class="form-group">
<label for="user">Name:</label>
<input type="text" class="form-control" id="user">
</div>
<div class="form-group">
<label for="Password">Password:</label>
<input type="password" class="form-control" id="Password">
</div>
Bootstrap Textarea
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Bootstrap Checkboxes
Checkboxes are used if you want the user to select any number of options from a list of preset options. The following example contains three checkboxes. The last option is disabled:
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option 3</label>
</div>
Use the .checkbox-inline class if you want the checkboxes to appear on the same line:
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
Bootstrap Radio Buttons
Radio buttons are used if you want to limit the user to just one selection from a list of preset options. The following example contains three radio buttons. The last option is disabled:
<div class="radio">
<label><input type="radio" name="opt1">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="opt2">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="opt3" disabled>Option 3</label>
</div>
Use the .radio-inline class if you want the radio buttons to appear on the same line:
<label class="radio-inline"><input type="radio" name="opt1">Option 1</label>
<label class="radio-inline"><input type="radio" name="opt2">Option 2</label>
<label class="radio-inline"><input type="radio" name="opt3">Option 3</label>
Bootstrap Select List
Select lists are used if you want to allow the user to pick from multiple options.
<div class="form-group">
<label for="list">Select list:</label>
<select class="form-control" id="list">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<label for="list2">Select list:</label>
<select multiple class="form-control" id="list2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</select>
</div>
Bootstrap Form Inputs (more)
Static Control
If you need to insert plain text next to a form label within a horizontal form, use the .form-control-static class on a <p> element:
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<p class="form-control-static">demo@demo.com</p>
</div>
</div>
</form>
Bootstrap Input Groups
The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a "help text".
The .input-group-addon class attaches an icon or help text next to the input field.
<form>
<div class="input-group">
<span class="input-group-addon"><i
class="glyphicon glyphicon-user"></i></span>
<input id="email"
type="text" class="form-control" name="email" placeholder="Email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon
glyphicon-lock"></i></span>
<input id="password" type="password"
class="form-control" name="password" placeholder="Password">
</div>
<div class="input-group">
<span class="input-group-addon">Text</span>
<input id="msg" type="text" class="form-control" name="msg"
placeholder="Additional Info">
</div>
</form>
The .input-group-btn attaches a button next to an input. This is often used together with a search bar
<form>
<div class="input-group">
<input
type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button
class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
Bootstrap Input Sizing
Input Sizing in Forms
Set the heights of input elements using classes like .input-lg and .input-sm.
Set the widths of elements using grid column classes like .col-lg-* and .col-sm-*.
<form>
<div class="form-group">
<label for="inputsm">Small
input</label>
<input class="form-control input-sm" id="inputsm" type="text">
</div>
<div class="form-group">
<label for="inputdefault">Default input</label>
<input class="form-control" id="inputdefault" type="text">
</div>
<div class="form-group">
<label for="inputlg">Large
input</label>
<input class="form-control input-lg" id="inputlg" type="text">
</div>
</form>
You can quickly size labels and form controls within a Horizontal form by adding .form-group-* to the </div class="form-group"> element:
<div class="form-group form-group-lg">
You can also quickly size all inputs and other elements inside an .input-group with the .input-group-sm or .input-group-lg classes:
<div class="input-group input-group-lg">
