Forms

Some basic styling for forms

See full standalone example

Form

Default form styiling. Add .form to the <form> tag or the container <div>

Example

Legend
Legend
Link 
<div class="form">
    <div class="input">
        <label>Label</label>
        <input type="text" placeholder="Placeholder"/>
    </div>
    <div class="input">
        <label>Label</label>
        <select>
            <option>Option 1</option>
            <option>Option 2</option>
        </select>
    </div>
    <fieldset class="input">
        <legend>Legend</legend>
        <label>
            <input type="checkbox" />
            Checkbox
        </label>
        <label>
            <input type="checkbox" />
            Checkbox
        </label>
    </fieldset>
    <fieldset class="input">
        <legend>Legend</legend>
        <label>
            <input type="radio" />
            Radio
        </label>
        <label>
            <input type="radio" />
            Radio
        </label>
    </fieldset>
    <div class="input">
        <label>Label</label>
        <textarea placeholder="Textarea"></textarea>
    </div>
    <div class="submit">
        <input class="btn" type="submit" value="Submit" />
        <button class="btn">Button</button>
        <a href="#" class="btn">Link</a>
        <button href="#" class="btn btn-link">Link</button>
    </div>
</div>

Form Horizontal

Default form styiling. Add .form .form-horizontal to the <form> tag or the container <div>

Example

Legend
Legend
Link 
<div class="form form-horizontal">
    <div class="input">
        <label>Label</label>
        <input type="text" placeholder="Placeholder"/>
    </div>
    <div class="input">
        <label>Label</label>
        <select>
            <option>Option 1</option>
            <option>Option 2</option>
        </select>
    </div>
    <fieldset class="input">
        <legend>Legend</legend>
        <label>
            <input type="checkbox" />
            Checkbox
        </label>
        <label>
            <input type="checkbox" />
            Checkbox
        </label>
    </fieldset>
    <fieldset class="input">
        <legend>Legend</legend>
        <label>
            <input type="radio" />
            Radio
        </label>
        <label>
            <input type="radio" />
            Radio
        </label>
    </fieldset>
    <div class="input">
        <label>Label</label>
        <textarea placeholder="Textarea"></textarea>
    </div>
    <div class="submit">
        <input class="btn" type="submit" value="Submit" />
        <button class="btn">Button</button>
        <a href="#" class="btn">Link</a>
        <button href="#" class="btn btn-link">Link</button>
    </div>
</div>

Input append

An input with some element in the same row

Example

$ Search 
<div class="form form-horizontal">
    <div class="input">
        <label>Label</label>
        <div class="input-append">
            <a href="#" class="add-on label">$</a>
            <input type="text" placeholder="Placeholder" />
            <a href="#" class="add-on btn btn-primary">Search</a>
        </div>
    </div>
</div>