Form Elements

Checkbox

Example
<label for="checkbox1">Label</label>
<input type="checkbox" id="checkbox1" checked="checked" class="option-input">

<input type="checkbox" id="checkbox2" class="option-input">
<label for="checkbox2">Label</label>

Radio

Example
<label for="radio1">Label</label>
<input type="radio" id="radio1" checked="checked" class="option-input">

<input type="radio" id="radio2" checked="checked" class="option-input">
<label for="radio2">Label</label>

Textbox

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
Example
<input type="text" class="form-control" placeholder="Text input">

Labels

Example
Default Primary Success Info Warning Danger 
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Selects

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

Selects with placeholder

Example
<select class="form-control">
  <option value='' diabled selected hidden>Select your choice</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Multiselect

Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Multiselect css files located under libcommon/style/bootstrap-multiselect.css and js file located under /libcommon/js/bootstrap-multiselect.js.

Example
<!-- Multiselect HTML -->
<select id="sample-multi-select" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>

<!-- Javascript code to initialise multiselect --><script type="text/javascript">
    $(document).ready(function () {
        $('#sample-multi-select').multiselect();
    });
</script>

Multiselect with filter

Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Multiselect css files located under libcommon/style/bootstrap-multiselect.css and js file located under /libcommon/js/bootstrap-multiselect.js.

Example
<!-- Multiselect HTML -->
<select id="sample-multi-select" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>

<!-- Javascript code to initialise multiselect --><script type="text/javascript">
    $(document).ready(function () {
        $('#multi-select-with-filter').multiselect({
            enableFiltering: true,
            includeSelectAllOption: true,
            selectAllJustVisible: false
        });
    });
</script>
For further details of multiselct Click Here

Time picker

Bootstrap-datetimepicker is jQuery plugin, which is used to handle time picker in this case. For error-free working include /libcommon/plugins/bootstrap-datepicker/css/bootstrap-datetimepicker.css and /libcommon/plugins/bootstrap-datepicker/js/bootstrap-datetimepicker.min.js files in your page.

Bootstrap-datetimepicker has dependency with jquery version above 3. Therefore include bootstrap-datetimepicker js as follows. 

<head>
    <link rel="stylesheet" href="libcommon/plugins/bootstrap-datepicker/css/bootstrap-datetimepicker.min.css">
    ....
    <script type="text/javascript" src="libcommon/plugins/jQuery3.2.1/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="libcommon/js/moment.min.js"></script>
    <script type="text/javascript" src="libcommon/plugins/bootstrap-datepicker/js/bootstrap-datetimepicker.js"></script>
    <script>
        $3 = jQuery.noConflict(true);
    </script>
    //Include old jQuery files and its depended plugins after these lines
    <script type='text/javascript' src='libcommon/javascripts/jquery/jquery-1.7.1.min.js'></script>    ....
    </head>

For more details about multiple jQuery versions using in a single project Click Here

Example

Click below time icon to pick time.

<div class="form-group col-md-6">
    <div class='input-group date' id='datetimepicker3'>
        <input type='text' class="form-control"/>
        <span class="input-group-addon">
                <span class="glyphicon glyphicon-time f-unset"></span>
            </span>
    </div>
</div>

<!-- jQuery Initialisation of bootstrap-datetimepicker -->
<script type="text/javascript">
    //Here we use $3 instead of $, because bootstrap-datetimepicker has dependency with above 3 jQuery version
    $3(document).ready(function () {
        $3('#datetimepicker3').datetimepicker({
            format: 'LT'
        });
    });
</script>

Date Picker

Date picker also use bootstrap-datetimepicker. To use datepicker inside your page, include files mentioned above in time picker. (Check if files has been included in header.php to prevent duplicate file loading ).

Example

Click below calendar icon to pick time.

<div class="form-group col-md-6">
    <div class='input-group date' id='datetimepicker1'>
        <input type='text' class="form-control"/>
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar f-unset"></span>
        </span>
    </div>
</div>

<!-- Javascript Date picker initialisation -->
<script type="text/javascript">
    $3(document).ready(function () {
        $3('#datetimepicker1').datetimepicker({
            format: 'L',
        });
    });
</script>

Linked Pickers

Linked picker is another function of bootstrap-datetimepicker to pick two dates. To use datepicker inside your page, include files mentioned above in time picker. (Check if files has been included in header.php to prevent duplicate file loading ).

Example

Click below calendar icon to pick time.

<div class='col-md-5'>
    <div class="form-group">
        <div class='input-group date' id='datetimepicker6'>
            <input type='text' class="form-control" placeholder="Start Date" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar f-unset"></span>
            </span>
        </div>
    </div>
</div>
<div class='col-md-5'>
    <div class="form-group">
        <div class='input-group date' id='datetimepicker7'>
            <input type='text' class="form-control" placeholder="End Date"/>
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar f-unset"></span>
            </span>
        </div>
    </div>
</div>

<!-- Javascript Date picker initialisation -->
<script type="text/javascript">
    $3(document).ready(function () {
        $3('#datetimepicker6').datetimepicker({
            format:'L'
        });
        $3('#datetimepicker7').datetimepicker({
            format:'L',
            useCurrent: false
        });
        $3("#datetimepicker6").on("dp.change", function (e) {
            $3('#datetimepicker7').data("DateTimePicker").minDate(e.date);
        });
        $3("#datetimepicker7").on("dp.change", function (e) {
            $3('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
        });
    });
</script>
For further options and details click here

File Inputs

Below examples shows 2 different file inputs. We can use first one for normal file input operations and second one is a button, we can use it inside other plugins to keep our style.

Example
<!-- File upload input -->
<div class="form-group">
    <input type='file' class="form-control"/>
</div>
<!-- File upload button --->
<div class="form-group">
    <label class="btn-bs-file btn btn-default text-primary">
        <i class="fa fa-upload pull-left" aria-hidden="true"></i> Browse File
        <input type="file"/>
    </label>
</div>
For further reading please refer to bootstrap documentation