With Bootstrap 3

How to use coolForm as an extension for the most popular front-end framework. Make the most of coolForm combining it with Bootstrap 3.

Download

coolForm (currently v2.2) can be downloaded both in compiled CSS and in source Less files.

coolForm dist/ (CSS & JS)

Compiled and minified CSS, as well as a lightweight and dependency-free JavaScript plugin required for the coolFile behaviour. Ideal for a quick use with Bootstrap's default styling.

Download coolForm

Source code src/ (Less & JS)

Source Less and JavaScript files. Ideal to customize styling to your needs. Requires a Less compiler. If you are not a big fan of the command line, I recommend the text editor Brackets with the LESS AutoCompile extension.

Download source
coolForm v2 is compatible with Bootstrap 3. Get Bootstrap.

Quick use

<head>
    ...
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/coolform-bootstrap.min.css" rel="stylesheet" type="text/css">
    ...
</head>
<body>
    ...
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/coolfile.min.js"></script>
</body>

coolRadio

Default (stacked)

<div class="radio cool-radio">
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    <label for="optionsRadios1">Lorem ipsum dolor</label>
</div>
<div class="radio cool-radio">
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    <label for="optionsRadios2">Vivamus sit amet</label>
</div>
<div class="radio cool-radio">
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    <label for="optionsRadios3">Donec suscipit</label>
</div>

Inline radios

<div class="radio-inline cool-radio">
    <input type="radio" name="inlineRadio" id="inlineRadio1" value="option1" checked>
    <label for="inlineRadio1">1</label>
</div>
<div class="radio-inline cool-radio">
    <input type="radio" name="inlineRadio" id="inlineRadio2" value="option2">
    <label for="inlineRadio2">2</label>
</div>
<div class="radio-inline cool-radio">
    <input type="radio" name="inlineRadio" id="inlineRadio3" value="option3" disabled>
    <label for="inlineRadio3">3</label>
</div>

Without label text

<div class="radio cool-radio">
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
    <label for="blankRadio1">&nbsp;</label>
</div>

Radio addons

 
<div class="input-group input-group-lg">
    <span class="input-group-addon">
        <div class="radio cool-radio">
            <input type="radio" name="radioAddonLarge" id="radioAddon1" value="">
            <label for="radioAddon1">&nbsp;</label>
        </div>
    </span>
    <input type="text" class="form-control" placeholder="Large">
</div>
<div class="input-group">
    <span class="input-group-addon">
        <div class="radio cool-radio">
            <input type="radio" name="radioAddon" id="radioAddon2" value="">
            <label for="radioAddon2">&nbsp;</label>
        </div>
    </span>
    <input type="text" class="form-control" placeholder="Normal">
</div>
<div class="input-group input-group-sm">
    <span class="input-group-addon">
        <div class="radio cool-radio">
            <input type="radio" name="radioAddonSmall" id="radioAddon3" value="">
            <label for="radioAddon3">&nbsp;</label>
        </div>
    </span>
    <input type="text" class="form-control" placeholder="Small">
</div>

Validation states

 
<div class="has-success">
    <div class="radio cool-radio">
        <input type="radio" name="validationRadios" id="radioSuccess" value="option1">
        <label for="radioSuccess">Radio with success</label>
    </div>
</div>
<div class="has-warning">
    <div class="radio cool-radio">
        <input type="radio" name="validationRadios" id="radioWarning" value="option2">
        <label for="radioWarning">Radio with warning</label>
    </div>
</div>
<div class="has-error">
    <div class="radio cool-radio">
        <input type="radio" name="validationRadios" id="radioError" value="option3">
        <label for="radioError">Radio with error</label>
    </div>
</div>
<div class="form-group has-success">
    <div class="input-group">
        <span class="input-group-addon">
            <div class="radio cool-radio">
                <input type="radio" name="radioAddonSuccess" id="radioAddonSuccess1" value="">
                <label for="radioAddonSuccess1">&nbsp;</label>
            </div>
        </span>
        <input type="text" class="form-control" placeholder="Input group with success">
    </div>  
</div>

coolCheckbox

Default (stacked)

<div class="checkbox cool-checkbox">
    <input type="checkbox" id="inputCheckbox1" value="" checked>
    <label for="inputCheckbox1">Lorem ipsum dolor</label>
</div>
<div class="checkbox cool-checkbox">
    <input type="checkbox" id="inputCheckbox2" value="">
    <label for="inputCheckbox2">Vivamus sit amet</label>
</div>
<div class="checkbox cool-checkbox">
    <input type="checkbox" id="inputCheckbox3" value="" disabled>
    <label for="inputCheckbox3">Donec suscipit</label>
</div>

Inline checkboxes

<div class="checkbox-inline cool-checkbox">
    <input type="checkbox" id="inlineCheckbox1" value="option1" checked>
    <label for="inlineCheckbox1">1</label>
</div>
<div class="checkbox-inline cool-checkbox">
    <input type="checkbox" id="inlineCheckbox2" value="option2">
    <label for="inlineCheckbox2">2</label>
</div>
<div class="checkbox-inline cool-checkbox">
    <input type="checkbox" id="inlineCheckbox3" value="option3" disabled>
    <label for="inlineCheckbox3">3</label>
</div>

Without label text

<div class="checkbox cool-checkbox">
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
    <label for="blankCheckbox">&nbsp;</label>
</div>

Checkbox addons

 
<div class="input-group input-group-lg">
    <span class="input-group-addon">
        <div class="checkbox cool-checkbox">
            <input type="checkbox" id="checkboxAddon1" value="">
            <label for="checkboxAddon1">&nbsp;</label>
        </div>
    </span>
    <input type="text" class="form-control" placeholder="Large">
</div>
<div class="input-group">
    <span class="input-group-addon">
        <div class="checkbox cool-checkbox">
            <input type="checkbox" id="checkboxAddon2" value="">
            <label for="checkboxAddon2">&nbsp;</label>
        </div>
    </span>
    <input type="text" class="form-control" placeholder="Normal">
</div>
<div class="input-group input-group-sm">
    <span class="input-group-addon">
        <div class="checkbox cool-checkbox">
            <input type="checkbox" id="checkboxAddon3" value="">
            <label for="checkboxAddon3">&nbsp;</label>
        </div>
    </span>
    <input type="text" class="form-control" placeholder="Small">
</div>

Validation states

 
<div class="has-success">
    <div class="checkbox cool-checkbox">
        <input type="checkbox" id="checkboxSuccess" value="">
        <label for="checkboxSuccess">Checkbox with success</label>
    </div>
</div>
<div class="has-warning">
    <div class="checkbox cool-checkbox">
        <input type="checkbox" id="checkboxWarning" value="">
        <label for="checkboxWarning">Checkbox with warning</label>
    </div>
</div>
<div class="has-error">
    <div class="checkbox cool-checkbox">
        <input type="checkbox" id="checkboxError" value="">
        <label for="checkboxError">Checkbox with error</label>
    </div>
</div>
<div class="form-group has-success">
    <div class="input-group">
        <span class="input-group-addon">
            <div class="checkbox cool-checkbox">
                <input type="checkbox" id="checkboxSuccess1" value="">
                <label for="checkboxSuccess1">&nbsp;</label>
            </div>
        </span>
        <input type="text" class="form-control" placeholder="Input group with success">
    </div>
</div>

coolSelect

Select

<select class="form-control cool-select">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

Disabled

<select class="form-control cool-select" disabled>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

Multiple

<select multiple class="form-control cool-select">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

Control sizing

<select class="form-control cool-select input-lg">
    <option>1</option>
    <option>2</option>
</select>
<select class="form-control cool-select">
    <option>1</option>
    <option>2</option>
</select>
<select class="form-control cool-select input-sm">
    <option>1</option>
    <option>2</option>
</select>

Input groups

cool
cool
http:// .13ugman.com 
<div class="input-group">
    <span class="input-group-addon" id="basic-addon1">cool</span>
    <select class="form-control cool-select">
        <option>Form</option>
        <option selected>Select</option>
    </select>
</div>
<div class="input-group">
    <select class="form-control cool-select">
        <option>Pretty</option>
        <option selected>Really</option>
    </select>
    <span class="input-group-addon" id="basic-addon2">cool</span>
</div>
<div class="input-group">
    <span class="input-group-addon">http://</span>
    <select class="form-control cool-select">
        <option>coolform</option>
        <option>www</option>
    </select>
    <span class="input-group-addon">.13ugman.com</span>
</div>
<div class="input-group input-group-lg">
    <span class="input-group-addon">
        <div class="checkbox cool-checkbox">
            <input type="checkbox" id="checkboxSelect1" value="">
            <label for="checkboxSelect1">&nbsp;</label>
        </div>
    </span>
    <select class="form-control cool-select">
        <option>1</option>
        <option>2</option>
    </select>
</div>
<div class="input-group">
    <span class="input-group-addon">
        <div class="checkbox cool-checkbox">
            <input type="checkbox" id="checkboxSelect2" value="">
            <label for="checkboxSelect2">&nbsp;</label>
        </div>
    </span>
    <select class="form-control cool-select">
        <option>1</option>
        <option>2</option>
    </select>
</div>
<div class="input-group input-group-sm">
    <span class="input-group-addon">
        <div class="checkbox cool-checkbox">
            <input type="checkbox" id="checkboxSelect3" value="">
            <label for="checkboxSelect3">&nbsp;</label>
        </div>
    </span>
    <select class="form-control cool-select">
        <option>1</option>
        <option>2</option>
    </select>
</div>

Validation states

cool 
<div class="form-group has-success">
    <label for="selectSuccess" class="control-label">Select with success</label>
    <select class="form-control cool-select" id="selectSuccess">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>
<div class="form-group has-warning">
    <label for="selectWarning" class="control-label">Select with warning</label>
    <select class="form-control cool-select" id="selectWarning">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>
<div class="form-group has-error">
    <label for="selectError" class="control-label">Select with error</label>
    <select class="form-control cool-select" id="selectError">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>
<div class="form-group has-success">
    <label class="control-label">Input group with success</label>
    <div class="input-group">
        <span class="input-group-addon" id="basic-addon3">cool</span>
        <select class="form-control cool-select">
            <option>Form</option>
            <option selected>Select</option>
        </select>
    </div> 
</div>

coolFile

File input

<label>
    <span class="cool-file cool-file-default">
        <input type="file" id="InputFile1">
        <a class="btn" tabindex="-1">Choose file</a>
        <span class="attached"></span>
    </span>
</label>

Multiple

<label>
    <span class="cool-file cool-file-default">
        <input type="file" id="InputFileMultiple" multiple>
        <a class="btn" tabindex="-1">Choose files</a>
        <span class="attached"></span>
    </span>
</label>

With custom waiting message

<label>
    <span class="cool-file cool-file-default">
        <input type="file" id="InputFileCustom">
        <a class="btn" tabindex="-1">Choose file</a>
        <span class="attached" data-waiting-message="Nothing attached yet!"></span>
    </span>
</label>

Disabled

<label>
    <span class="cool-file cool-file-default disabled">
        <input type="file" id="InputFileDisabled" disabled>
        <a class="btn" tabindex="-1">Choose file</a>
        <span class="attached"></span>
    </span>
</label>

Colors

<label>Primary
    <span class="cool-file cool-file-primary">
        <input type="file" id="InputFilePrimary">
        <a class="btn" tabindex="-1">Choose file</a>
        <span class="attached"></span>
    </span>
</label>
<label>Success
    <span class="cool-file cool-file-success">
        <input type="file" id="InputFileSuccess">
        <a class="btn" tabindex="-1">Choose file</a>
        <span class="attached"></span>
    </span>
</label>
<label>Info
    <span class="cool-file cool-file-info">
        <input type="file" id="InputFileInfo">
        <a class="btn" tabindex="-1">Choose file</a>
        <span class="attached"></span>
    </span>
</label>
<label>Warning
    <span class="cool-file cool-file-warning">
        <input type="file" id="InputFileWarning">
        <a class="btn" tabindex="-1">Choose file</a>
        <span class="attached"></span>
    </span>
</label>
<label>Danger
    <span class="cool-file cool-file-danger">
        <input type="file" id="InputFileDanger">
        <a class="btn" tabindex="-1">Choose file</a>
        <span class="attached"></span>
    </span>
</label>

Sizing

<div class="form-group">
    <label>Large
        <span class="cool-file cool-file-default">
            <input type="file" id="InputFileLarge">
            <a class="btn btn-lg" tabindex="-1">Choose file</a>
            <span class="attached"></span>
        </span>
    </label>
</div>
<div class="form-group">
    <label>Small
        <span class="cool-file cool-file-default">
            <input type="file" id="InputFileSmall">
            <a class="btn btn-sm" tabindex="-1">Choose file</a>
            <span class="attached"></span>
        </span>
    </label>
</div>
<div class="form-group">
    <label>Extra small
        <span class="cool-file cool-file-default">
            <input type="file" id="InputFileExtraSmall">
            <a class="btn btn-xs" tabindex="-1">Choose file</a>
            <span class="attached"></span>
        </span>
    </label>
</div>

Validation states

<div class="form-group has-success">
    <label class="control-label">File input with success
        <span class="cool-file cool-file-default">
            <input type="file" id="InputFileSuccess">
            <a class="btn" tabindex="-1">Choose file</a>
            <span class="attached"></span>
        </span>
    </label>
</div>
<div class="form-group has-warning">
    <label class="control-label">File input with warning
        <span class="cool-file cool-file-default">
            <input type="file" id="InputFileWarning">
            <a class="btn" tabindex="-1">Choose file</a>
            <span class="attached"></span>
        </span>
    </label>
</div>
<div class="form-group has-error">
    <label class="control-label">File input with error
        <span class="cool-file cool-file-default">
            <input type="file" id="InputFileError">
            <a class="btn" tabindex="-1">Choose file</a>
            <span class="attached"></span>
        </span>
    </label>
</div>

Form controls, buttons and much more

Since coolForm consist of coolRadio, coolCheckbox, coolSelect and coolFile, we're done! For further awesome front-end stuff, Bootstrap 3 offers a wide range of very well documented solutions.