By default, .form-controls are block-level elements set to be 100% width of their parent.
The width of form inputs should be adjusted to visually match the character size of the information expected for the user to enter. For example, the average email address is going to be lengthier than a postal code therefore their input widths should be adjusted accordingly. This type of consideration allows for a better user experience when filling in the form.
There are several ways the widths can be controlled. It is easiest to start when the form itself has a width applied. This sets the boundaries for all of the form inputs inside.
Form widths
Please DO
Apply either of the width classes form-width-md or form-width-lg to the <form> element.
For demonstration purposes, the following <form>s are given a dashed border to visualize their width boundaries.
The following form has the form-width-md class applied.
The following form has the form-width-lg class applied.
<!-- Use `form-width-md` for a medium form width. Or use `form-width-lg` for a slightly larger form width. --><formclass="{{ form-width-md | form-width-lg }}"><divclass="form-group"><labelfor="{{ Input id }}">{{ Label }}</label><inputid="{{ Input id }}"name="{{ Input name }}"type="text"class="form-control"></div></form>
Please DON’T
Input widths
Certain types of inputs like names, phone numbers, and postal codes require only a handful of characters. It is recommended to apply sizing classes to these kinds of <input>s to give them an appropriate width relative to the input you are expecting. This provides a visual cue for the user on the length of information they should enter.
Note: These input width classes are best applied when the inputs are on their own row or line. When using a form grid layout, there may not be a need to use these input width classes.
For demonstration purposes, the following <form> has been given a dashed border to visualize its width boundaries.
<!-- Use `form-width-md` for a medium form width. Or use `form-width-lg` for a slightly larger form width. --><formclass="{{ form-width-md | form-width-lg }}"><divclass="form-group"><labelfor="{{ Input id }}">{{ Label }}</label><!-- Use the input-width class that best suits the input.
Or don't add the input-width classes to keep the width of the input 100%. --><inputid="{{ Input id }}"name="{{ Input name }}"type="text"class="form-control {{ input-width-lg | input-width-md | input-width-sm }}"></div></form>
Form groups
Use the .form-group class to group labels, inputs, optional help text, and form validation messaging. The class contains styles for margin-bottom spacing.
<formclass="form-width-md"><divclass="form-group"><labelfor="{{ Input id }}">{{ Label }}</label><inputid="{{ Input id }}"name="{{ Input name }}"type="text"class="form-control"></div><divclass="form-group"><labelfor="{{ Input id }}">{{ Label }}</label><inputid="{{ Input id }}"name="{{ Input name }}"type="text"class="form-control"></div></form>
Form sections
Use the .form-section class to group multiple inputs or .form-groups. The class contains larger margin-bottom spacing compared to the .form-group.
The responsive Boostrap grid system can be used to create form layouts with multiple inputs per row.
Please DO
Group related inputs together.
<formclass="form-width-md"><h2>{{ Heading }}</h2><divclass="row"><divclass="col-sm-6"><divclass="form-group"><labelfor="{{ Input id }}">{{ Label }}</label><inputid="{{ Input id }}"name="{{ Input name }}"type="text"class="form-control"></div></div><divclass="col-sm-6"><divclass="form-group"><labelfor="{{ Input id }}">{{ Label }}</label><inputid="{{ Input id }}"name="{{ Input name }}"type="text"class="form-control"></div></div></div><h2>{{ Heading }}</h2><divclass="row"><divclass="col-sm-4"><divclass="form-group"><labelfor="{{ Input id }}">{{ Label }}</label><inputid="{{ Input id }}"name="{{ Input name }}"type="text"class="form-control"></div></div><divclass="col-sm-8"><divclass="form-group"><labelfor="{{ Input id }}">{{ Label }}</label><inputid="{{ Input id }}"name="{{ Input name }}"type="text"class="form-control"></div></div></div></form>
Please DON’T
Do not group un-related inputs together.
Form row
You can also swap .row with .form-row, a variation of the standard grid row with tighter gutter spaces. Use this class for tighter and more compact form layouts.
<form><divclass="form-row"><divclass="col-sm-6"><divclass="form-group"><labelfor="{{ Input id }}">{{ Label }}</label><inputid="{{ Input id }}"name="{{ Input name }}"type="text"class="form-control"></div></div><divclass="col-sm-6"><divclass="form-group"><labelfor="{{ Input id }}">{{ Label }}</label><inputid="{{ Input id }}"name="{{ Input name }}"type="text"class="form-control"></div></div></div></form>
