Bootstrap and HTML Forms - Part II

Bootstrap adds a few additional classes for checkboxes and radio buttons. Notice the two checkbox and button elements with the name " - diabled" - they use the Bootstrap class .disabled and display special cursor when moused over.

Listing 9.6 - Bootstrap Checkboxes and Radio Groups

Dropdown Menus can be created using the <select> and <option> tags. The .form-control class must be used for proper styling.

Listing 9.7 - A Standard Dropdown Menu

Try it yourself: change the corners of a Dropdown Menu. Put some custom CSS in to change the corners of the dropdown from rounded corners to square corners.

Input Groups - various classes to help style input elements with added information, such as a currency symbol.

Listing 9.8 - Form with Input Group


Sizing Input Groups - using the classes .input-group-lg and .input-group-sm, you can change the size from the default.

Listing 9.9 - Different-sized input Groups

Fancy Add-ons - you can add many things in groups, including checkboxes and radio buttons, etc.

Listing 9.10 - RadioButtons and Checkboxes as Input Add-ons

Interactivity in Bootstrap Forms

Bootstrap provides styles for form interactivity to make the forms easier to use. These include:
  • Focus
  • Disabled
  • Read-only
  • Validation
Focus State - When a form control has focus, Bootstrap removes the default outline styles and adds a box-shadow. You can use custom CSS styles to change the colors to match your styles. Listing 9.11 uses a CSS rule to style the focus state of an input control <input type="text" id="formField">. Compare the focus settings on this control to the standard Bootstrap form controls above.

Disabled and Read-only states

Validation states - You can define validation states for errors, warnings, and success using the classes .has-error, .has-warning, and .has-success.

Listing 9.12 - Validation States on Form Fields

Listing 9.13 - Validation States with Feedback Icon

(End of examples of form styles.)