Listing 9.1: Basic HTML Form

The point is to show the lack of styling.

Listing 9.2: Wrapping a Form Control in a Div

Improved styling over Listing 9.1.

Listing 9.3: First Two Rows of a Horizontal Form

Listing 9.4: An Inline Form

Listing 9.5:

The labels are hidden by the sr-only class.

Listing 9.6: Bootstrap Chekboxes and Radio Groups

Listing 9.7: A Standard Dropdown Menu

Try It Yourself

Listing 9.8: Form with Input Group


Listing 9.9: Different-sized Input Groups

Listing 9.10: Radio Buttons and Checkboxes as Input Add-ons

Listing 9.11: CSS to Restyle an Input Field Focus State

Even though I'm using the code tag to show the style below, I had to omit the style tag or the code would not display. This style is properly embedded in my header section above.

#formField:focus { border-color:#7B66E9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0, .075), 0 0 8px rgba(170,158,232,0.5); box-shadow: inset 0 1px 1px rgba(0,0,0, .075), 0 0 8px rgba(170,158,232,0.75); }

Listing 9.12: Validation States on Form Fields

Listing 9-13: Validation States with Feedback Icon