Get a little fancy with your tables by adding zebra-striping—just add the .striped-table class.
| Stacked, left-aligned labels over controls | |||
| Horiztonal | +Horizontal | .horizontal-form |
Float left, right-aligned labels on same line as controls |
|---|
With Bootstrap 2, we completely recoded our forms to allow for simple base styles and improved namespacing on labels and controls. To address the many uses of forms, we've included some base styles to help get you started.
+With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.
+Our default form styles are now vertical, not horizontal. This makes it easier to customize bare-bones forms, as well as forms in tricker situations like sign-up, modals, etc. They share the same exact markup; just swap the class.
+Reflecting default WebKit styles, just add .search-form for extra rounded search fields.
Inputs are block level to start. For .inline-form and .horizontal-form, we use inline-block.
Shown on the left are all the default form controls we support. Here's the bulleted list:
+Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.
+Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.
It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding .control-group.
+<fieldset class="control-group error"> + ... +</fieldset> ++
Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.
+Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.