Text Inputs

Easily create nicely looking forms with different styles and layouts.


Control states

Provide the user with basic information through feedback states on form controls.

Disabled

Add the disabled attribute to a form control and it will be appear muted.

Usage

  • <input type="text" disabled>
    <select disabled>
        <option>...</option>
        <option>...</option>
        <option>...</option>
    </select>

Validation states

Add the .form-danger or .form-success class to a form control to notify the user, whether or not the value is validated.

Usage

  • <input type="text" class="form-danger">
    <input type="text" class="form-success">

Control modifiers

Size modifiers

Add the .form-large or .form-small class to an <input>, <select> or <textarea> element to make it smaller or larger.

Usage

  • <input type="text" class="form-large">
    <input type="text">
    <input type="text" class="form-small">

Help text

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.

  • <div class="form-row">
        <input type="text"> <span class="form-help-inline">...</span>
    </div>
    <div class="form-row">
        <textarea></textarea>
        <p class="form-help-block">...</p>
    </div>