There are four general styles available to style forms:
.label-left and no style for horizontal placed inputs,
decreased margins, labels aligned to left and default form accordingly. You can combine any of them together.
Bootstrap styles input by default, so there is no need to add any classes to inputs. Just use them. Don't forget to include input type.
Bootstrap has a great documentation about forms.
Again Bootstrap helps. It has everything we need to prepend and append inputs.
Auto-growing textarea uses Grab Bag autogrow plugin to increase area size dynamically. Files:
Wysiwyg editor is based on bootstrap-wysihtml5 plugin. Files:
Two different type of selects avaiables in Light Blue template:
To style default checkboxes and radio buttons iCheck library is used. Files:
Bootstrap has a great api to handle button states - bootstrap-button.js, so using it to imitate checkbox or radio buttons.
You also can add
data-toggle-class attribute to your buttons so they change their class depending on state. For example:
<div class="btn-group" data-toggle="buttons-radio"> <button class="btn" data-toggle-class="btn-success">One</button> <button class="btn btn-success active" data-toggle-class="btn-success">Two</button> </div>
There is a special plugin to do that - Bootstrap switch. Include following files:
Any field may have either Datepicker or Colorpicker attached. Required files:
Any input can be sized by adding
.span* class or
100% width required.
To make any input accept only formatted values there is a great plugin to use - Masked Input Plugin. Files: