Tom Manchester
(Works at )
Luke Williams
(Lives in )
People near:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sunt in culpa quifdaasd quis.
06 Dec, 2018Duis non semper sapien. Morbi imperdiet velit in bibendum lobortis. Integer arcu urna, elementum in pellentesque nec, finibus at nisi.
19 Nov, 2017Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Here’s a quick example to demonstrate Bootstrap’s form styles.
Textual form controls—like <input>
s, <select>
s, and <textarea>
s—are styled with the .form-control
class. Included are styles for general appearance, focus state, sizing, and more.
Add the readonly
boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
Set horizontally scrollable range inputs using .form-control-range
.
Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
Checkbox example:
Radio example:
The .form-group
class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging.
More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
More complex layouts can also be created with the grid system.
Provide valuable, actionable feedback to your users with HTML5 form validation.
A switch has the markup of a custom checkbox but uses the .custom-switch
class to render a toggle switch. Switches also support the disabled
attribute.
Custom <select>
menus need only a custom class, .custom-select
to trigger the custom styles. Custom styles are limited to the <select>
’s initial appearance and cannot modify the <option>
s due to browser limitations.
The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.