Standalone

How to use coolForm standalone. No need to use Bootstrap with this option, as it includes Bootstrap's essential code to style forms.

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
Please note that coolForm standalone does not bring special features from Bootstrap such as input groups, static controls or options like control sizing and button sizing. If you need them, coolForm with Bootstrap is what you need.

Quick use

<head>
    ...
    <link href="assets/css/coolform.min.css" rel="stylesheet" type="text/css">
    ...
</head>
<body>
    ...
    <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>

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>

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>

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>

Form controls and buttons

Just a replica of Bootstrap's elements, reduced to a minimum. Default styling and standard sizes.

<div class="form-group">
    <label for="inputText">Name</label>
    <input type="text" class="form-control" id="inputText" placeholder="Jane Doe">
</div>
<div class="form-group">
    <label for="inputEmail">Email address</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Enter email">
</div>
<div class="form-group">
    <label for="inputPassword">Password</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-default">Submit</button>