Example forms using just form controls, no extra markup
+
Uneditable forms
+To create an element that looks like a form but doesn't behave like one, you can use .uneditable-form. This should be used in combination with uneditable and disabled input fields. Uneditable inputs inside an uneditable form always look disabled.
+<div class="uneditable-form"> + … +</div> ++
The .form-actions area does not have the gray background to show distinction between editable and uneditable forms.
+ +
Small labels
+If you have a lot of fields in a form, you might want to use three or four columns. However labels can start taking up to much space. Simple add .small-labels to a horizontal form (or section within a form) to solve this.
+<form class="form-horizontal small-labels"> + … +</div> ++
+
Extending form controls
Form help text
To add help text for your form inputs, include inline help text with <span class="help-inline"> or a help text block with <p class="help-block"> after the input element.
+
Editor textarea
+Add .editor to any textarea or .uneditable-textarea to create a larger field for content editing.
Also add .editor-html, if the textarea will be replaced by e.g. CKEditor or TinyMCE.
As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.
Upload button
+It's possible to use a button to upload files, instead of showing the native browser element.
+ Upload a file +There is also an interactive file and image upload widgets available. View the Javascript docs for that.
++ +
Action links
+| Action link | +Class | +Description | +
|---|---|---|
| Default | +.act |
+ Standard gray text | +
| Primary | +.act-primary |
+ Provides extra visual weight | +
| Info | +.act-info |
+ Used as an alternate to the default styles | +
| Success | +.act-success |
+ Indicates a successful or positive action | +
| Warning | +.act-warning |
+ Indicates caution should be taken with this action | +
| Danger | +.act-danger |
+ Indicates a dangerous or potentially negative action | +
Alternative style for actions
+Sometimes a button will pull to much attention to an action. In those cases, you can use action links instead.
+Action links can be used just like buttons, simply use .act instead.
Disabled state
+For disabled action links, use .disabled for links and the disabled attribute for <button> elements.
+
Iconic icons Graciously provided by P.J. Onori
+Icons as a font
+Instead of using images, the Iconic icons are a font. This has the advantage that they can be any color you like, have the same size as your text and are subject to CSS text effects.
+ +All icons classes are prefixed with .iconic- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.
The Iconic icons have been created by P.J. Onori of the Some Random Dude blog.
+How to use
+For iconic icons you can use an <i> tag, just like regular for icons. To use, place the following code just about anywhere:
+<i class="iconic-search"></i> ++
There are 170 classes to choose from for your iconic icons. Just add an <i> tag with the right classes and you're set. You can find the full list right here in this document.
Styling
+Since iconic icons are a font, they will automatically match the text size and style. You can even use text effects, like text-shadow.
An external link and some italic text.
++
Approved
+RSS feed
+