Form Styling

Form styling can be a difficult thing to deal with when working with form based elements. This theme incorporates the styling you see below, but I will also show you how you can use these styles for almost any kind of form you create. You also get code HTML snippets to help you design your forms, as well as examples that you can use as a guideline.

Text Input

This is the basic text input styling:


Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.


Checkboxes and radios

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.



Inline checkboxes

Use the class="checkbox-inline" or class="radio-inline" classes on a series of checkboxes or radios for controls that appear on the same line.


Text Input with Prepend & Append

This allows you to add a label or icon, before the field:

This allows you to add a label or icon, after the field:


Button addons

Buttons in input groups are a bit different and require one extra level of nesting. Instead of class="input-group-addon", you’ll need to use class="input-group-btn" to wrap the buttons. This is required due to default browser styles that cannot be overridden.


Selects

Use the default option, or add multiple to show multiple options at once.



Static control

When you need to place plain text next to a form label within a horizontal form, use the form-control-static class on a <p>.

email@example.com


Help text

Input field help text for form controls.

A block of help text that breaks onto a new line and may extend beyond one line.

Button Styles

These are the current form based button styles made available to you with this theme. A text link can also use this styling to create a text button.

Text Button


Sizes

You also get different button sizes by adding one of these classes: btn-lgbtn-sm, or btn-xs.