Form

Easily create nicely looking forms with different styles and layouts.


Usage

This component applies to all forms and form elements. All form control elements are placed side by side within the next row.

Components

Class Description
.form The class namespace for all form components. No style is actually applied to elements with the .form class

Sub Objects

Class Description
.form-row Add this class to an <div> element to group and align navigations and items to the right.
.form-help-inline Add this class to an <a> tag in an <li> to indicate that it has a subtitle.
.form-help-block Add this class to a <div> element, which serves as a container for your custom content. The content will be centered vertically.
.form-label Add this class to an <a> or <div> element to indicate your brand.
.form-controls Add this class to center your navbar content or brand. The element needs to be the last child in the navbar.
.form-controls-condensed Add this class to an <a> or <div> element to create an icon as a toggle.
.form-icon Add this class to an <a> or <div> element to create an icon as a toggle.

Modifiers

Class Description
.form-stacked Add this class to an <div> element to group and align navigations and items to the right.
.form-horizontal Add this class to an <a> tag in an <li> to indicate that it has a subtitle.

Sub Objects

Form Row

Add the .form-row class to a <div> element to stack form controls.

Usage

  • Legend
  • <form class="form">
        <div class="form-row">
        	...
        </div>
        <div class="form-row">
        	...
        </div>
    </form>

Form Help

Use the .form-help-inline or .form-help-block class to add inline and block level help text for the controls.

Usage

  • The .form-help-inline class creates spacing to the left.

    The .form-help-block class creates an associated paragraph.

  • <form class="form">
    	<!-- Inline -->
        <div class="form-row">
        	<input type="text">
        	<span class="form-help-inline">...</span>
        </div>
    
        <!-- Block -->
        <div class="form-row">
        	<input type="text">
        	<span class="form-help-inline">...</span>
        </div>
    </form>

Form Label & Controls

Add the .form-label and .form-control classes to elements within a .form-stacked or .form-horizontal modifier to apply additional layout style.

Usage

  • Horizontal
    Stacked
  • <form class="form form-horizontal">
    	<div class="form-row">
    		<label class="form-label">...</label>
    		<div class="form-controls">
    			...
    		</div>
    	</div>
    </form>

Form Icon

Below is an example of how to add an icon from the Icon component to a form.

Usage

  • <form class="form">
        <div class="form-icon">
        	<i class="icon-calendar"></i>
        	<input type="text">
        </div>
    </form>

Modifiers

NOTE Layout modifiers can also be added to a <fieldset> element, which allows you to have multiple layouts in a single form.

Form stacked

Add the .form-stacked class to display labels on top of controls.

Usage

  • Radio input
    Checkbox input
  • <form class="form form-stacked">
    	<div class="form-row">
    		<label class="form-label">...</label>
    		<div class="form-controls">
    			...
    		</div>
    	</div>
    </form>

Form horizontal

Add the .form-horizontal class to display labels and controls side by side.

Usage

  • Radio input
    Checkbox input
  • <form class="form form-horizontal">
    	<div class="form-row">
    		<label class="form-label">...</label>
    		<div class="form-controls">
    			...
    		</div>
    	</div>
    </form>