Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.
.form-group class is the easiest way to add some structure to forms. Its only purpose is to provide
margin-bottom around a label and control pairing.
As a bonus, since it’s a class you can use it with
<div>s, or nearly any other element.
.form-inline class to display a series of labels, form controls, and buttons on a single horizontal row.
Inline Forms custom form controls
Custom form controls and selects are also supported.
Horizontal Forms using the grid
.row class to form groups and use the
.col-*-* classes to specify the width of your labels and controls.
Be sure to add
.col-form-label to your
<label>s as well so they’re vertically centered with their associated form controls.
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with
Group checkboxes or radios on the same horizontal row by adding
.form-check-inline to any
Set heights using classes like
.form-control-lg, and set widths using grid column classes like
Here are some examples of the aforementioned classes in action.
First up is your standard left-aligned fields with labels, help text, and validation messaging.
<select> menus need only a custom class,
.custom-select to trigger the custom styles.
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
Bootstrap does not support multiple form-controls in a single input group.
Add the relative form sizing classes to the
.input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
Checkboxes and Radio Addons
Place any checkbox or radio option within an input group’s addon instead of text.
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
Buttons in input groups must wrapped in a
.input-group-btn for proper alignment and sizing. This is required due to default browser styles that cannot be overridden.
Buttons with Dropdowns
Dropdowns buttons in input groups also must be wrapped in a
We offer best in class service for your needs
About Unify dolor sit amet, consectetur adipiscing elit. Maecenas eget nisl id libero tincidunt sodales.