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.

We'll never share your email with anyone else.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
Radio buttons

Textual Inputs

Here are examples of .form-control applied to each textual HTML5 <input> type.


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.


Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.


Inline Forms

Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row.

@

Must be 8-20 characters long.

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.

Radios

Horizontal form sizes

Grid-based form layouts also support large and small inputs.


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.


Without Labels

Should you have no text within the <label>, the input is positioned as you’d expect. Currently only works on non-inline checkboxes and radios.


Static Controls

When you need to place plain text next to a form label within a form, use the .form-control-static class on an element of your choice.

Inline Forms

email@example.com


email@example.com


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.


Readonly Inputs

Add the readonly boolean attribute on an input to prevent modification of the input’s value


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-*.


Selects

Also .form-control-lg class is used for selects.


Column Sizing

Wrap inputs in grid columns, or any custom parent element.


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.

Example help text that remains unchanged.
Example help text that remains unchanged.
Example help text that remains unchanged.

Inline Forms

Those same states can also be used with horizontal forms.

Example help text that remains unchanged.
Example help text that remains unchanged.
Example help text that remains unchanged.

Checkboxes and Radios

Checkboxes and radios are also supported.



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.

Checkboxes and Radios

Here are some custom checkboxes and radios examples.






Select Menu

Custom <select> menus need only a custom class, .custom-select to trigger the custom styles.


File Browser

The file input is the most gnarly of the bunch and require additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.


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.

@
@example.com
https://example.com/users/
$ .00
$ 0.00

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.

Latest Posts



Our Contacts

795 Folsom Ave, Suite 600,
San Francisco, CA 94107 795

(+123) 456 7890
(+123) 456 7891