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