Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Form controls

Example


<form>
    <div class="form-group">
        <label for="exampleFormControlInput1">Email address</label>
        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
    </div>
    <div class="form-group">
        <label for="exampleFormControlSelect1">Example select</label>
        <select class="form-control" id="exampleFormControlSelect1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div class="form-group">
        <label for="exampleFormControlSelect2">Example multiple select</label>
        <select multiple class="form-control" id="exampleFormControlSelect2">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div class="form-group">
        <label for="exampleFormControlTextarea1">Example textarea</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>
</form>

Sizing

Set heights using classes like .form-control-xl, .form-control-lg and .form-control-sm.

Example


<form class="form-default">
    <input class="form-control form-control-xl mb-4" type="text" placeholder=".form-control-xl">
    <input class="form-control form-control-lg mb-4" type="text" placeholder=".form-control-lg">
    <input class="form-control mb-4" type="text" placeholder="Default input">
    <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
</form>

Components

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Inputs

Example


<form class="form-default">
    <div class="form-group">
        <label>Simple input</label>
        <input type="email" class="form-control form-control-lg">
    </div>
    <div class="form-group">
        <label>Simple input with placeholder</label>
        <input type="email" class="form-control form-control-lg" placeholder="This is a placeholder">
    </div>
</form>

Input groups

Example


<form class="form-default">
    <div class="form-group">
        <label class="control-label">Right aligned icon: Default</label>
        <div class="input-group">
            <input type="text" class="form-control form-control-lg">
            <span class="input-group-addon">
                <i class="ion-card"></i>
            </span>
        </div>

        <div class="form-group">
            <label class="control-label">Left aligned icon: Default</label>
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="ion-card"></i>
                </span>
                <input type="text" class="form-control form-control-lg">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label">Right aligned icon: Style 2</label>
            <div class="input-group input-group--style-1">
                <input type="text" class="form-control form-control-lg">
                <span class="input-group-addon">
                    <i class="ion-card"></i>
                </span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label">Left aligned icon: Style 2</label>
            <div class="input-group input-group--style-1">
                <span class="input-group-addon">
                    <i class="ion-card"></i>
                </span>
                <input type="text" class="form-control form-control-lg">
            </div>
        </div>
    </div>
</form>

Input masks

Example


<form class="form-default">
    <div class="form-group">
        <label>Date</label>
        <input type="text" class="form-control form-control-lg input-mask" data-mask="00/00/0000" placeholder="MM/DD/YYY">
    </div>
    <div class="form-group">
        <label>Time</label>
        <input type="text" class="form-control form-control-lg input-mask" data-mask="00:00:00" placeholder="hh:mm:ss">
    </div>
    <div class="form-group">
        <label>Datetime</label>
        <input type="text" class="form-control form-control-lg input-mask" data-mask="00/00/0000 00:00:00" placeholder="MM/DD/YYY hh:mm:ss">
    </div>
    <div class="form-group">
        <label>Phone number</label>
        <input type="text" class="form-control form-control-lg input-mask" data-mask="0000 000 000" placeholder="0720 444 555">
    </div>
    <div class="form-group">
        <label>Phone number with prefix</label>
        <input type="text" class="form-control form-control-lg input-mask" data-mask="(00) 0000 0000" placeholder="(99) 5555 6666">
    </div>
    <div class="form-group">
        <label>US phone number</label>
        <input type="text" class="form-control form-control-lg input-mask" data-mask="(000) 000-0000" placeholder="(99) 5555 6666">
    </div>
    <div class="form-group">
        <label>Card number</label>
        <input type="text" class="form-control form-control-lg input-mask" data-mask="0000 0000 0000 0000" placeholder="">
    </div>
    <div class="form-group">
        <label>IP address</label>
        <input type="text" class="form-control form-control-lg input-mask" data-mask="000.000.000.0000" placeholder="">
    </div>
</form>

Textareas

Example


<form class="form-default">
    <div class="form-group">
        <label>Fixed textarea</label>
        <textarea class="form-control form-control-lg" placeholder="This is a fixed height textarea" rows="5" resize="none"></textarea>
    </div>
    <div class="form-group">
        <label>Resizable textarea</label>
        <textarea class="form-control form-control-lg" placeholder="You can manually resize this textarea" rows="5"></textarea>
    </div>
    <div class="form-group">
        <label>Autosize textarea</label>
        <textarea class="form-control form-control-lg textarea-autogrow" placeholder="This textarea will autosize while you type" rows="1"></textarea>
    </div>
</form>

Select

You have available two select options: default (HTML) and advanced (jQuery) which work with the Select2 plugin.

Example


<form class="form-default">
    <div class="form-group">
        <label>Default select</label>
        <select class="form-control">
            <option selected>Open this select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </div>

    <div class="form-group">
        <label>Default select with multiple options</label>
        <select class="form-control" multiple>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
        </select>
    </div>
</form>
Turn any select in a custom control with advanced functionalities like live search, multiple checking by adding the .selectpicker modifier class.

Example


<form class="form-default">
    <!-- Default select and default select with placeholder -->
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label>Default select</label>
                <select class="form-control selectpicker" data-minimum-results-for-search="Infinity">
                    <option>Open this select menu</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>Select with placeholder</label>
                <select class="form-control selectpicker" data-placeholder="This is a placeholder">
                    <option></option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
            </div>
        </div>
    </div>

    <!-- Disabled select and Disabled dropdown results -->
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label>Disabled select</label>
                <select class="form-control selectpicker" data-minimum-results-for-search="Infinity" data-placeholder="Open this select menu" disabled>
                    <option></option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>Disabled dropdown results</label>
                <select class="form-control selectpicker" data-minimum-results-for-search="Infinity" data-placeholder="Open this select menu">
                    <option></option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3" disabled>Three</option>
                    <option value="4">Four</option>
                    <option value="5" disabled>Five</option>
                    <option value="6" disabled>Six</option>
                </select>
            </div>
        </div>
    </div>

    <!-- Live search and Multiple options -->
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label>Live search</label>
                <select class="form-control selectpicker" data-placeholder="Search for options">
                    <option></option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>Disabled dropdown results</label>
                <select class="form-control selectpicker" data-minimum-results-for-search="Infinity" data-placeholder="Open this select menu" multiple>
                    <option></option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                    <option value="4">Four</option>
                    <option value="5">Five</option>
                    <option value="6">Six</option>
                </select>
            </div>
        </div>
    </div>
</form>

Checkboxes

Use the Bootstrap's grid system in order to create columns with checkbox options

Example


<form class="form-default mt-5">
    <div class="row">
        <div class="col-md-6">
            <div class="checkbox">
                <input type="checkbox" name="checkbox_example_1" id="checkboxExample_1a" checked="checked">
                <label for="checkboxExample_1a">Checkbox option 1</label>
            </div>

            <div class="checkbox">
                <input type="checkbox" name="checkbox_example_1" id="checkboxExample_1b" checked="checked">
                <label for="checkboxExample_1b">Checkbox option 2</label>
            </div>

            <div class="checkbox">
                <input type="checkbox" name="checkbox_example_1" id="checkboxExample_1c">
                <label for="checkboxExample_1c">Checkbox option 2</label>
            </div>

            <div class="checkbox">
                <input type="checkbox" name="checkbox_example_1" id="checkboxExample_1d">
                <label for="checkboxExample_1d">Checkbox option 2</label>
            </div>

            <div class="checkbox">
                <input type="checkbox" name="checkbox_example_1" id="checkboxExample_1e" disabled>
                <label for="checkboxExample_1e">Disabled checkbox</label>
            </div>
        </div>

        <div class="col-md-6">
            <div class="checkbox checkbox-primary">
                <input type="checkbox" name="checkbox_example_1" id="checkboxExample_1f" checked="checked">
                <label for="checkboxExample_1f">Primary checkbox</label>
            </div>

            <div class="checkbox checkbox-success">
                <input type="checkbox" name="checkbox_example_1" id="checkboxExample_1g" checked="checked">
                <label for="checkboxExample_1g">Success checkbox</label>
            </div>

            <div class="checkbox checkbox-warning">
                <input type="checkbox" name="checkbox_example_1" id="checkboxExample_1h" checked="checked">
                <label for="checkboxExample_1h">Warning checkbox</label>
            </div>

            <div class="checkbox checkbox-danger">
                <input type="checkbox" name="checkbox_example_1" id="checkboxExample_1i" checked="checked">
                <label for="checkboxExample_1i">Danger checkbox</label>
            </div>
        </div>
    </div>
</form>
Use the .checkbox-inline modifier class in order to align the needed checkboxes horizontaly

Example


<form class="form-default">
    <div class="checkbox checkbox-inline">
        <input type="checkbox" name="checkbox_example_2" id="checkboxExample_2a" checked="checked">
        <label for="checkboxExample_2a">Checkbox option 1</label>
    </div>

    <div class="checkbox checkbox-inline">
        <input type="checkbox" name="checkbox_example_2" id="checkboxExample_2b">
        <label for="checkboxExample_2b">Checkbox option 2</label>
    </div>

    <div class="checkbox checkbox-inline">
        <input type="checkbox" name="checkbox_example_2" id="checkboxExample_2c" checked="checked">
        <label for="checkboxExample_2c">Checkbox option 2</label>
    </div>
</form>

Bootstrap’s .button styles can be applied to other elements, such as <label>, to provide checkbox or radio style button toggling. Add data-toggle="buttons" to a .btn-group containing those modified buttons to enable toggling in their respective styles.

Example


<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-base-1 active">
        <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
    </label>
    <label class="btn btn-base-1">
        <input type="checkbox" autocomplete="off"> Checkbox 2
    </label>
    <label class="btn btn-base-1">
        <input type="checkbox" autocomplete="off"> Checkbox 3
    </label>
</div>

These custom and stylish checkboxes will help you create a much better user experience with purpose oriented buttons for colors, numbers and much more.

Example


<label>Rounded checkbox</label>
<ul class="list-inline checkbox-color mb-0">
    <li>
        <input type="checkbox" id="color-1a" name="color" checked="">
        <label style="background: #38393d;" for="color-1a" data-toggle="tooltip" data-original-title="Black"></label>
    </li>
    <li>
        <input type="checkbox" id="color-1b" name="color">
        <label style="background: #eabfb9;" for="color-1b" data-toggle="tooltip" data-original-title="Rose"></label>
    </li>
    <li>
        <input type="checkbox" id="color-1c" name="color">
        <label style="background: #dcc4ac;" for="color-1c" data-toggle="tooltip" data-original-title="Gold"></label>
    </li>
    <li>
        <input type="checkbox" id="color-1d" name="color">
        <label style="background: #2189db;" for="color-1d" data-toggle="tooltip" data-original-title="Blue"></label>
    </li>
    <li>
        <input type="checkbox" id="color-1e" name="color">
        <label style="background: #ac92d9;" for="color-1e" data-toggle="tooltip" data-original-title="Purple"></label>
    </li>
    <li>
        <input type="checkbox" id="color-1f" name="color">
        <label style="background: #ef574a;" for="color-1f" data-toggle="tooltip" data-original-title="Red"></label>
    </li>
</ul>

<label>Circle checkbox</label>
<ul class="list-inline checkbox-color checkbox-color-circle mb-0">
    <li>
        <input type="checkbox" id="color-2a" name="color" checked="">
        <label style="background: #38393d;" for="color-2a" data-toggle="tooltip" data-original-title="Black"></label>
    </li>
    <li>
        <input type="checkbox" id="color-2b" name="color">
        <label style="background: #eabfb9;" for="color-2b" data-toggle="tooltip" data-original-title="Rose"></label>
    </li>
    <li>
        <input type="checkbox" id="color-2c" name="color">
        <label style="background: #dcc4ac;" for="color-2c" data-toggle="tooltip" data-original-title="Gold"></label>
    </li>
    <li>
        <input type="checkbox" id="color-2d" name="color">
        <label style="background: #2189db;" for="color-2e" data-toggle="tooltip" data-original-title="Blue"></label>
    </li>
    <li>
        <input type="checkbox" id="color-2f" name="color">
        <label style="background: #ac92d9;" for="color-2f" data-toggle="tooltip" data-original-title="Purple"></label>
    </li>
    <li>
        <input type="checkbox" id="color-2g" name="color">
        <label style="background: #ef574a;" for="color-2g" data-toggle="tooltip" data-original-title="Red"></label>
    </li>
</ul>

These custom and stylish checkboxes will help you create a much better user experience with purpose oriented buttons for colors, numbers and much more.

Example


<label>Rounded number checkbox</label>
<ul class="list-inline checkbox-alphanumeric">
    <li>
        <input type="checkbox" id="checkbox_numeric_1" name="checkbox_numeric">
        <label for="checkbox_numeric_1">36</label>
    </li>
    <li>
        <input type="checkbox" id="checkbox_numeric_2" name="checkbox_numeric">
        <label for="checkbox_numeric_2">37</label>
    </li>
    <li>
        <input type="checkbox" id="checkbox_numeric_3" name="checkbox_numeric" checked="">
        <label for="checkbox_numeric_3">38</label>
    </li>
    <li>
        <input type="checkbox" id="checkbox_numeric_4" name="checkbox_numeric">
        <label for="checkbox_numeric_4">40</label>
    </li>
</ul>

<label>Rounded number checkbox</label>
<ul class="list-inline checkbox-alphanumeric checkbox-alphanumeric-circle">
    <li>
        <input type="checkbox" id="checkbox_numeric_1b" name="checkbox_numeric_b">
        <label for="checkbox_numeric_1b">36</label>
    </li>
    <li>
        <input type="checkbox" id="checkbox_numeric_2b" name="checkbox_numeric_b">
        <label for="checkbox_numeric_2b">37</label>
    </li>
    <li>
        <input type="checkbox" id="checkbox_numeric_3b" name="checkbox_numeric_b" checked="">
        <label for="checkbox_numeric_3b">38</label>
    </li>
    <li>
        <input type="checkbox" id="checkbox_numeric_4b" name="checkbox_numeric_b">
        <label for="checkbox_numeric_4b">40</label>
    </li>
</ul>

Radios

Use the Bootstrap's grid system in order to create columns with checkbox options

Example


<form class="form-default">
    <div class="row">
        <div class="col-md-6">
            <div class="radio">
                <input type="radio" name="radio_example_1" id="radioExample_1a">
                <label for="radioExample_1a">Checkbox option 1</label>
            </div>

            <div class="radio">
                <input type="radio" name="radio_example_1" id="radioExample_1b" checked="checked">
                <label for="radioExample_1b">Checkbox option 2</label>
            </div>

            <div class="radio">
                <input type="radio" name="radio_example_1" id="radioExample_1c">
                <label for="radioExample_1c">Checkbox option 2</label>
            </div>

            <div class="radio">
                <input type="radio" name="radio_example_1" id="radioExample_1d">
                <label for="radioExample_1d">Checkbox option 2</label>
            </div>

            <div class="radio">
                <input type="radio" name="radio_example_1" id="radioExample_1e" disabled>
                <label for="radioExample_1e">Disabled checkbox</label>
            </div>
        </div>

        <div class="col-md-6">
            <div class="radio radio-primary">
                <input type="radio" name="radio_example_2" id="radioExample_1f">
                <label for="radioExample_1f">Primary radio</label>
            </div>

            <div class="radio radio-success">
                <input type="radio" name="radio_example_2" id="radioExample_1g" checked="checked">
                <label for="radioExample_1g">Success radio</label>
            </div>

            <div class="radio radio-warning">
                <input type="radio" name="radio_example_2" id="radioExample_1h">
                <label for="radioExample_1h">Warning radio</label>
            </div>

            <div class="radio radio-danger">
                <input type="radio" name="radio_example_2" id="radioExample_1i">
                <label for="radioExample_1i">Danger radio</label>
            </div>
        </div>
    </div>
</form>
Use the .radio-inline modifier class in order to align the needed radio buttons horizontaly

Example


<form class="form-default">
    <div class="radio radio-inline">
        <input type="radio" name="radio_example_2" id="radioExample_2a">
        <label for="radioExample_2a">Checkbox option 1</label>
    </div>

    <div class="radio radio-inline">
        <input type="radio" name="radio_example_2" id="radioExample_2b">
        <label for="radioExample_2b">Checkbox option 2</label>
    </div>

    <div class="radio radio-inline">
        <input type="radio" name="radio_example_2" id="radioExample_2c" checked="checked">
        <label for="radioExample_2c">Checkbox option 2</label>
    </div>
</form>

Bootstrap’s .button styles can be applied to other elements, such as <label>, to provide checkbox or radio style button toggling. Add data-toggle="buttons" to a .btn-group containing those modified buttons to enable toggling in their respective styles.

Example


<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-base-1 active">
        <input type="radio" checked autocomplete="off"> Radio 1 (pre-checked)
    </label>
    <label class="btn btn-base-1">
        <input type="radio" autocomplete="off"> Radio 2
    </label>
    <label class="btn btn-base-1">
        <input type="radio" autocomplete="off"> Radio 3
    </label>
</div>

These custom and stylish radio button will help you create a much better user experience with purpose oriented buttons for colors, numbers and much more.

Example


<label>Rounded radios</label>
<ul class="list-inline checkbox-color mb-0">
    <li>
        <input type="radio" id="radio-color-1a" name="radio-color" checked="">
        <label style="background: #38393d;" for="radio-color-1a" data-toggle="tooltip" data-original-title="Black"></label>
    </li>
    <li>
        <input type="radio" id="radio-color-1b" name="radio-color">
        <label style="background: #eabfb9;" for="radio-color-1b" data-toggle="tooltip" data-original-title="Rose"></label>
    </li>
    <li>
        <input type="radio" id="radio-color-1c" name="radio-color">
        <label style="background: #dcc4ac;" for="radio-color-1c" data-toggle="tooltip" data-original-title="Gold"></label>
    </li>
    <li>
        <input type="radio" id="radio-color-1d" name="radio-color">
        <label style="background: #2189db;" for="radio-color-1d" data-toggle="tooltip" data-original-title="Blue"></label>
    </li>
    <li>
        <input type="radio" id="radio-color-1e" name="radio-color">
        <label style="background: #ac92d9;" for="radio-color-1e" data-toggle="tooltip" data-original-title="Purple"></label>
    </li>
    <li>
        <input type="radio" id="radio-color-1f" name="radio-color">
        <label style="background: #ef574a;" for="radio-color-1f" data-toggle="tooltip" data-original-title="Red"></label>
    </li>
</ul>

<span class="space-xs-sm"></span>

<label>Circle radios</label>
<ul class="list-inline checkbox-color checkbox-color-circle mb-0">
    <li>
        <input type="radio" id="radio-color-2a" name="radio-color-1" checked="">
        <label style="background: #38393d;" for="radio-color-2a" data-toggle="tooltip" data-original-title="Black"></label>
    </li>
    <li>
        <input type="radio" id="radio-color-2b" name="radio-color-1">
        <label style="background: #eabfb9;" for="radio-color-2b" data-toggle="tooltip" data-original-title="Rose"></label>
    </li>
    <li>
        <input type="radio" id="radio-color-2c" name="radio-color-1">
        <label style="background: #dcc4ac;" for="radio-color-2c" data-toggle="tooltip" data-original-title="Gold"></label>
    </li>
    <li>
        <input type="radio" id="radio-color-2d" name="radio-color-1">
        <label style="background: #2189db;" for="radio-color-2d" data-toggle="tooltip" data-original-title="Blue"></label>
    </li>
    <li>
        <input type="radio" id="radio-color-2f" name="radio-color-1">
        <label style="background: #ac92d9;" for="radio-color-2f" data-toggle="tooltip" data-original-title="Purple"></label>
    </li>
    <li>
        <input type="radio" id="radio-color-2g" name="radio-color-1">
        <label style="background: #ef574a;" for="radio-color-2g" data-toggle="tooltip" data-original-title="Red"></label>
    </li>
</ul>

These custom and stylish radio buttons will help you create a much better user experience with purpose oriented buttons for colors, numbers and much more.

Example


<label>Rounded number radio</label>
<ul class="list-inline checkbox-alphanumeric">
    <li>
        <input type="radio" id="radio_numeric_1" name="radio_numeric">
        <label for="radio_numeric_1">36</label>
    </li>
    <li>
        <input type="radio" id="radio_numeric_2" name="radio_numeric">
        <label for="radio_numeric_2">37</label>
    </li>
    <li>
        <input type="radio" id="radio_numeric_3" name="radio_numeric" checked="">
        <label for="radio_numeric_3">38</label>
    </li>
    <li>
        <input type="radio" id="radio_numeric_4" name="radio_numeric">
        <label for="radio_numeric_4">40</label>
    </li>
</ul>

<label>Rounded number radio</label>
<ul class="list-inline checkbox-alphanumeric checkbox-alphanumeric-circle">
    <li>
        <input type="radio" id="radio_numeric_1b" name="radio_numeric_b">
        <label for="radio_numeric_1b">36</label>
    </li>
    <li>
        <input type="radio" id="radio_numeric_2b" name="radio_numeric_b">
        <label for="radio_numeric_2b">37</label>
    </li>
    <li>
        <input type="radio" id="radio_numeric_3b" name="radio_numeric_b" checked="">
        <label for="radio_numeric_3b">38</label>
    </li>
    <li>
        <input type="radio" id="radio_numeric_4b" name="radio_numeric_b">
        <label for="radio_numeric_4b">40</label>
    </li>
</ul>

Datepicker

Turn any input into a datepicker using .datepicker. You can use some of its options via data-*attributes.

The following settings are optional. For the default datepicker you can not use any of there.
Option Type Default
data-datepicker-enable-time Boolean
Default: false

Enables time picker.
data-datepicker-no-calendar Boolean
Default: false

Hides the day selection in calendar. Use it along with enableTime to create a time picker.
data-datepicker-mode String
Default: single

Available values: "single", "multiple", or "range"

Example


<form class="form-default">
    <!-- Date picker -->
    <input type="text" class="form-control form-control-lg datepicker" placeholder="Choose a date">

    <!-- Date and time picker -->
    <input type="text" class="form-control form-control-lg datepicker" data-datepicker-enable-time="true" placeholder="Choose a date and time">

    <!-- Time picker -->
    <input type="text" class="form-control form-control-lg datepicker" data-datepicker-enable-time="true" data-datepicker-no-calendar="true" placeholder="Choose a time">

    <!-- Date range picker -->
    <input type="text" class="form-control form-control-lg datepicker" data-datepicker-mode="range" placeholder="Select a date range">
</form>

Dropzone

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.

Drop files here or click to upload.
(This is just a demo dropzone. Selected files are not actually uploaded.)

Example


<form action="PATH_TO_UPLOAD_FILE" class="dropzone" id="dropzone_demo">
    <div class="dz-message needsclick">
        Drop files here or click to upload.
        <br>
        <span class="note needsclick">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>
    </div>
</form>

File browser

Replace the old and boring file input with four beautiful styles that are very easy to implement. No additional setup is needed. These can be used just like any other file browser.

By default, the custom file inputs are fluid, which means them stretch depending of its container. If you want a fixed width file input use the width modifier classes in order to achive that result. For example, you can use .w-50on the label tag to make the file input's width half of its container.

Example


<!-- Custom file input: Style 1 -->
<input type="file" name="file-1[]" id="file-1" class="custom-input-file" data-multiple-caption="{count} files selected" multiple />
<label for="file-1">
    <i class="fa fa-upload"></i>
    <span>Choose a file…</span>
</label>

<!-- Custom file input: Style 2 -->
<input type="file" name="file-2[]" id="file-2" class="custom-input-file custom-input-file--2" data-multiple-caption="{count} files selected" multiple />
<label for="file-2">
    <i class="fa fa-upload"></i>
    <span>Choose a file…</span>
</label>

<!-- Custom file input: Style 3 -->
<input type="file" name="file-3[]" id="file-3" class="custom-input-file custom-input-file--3" data-multiple-caption="{count} files selected" multiple />
<label for="file-3">
    <i class="fa fa-upload"></i>
    <span>Choose a file…</span>
</label>

<!-- Custom file input: Style 4 -->
<input type="file" name="file-4[]" id="file-4" class="custom-input-file custom-input-file--4" data-multiple-caption="{count} files selected" multiple />
<label for="file-4">
    <span></span>
    <strong>
        <i class="fa fa-upload"></i>
        Choose a file…
    </strong>
</label>

Toggles

Turn any radio or checkbox into a toggle switch with the power of CSS. No javascript or addition setup is required.

Example


<!-- Untoggled switch -->
<label class="toggle-switch">
    <input type="checkbox">
    <span class="toggle-switch-slider round"></span>
</label>

<!-- Toggled switch -->
<label class="toggle-switch">
    <input type="checkbox" checked>
    <span class="toggle-switch-slider round"></span>
</label>

<!-- Disabled toggle switch -->
<label class="toggle-switch">
    <input type="checkbox" disabled>
    <span class="toggle-switch-slider round"></span>
</label>

Sliders

noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible, which is great for mobile use on the many supported devices, including iPhone, iPad, Android devices & Windows (Phone) 8 desktops, tablets and all-in-ones. It works on desktops too, of course!

We made it simple for you. Setup the range slider only by using data-* attributes for changing min and max values and also the default low and high values.

To set the minimum value use data-range-value-min attribute. For the maximum value use data-range-value-max. In order to set a default value for the slider use data-range-value-low.
For the range slider the same data attributes apply here too. In addition, for a range slider to work you will need to set a default high value which can be don with data-range-value-high.

Example


<!-- Single input slider -->
<div class="input-slider-container">
    <div id="input-slider" class="input-slider" data-range-value-min="100" data-range-value-max="500"></div>

    <!-- Input slider values -->
    <div class="row mt-4">
        <div class="col-6">
            <span id="input-slider-value" class="range-slider-value" data-range-value-low="300"></span>
        </div>
    </div>
</div>

<!-- Range input slider -->
<div class="range-slider-wrapper">
    <!-- Range slider container -->
    <div id="input-slider-range" data-range-value-min="100" data-range-value-max="500"></div>

    <!-- Range slider values -->
    <div class="row">
        <div class="col-6">
            <span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low">
        </div>

        <div class="col-6 text-right">
            <span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high">
        </div>
    </div>
</div>

Styles

We want to make forms beautiful and intuitive. That's why we tried to implement multiple styles without bloating the stylesheet. We managed to get some color variations and also alternative styles, such as a reproduction of the well known material style from Google. We still have lots of things to implement and optimize here, but for know we will show you what possibilities do you have.

Colors

Using .form-default on the form tag you get the default styles from Boomerang forms. Without the class you get the standard Bootstrap forms with no modifications.

Here are some example of color schemes that can be used on forms: .form-default, .form-inverse, .form-base-1 and .form-base-2.

Inverse color

Primary color

The primary color can be changed in the _variables.scss file by modifing the $color-base-1 variable.

Secondary color

The secondary color can be changed in the _variables.scss file by modifing the $color-base-2 variable. This is especially for the websites that use a combination of two colors.

Options

Using .form-material next to the form color modifier classes shown above, on the form tag you can apply a material design look on any form.

Default color

Validation

Provide valuable, actionable feedback to your users with HTML5 form validation–available in all our supported browsers. Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.

Custom validation

For custom Bootstrap form validation messages, you’ll need to add an unique id, data-toggle="validation" and the novalidate boolean attribute to your <form>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you.

When attempting to submit, you’ll see the :invalid and :valid styles applied to your form controls.

Using the custom validation provided by Boomerang you don't need to include any additional scripts into your page. All the neccesary code is included within the wpx.app.js located in the js folder.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.

Example


<form class="form-default" id="form_validation" data-toggle="validation" novalidate>
    <div class="row">
        <div class="col-md-6 mb-3">
            <label for="validationCustom01">First name</label>
            <input type="text" class="form-control form-control-lg" id="validationCustom01" placeholder="First name" value="Mark" required>
        </div>

        <div class="col-md-6 mb-3">
            <label for="validationCustom02">Last name</label>
            <input type="text" class="form-control form-control-lg" id="validationCustom02" placeholder="Last name" value="Otto" required>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 mb-3">
            <label for="validationCustom03">City</label>
            <input type="text" class="form-control form-control-lg" id="validationCustom03" placeholder="City" required>
            <div class="invalid-feedback">
                Please provide a valid city.
            </div>
        </div>

        <div class="col-md-3 mb-3">
            <label for="validationCustom04">State</label>
            <input type="text" class="form-control form-control-lg" id="validationCustom04" placeholder="State" required>
            <div class="invalid-feedback">
                Please provide a valid state.
            </div>
        </div>

        <div class="col-md-3 mb-3">
            <label for="validationCustom05">Zip</label>
            <input type="text" class="form-control form-control-lg" id="validationCustom05" placeholder="Zip" required>
            <div class="invalid-feedback">
                Please provide a valid zip.
            </div>
        </div>
    </div>

    <button class="btn btn-base-1" type="submit">Submit form</button>
</form>

Server side

We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with .is-invalid and .is-valid. Note that .invalid-feedback is also supported with these classes.

Using the custom validation provided by Boomerang you don't need to include any additional scripts into your page. All the neccesary code is included within the wpx.app.js located in the js folder.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.

Example


<form>
    <div class="row">
        <div class="col-md-6 mb-3">
            <label for="validationServer01">First name</label>
            <input type="text" class="form-control form-control-lg is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
        </div>
        <div class="col-md-6 mb-3">
            <label for="validationServer02">Last name</label>
            <input type="text" class="form-control form-control-lg is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 mb-3">
            <label for="validationServer03">City</label>
            <input type="text" class="form-control form-control-lg is-invalid" id="validationServer03" placeholder="City" required>
            <div class="invalid-feedback">
                Please provide a valid city.
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <label for="validationServer04">State</label>
            <input type="text" class="form-control form-control-lg is-invalid" id="validationServer04" placeholder="State" required>
            <div class="invalid-feedback">
                Please provide a valid state.
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <label for="validationServer05">Zip</label>
            <input type="text" class="form-control form-control-lg is-invalid" id="validationServer05" placeholder="Zip" required>
            <div class="invalid-feedback">
                Please provide a valid zip.
            </div>
        </div>
    </div>

    <button class="btn btn-primary" type="submit">Submit form</button>
</form>