All inputs will span 100% of the available width. The only exception are inputs of inline forms. This is caused by a mobile first design approach.
Inputs should always be contained within a form
node. If a form
contains more than two inputs, a fieldset
should span the inputs too, for
semenatical reaons. Within a horizontal form, all connected inputs and labels should be surrounded
by a .form-group
node for spacing reasons. Furthermore the legend
should work as a headline for a form, describing its function. This is how a basic form
should look like:
<form> <fieldset> <legend>Default form</legend> <div class="form-group"> <label for="exampleInputEmail">Email</label> <input type="text" id="exampleInputEmail" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword">Password</label> <input type="password" id="exampleInputPassword" placeholder="Password"> </div> <label class="checkbox"> <input type="checkbox"> Check me out </label> <button type="submit">Submit</button> </fieldset> </form>
Horizontally aligned label & input forms require some extra classes and nodes. The basic
layout relies on the grid classes. The form itself requires
a class .form-horizontal
. All .form-group
elements work as the rows of
the grid.
All input elements need one additional div
parent node with the grid classes.
To make all labels right align the text, labels require .control-label
.
This type of form rarely works on small screen devices, so all grid classes used here, should only work for medium & large screens.
<form class="form-horizontal"> <fieldset> <legend>Default form</legend> <div class="form-group"> <label class="col-medium-3 control-label">Email</label> <div class="col-medium-9"> <input type="text"> </div> </div> <div class="form-group"> <label class="col-medium-3 control-label">Password</label> <div class="col-medium-9"> <input type="password"> </div> </div> <div class="form-group"> <div class="col-medium-9 col-offset-3"> <label class="checkbox"> <input type="checkbox"> Check me out </label> <button type="submit">Submit</button> </div> </div> </fieldset> </form>
A form can will contain only inline labels and inputs if marked with
the class .form-inline
. This form type also sets the width
of all labels and inputs to auto
. Inline forms should contain only
a few elements. Labels for inputs should always be set but can be accessibly
hidden with a special class .visually-hidden
.
Inline forms will become a stacked form on small screen devices.
<form class="form-inline"> <fieldset> <legend>Inline form</legend> <div class="form-group"> <label class="visually-hidden" for="exampleInputEmail">Email</label> <input type="text" id="exampleInputEmail" placeholder="Enter email"> </div> <div class="form-group"> <label class="visually-hidden" for="exampleInputPassword">Password</label> <input type="password" id="exampleInputPassword" placeholder="Password"> </div> <label class="checkbox"> <input type="checkbox"> Check me out </label> <button type="submit">Submit</button> </fieldset> </form>
Chexboxes and radio buttons belong into the surrounding label, wich
itself gets the class describing the content, either checkbox
or radio
.
<label class="checkbox"> <input type="checkbox"> Check 1 </label> <label class="radio"> <input type="radio"> Radio 1 </label>
With .checkbox-inline
and .radio-inline
these type of inputs
will be displayed within one line.
<label class="checkbox-inline"> <input type="checkbox"> Check 1 </label> <label class="radio-inline"> <input type="radio"> Radio 1 </label>
If input need additional text for descriptions wrap it with a p
and apply .help-block
.
<input type="text"> <p class="help-block">...</p>
Width of inputs and labels can be controlled with regular grid classes on.
additional div
nodes surrounding the inputs.
<div class="form-group"> <div class="col-medium-2"><input type="text"></div> <div class="col-medium-4"><input type="text"></div> <div class="col-medium-3 col-offset-3"><input type="text"></div> </div>
There are two additional sizing classes to increase the height of input elements. .input-small
decreases the height and .input-large
increases it.
<input class="input-small" type="text"> <input type="text"> <input class="input-large" type="text">
This topic needs to be discussed later. How and when do we validate wich kind of inputs?
All input types can be disabled by setting a disabled
onto the input itself.
Some browser though also support the attribute on a fieldset, wich then disables all inputs
within the fieldset. Disabling on a single input level will always work and should be considered
until browser version support is finalized.
<form> <fieldset disabled> ... </fieldset> </form>