Incredible template
May 8, 2017
Bootstrap Forms
Base Components are usually small helper components to build Block Components.
These Components can be easily used and customized in any blocks.
Form Controls
Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
General Controls
Remember, since Bootstrap utilizes the HTML5 doctype, all inputs must have a
type attribute.
Form Layouts
Since Bootstrap applies display: block and
width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.
Form Groups
The
.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 <fieldset> s,
<div>s, or nearly any other element.
Inline Forms
Use the
.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
Add the .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.
Checkboxes and Radios
Default checkboxes and radios are improved upon with the help of .form-check,
a single class for both input types that improves the layout and behavior of their HTML elements. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
Default (stacked)
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with
.form-check.
Inline
Group checkboxes or radios on the same horizontal row by adding
.form-check-inline to any .form-check.
Disabled and Readonly States
Add the
disabled boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a
not-allowed cursor. Also, read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
Disabled
Add the disabled attribute to a
<fieldset> to disable all the controls within.
Control and Column Sizing
Bootstrap comes with three control form sizes: small, default and large. For column sizing, just wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
Inputs
Set heights using classes like
.form-control-lg, and set widths using grid column classes like .col-lg-*.
Validation
Bootstrap includes validation styles for danger, warning, and success states on most form controls. Generally speaking, you’ll want to use a particular state for specific types of feedback: danger, warning and success states.
Form Groups
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.
Custom Forms
For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.
Select Menu
Custom <select> menus need only a custom class,
.custom-select to trigger the custom styles.
Input Group
Easily extend form controls by adding text, buttons, or button groups on either side of textual
<input>s.
Basic Example
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.
Sizing
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 Addons
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
Button Addons
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 .input-group-btn.
We offer best in class service for your needs
About Us
About Unify dolor sit amet, consectetur adipiscing elit. Maecenas eget nisl id libero tincidunt sodales.
Useful Links
Our Contacts
795 Folsom Ave, Suite 600,
San Francisco, CA 94107 795
(+123) 456 7890
(+123) 456 7891