Skip to content

Elements:Forms

Form Elements

Using the classes .form-control (for inputs, selects, etc) and .form-group for wrappers you can consistently style and layout forms.

We'll never share your email with anyone else.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
Radio buttons
Checkboxes
Checkboxes/Radios inline

Input examples

Examples of how the various input elements look when .form-control is applied.


Rounded Input Form Controls

Use the class .form-control-rounded to input elements to make them rounded, this can be used in combination with the rounded buttons and input groups.


Inline Forms

Use the class .form-inline to form elements to make .form-control elements within the form display inline.

@

Extended Example


Grid Layouts

Forms support the default Bootstrap grid functionality so you can use the .col-BREAKPOINT-WIDTH width classes throughout your forms.

You can also add the class .col-form-label to label elements to vertically center them with the row content.


Form control sizes

You can enlarge or shrink .form-control elements by adding the classes .form-control-lg or .form-control-sm .

Input elements

Select elements

Within a grid layout


Hidden labels

When space is low it can be useful to hide form labels and use the HTML5 placeholder attribute on input elements to show the label inside the form element instead.

Simply add class="sr-only" to the label element and then move the label text to a placeholder attribute on the input element instead.


Static form controls

Sometimes it's useful to form data to a user but not let them change it, this is where you can use the class .form-control-static on a p within your forms.

email@example.com


Disabled form elements & readonly inputs

You can disable single form elements by applying the boolean attribute disabled to them OR apply it to a fieldset wrapper to disable all form elements within the fieldset.

Single input

Fieldset

Readonly

Apply the readonly style by adding the boolean attribute readonly to any form input. Readonly elements cannot be altered.


Help text

Sometimes it's useful to tell users what information is needed for a given form field and this is where you can use the .form-text on any static element within form groups to provide help text. Use p tags for block level text and small or span tags to show inline.
You could also use tooltips as well.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

Inline

Must be 8-20 characters long.

Tooltip form help


Validation states

Validation states help give users an instance visual feedback on whether their form input has passed validation. There are 3 clasess for this: .is-invalid , .is-valid & .invalid-feedback for feedback messages.

Success! You've done it.
Example help text that remains unchanged.
Sorry, that username's taken. Try another?
Example help text that remains unchanged.

Toggles

Simply add data data-toggle="switch" to any radio or checkbox element:

Example:
<input type="checkbox" data-toggle="switch" checked>

Find more examples at Bootstrap Switch.

Sizes

Styles

Alternating styles with state


Extended form styling is coming in a future release of AppStrap.

Awesome Features

99.9% Uptime Free Upgrades Fully Responsive Bug Free

Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page