Individual form controls automatically receive some global styling. All textual <input>
, <textarea>
, and <select>
elements with .form-control
are set to width: 100%;
by default. Wrap labels and controls in .form-group
for optimum spacing.
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.
Add .form-inline
to your <form>
for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only
class.
<form class="form-inline" role="form">
<div class="form-group" >
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal
to the form. Doing so changes .form-group
s to behave as grid rows, so no need for .row
.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<inputtype="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox" >
<label>
<inputtype="checkbox"> Remember me </label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Examples of standard form controls supported in an example form layout.
Most common form control, text-based input fields. Includes support for all HTML5 types: text
, password
, datetime
, datetime-local
, date
, month
, time
, week
, number
, email
, url
, search
, tel
, and color
.
Inputs will only be fully styled if their type
is properly declared.
<inputtype="text"class="form-control"placeholder="Text input">
To add integrated text or buttons before and/or after any text-based <input>
, check out the input group component.
Form control which supports multiple lines of text. Change rows
attribute as necessary.
<textareaclass="form-control"rows="3"></textarea>
Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"checked>
Option one is this and that—be sure to include why it's great </label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
Use the .checkbox-inline
or .radio-inline
classes on a series of checkboxes or radios for controls that appear on the same line.
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
Use the default option, or add multiple
to show multiple options at once.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
When you need to place plain text next to a form label within a horizontal form, use the .form-control-static
class on a <p>
.
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">
</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
We remove the default outline
styles on some form controls and apply a box-shadow
in its place for :focus
.
:focus
state
The above example input uses custom styles in our documentation to demonstrate the :focus
state on a .form-control
.
Add the disabled
attribute on an input to prevent user input and trigger a slightly different look.
<inputclass="form-control"id="disabledInput"type="text"placeholder="Disabled input here..." disabled>
Add the disabled
attribute to a <fieldset>
to disable all the controls within the <fieldset>
at once.
<a>
not impacted
This class will only change the appearance of <a class="btn btn-default">
buttons, not their functionality. Use custom JavaScript to disable links here.
While Bootstrap will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the disabled
attribute on a <fieldset>
. Use custom JavaScript to disable the fieldset in these browsers.
<form role="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">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning
, .has-error
, or .has-success
to the parent element. Any .control-label
, .form-control
, and .help-block
within that element will receive the validation styles.
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label"for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
You can also add optional feedback icons with the addition of an extra class and the right icon.
Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. For inputs without labels, adjust the top
value. For input groups, adjust the right
value to an appropriate pixel value depending on the width of your addon.
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
Optional icons also work on horizontal and inline forms.
<form class="form-horizontal" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
</form>
<form class="form-inline" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</form>
Set heights using classes like .input-lg
, and set widths using grid column classes like .col-lg-*
.
Create taller or shorter form controls that match button sizes.
<inputclass="form-control input-lg"type="text"placeholder=".input-lg">
<inputclass="form-control"type="text"placeholder="Default input">
<inputclass="form-control input-sm"type="text"placeholder=".input-sm">
<selectclass="form-control input-lg">...</select>
<selectclass="form-control">...</select>
<selectclass="form-control input-sm">...</select>
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>
Block level help text for form controls.
<spanclass="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>