4. Forms

4.1 — Datetimepicker

Bootstrap Datetimepicker created by Jonathan Peterson.

JavaScript Required

Please note that `moment.js` (must be loaded before `bootstrap.js`) and `bootstrap-datetimepicker.js` are required.

Example

<div class="form-group">
    <label>Pick date and time</label>
    <div class="input-group date" data-onload-datetimepicker>
        <input type="text" class="form-control" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
        </span>
    </div>
</div>
<div class="form-group">
    <label>Pick a date</label>
    <div class="input-group date" data-onload-datetimepicker='{"locale": "cs", "format": "D. M. YYYY"}'>
        <input type="text" class="form-control" value="26. 6. 2016" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
        </span>
    </div>
</div>

4.2 — Filter

Align form action button with labels in a filter.

Example

<form class="form-filter">
    <div class="row">
        <div class="col-sm-3">
           <div class="form-group">
                <label>Place of Birth</label>
                <select class="form-control">
                    <option value="">All</option>
                    <option value="Denver">Denver</option>
                    <option value="Liptákov">Liptákov</option>
                    <option value="Moscow">Moscow</option>
                    <option value="Munich">Munich</option>
                    <option value="Prague">Prague</option>
                    <option value="Viena">Vienna</option>
                </select>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="form-group">
                <label>Cash under</label>
                <input type="text" class="form-control" />
            </div>
        </div>
        <div class="col-sm-3">
            <div class="form-group">
                <label>Cash over</label>
                <input type="text" class="form-control" />
            </div>
        </div>
        <div class="col-sm-3">
            <div class="form-actions">
                <button type="reset" class="btn btn-default">Reset Filter</button>
            </div>
        </div>
    </div><!-- .row -->
</form>

4.3 — Forms

4.3.1 — Required Fields

Adds and asterisk to all required field labels. Requires .required class on labels.

Example

<label for="name" class="required">Name</label>
<input type="text" class="form-control" id="name" name="name" required />

4.3.2 — Form Actions

Static form action designed for cancel link to return from edit form back to listing.

Example

or Cancel 
<button type="submit" class="btn btn-primary btn-raised">Save and publish</button>
<div class="form-action-static">
    or
    <a href="#">Cancel</a>
</div>

4.4 — Input Group

Always keep button above the input to prevent input border from disappearing.

Example

<div class="input-group">
    <input type="search" placeholder="Hledat" class="form-control" title="Zadejte hledaný termín" />
    <span class="input-group-btn">
        <button type="submit" class="btn btn-primary btn-raised">Hledat</button>
    </span>
</div>

4.5 — Listbox

Implements select2 by Igor Vaynberg and Select2 Bootstrap CSS by Tom Terrace.

JavaScript Required

Please note that `select2.js` is required.

4.5.1 — Single Option

Example

<select class="form-control" data-onload-select2>
    <option selected value="All">All</option>
    <option value="Denver">Denver</option>
    <option value="Liptákov">Liptákov</option>
    <option value="Moscow">Moscow</option>
    <option value="Munich">Munich</option>
    <option value="Prague">Prague</option>
    <option value="Viena">Vienna</option>
</select>

4.5.2 — Single Option with Images

Images can be added to options.

Example

<select class="form-control" data-onload-select2='{"minimumResultsForSearch": "Infinity"}'>
    <option>No image</option>
    <option
        selected
        data-image-src="//satyr.io/32x16?flag=cze"
        data-image-srcset="//satyr.io/32x16?flag=cze, //satyr.io/64x32?flag=cze 2x"
        data-image-width="32"
        data-image-height="16"
    >Czech</option>
    <option
        data-image-src="//satyr.io/32x16?flag=can"
        data-image-srcset="//satyr.io/32x16?flag=can, //satyr.io/64x32?flag=can 2x"
        data-image-width="32"
        data-image-height="16"
    >Canadian</option>
    <option
        data-image-src="//satyr.io/32x16?flag=che"
        data-image-srcset="//satyr.io/32x16?flag=che, //satyr.io/64x32?flag=che 2x"
        data-image-width="32"
        data-image-height="16"
    >Swiss</option>
    <option
        data-image-src="//satyr.io/60x60?flag=che"
        data-image-srcset="//satyr.io/60x60?flag=che, //satyr.io/120x120?flag=che 2x"
        data-image-width="60"
        data-image-height="60"
    >Swiss bigger</option>
</select>

4.5.3 — Multiple Options

Example

<select class="form-control" data-onload-select2 multiple>
    <option selected value="Denver">Denver</option>
    <option selected value="Liptákov">Liptákov</option>
    <option value="Moscow">Moscow</option>
    <option value="Munich">Munich</option>
    <option selected value="Prague">Prague</option>
    <option value="Viena">Vienna</option>
</select>

4.5.4 — Multiple Options with Images

Example

<select class="form-control" multiple data-onload-select2='{"minimumResultsForSearch": "Infinity"}'>
    <option
        selected
        data-image-src="//satyr.io/40x40/forestgreen"
        data-image-width="40"
        data-image-height="40"
    >Forest green</option>
    <option
        selected
        data-image-src="//satyr.io/40x40/crimson"
        data-image-width="40"
        data-image-height="40"
    >Crimson</option>
    <option
        data-image-src="//satyr.io/40x40/steelblue"
        data-image-width="40"
        data-image-height="40"
    >Steel blue</option>
</select>