Basic Input

Included .form-control to <input>, <select>s and <textarea>for general appearance, focus state, sizing, and more.

Input Sizing

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

Input Group

Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label>s outside the input group.

With textarea

Input Group Sizing

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

Sizing on the individual input group elements isn’t supported.


Input Affix

Add prefix or suffix icons inside input.


Usage of checkbox.


Usage of checkbox.


Usage of switch.


Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. For more usaage information, please refer to Select2

<!-- page css -->
<link href="assets/vendors/select2/select2.css" rel="stylesheet">

<!-- page js -->
<script src="assets/vendors/select2/select2.min.js"></script>

File Browser

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.


Bootstrap-datepicker provides a flexible datepicker widget in the Bootstrap style. For more usaage information, please refer to bootstrap-datepicker

<!-- page css -->
<link href="assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.css" rel="stylesheet">

<!-- page js -->
<script src="assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>

Quill Editor

Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need. For more usaage information, please refer to Quill

Hello World!

Some initial bold text

<!-- page js -->
<script src="assets/vendors/quill/quill.min.js"></script>