Skip to content

Elements:Forms Input Groups

Input groups allow you to easily group form elements and buttons with form inputs.

Examples

Wrap the elements within a wrapper with the class .input-group and then add 1 or more span elements with the class .input-group-prepend (before) or .input-group-append (after) your form input or button.

@
@example.com
https://example.com/users/
$
.00
$ 0.00
$ 0.00

Rounded

Add the class .input-group-rounded to the .input-group element to make the input groups rounded, similar to the rounded buttons.

@
@

Sizes

Add the class .input-group-lg to enlarge input groups.

Small
Default
Large

Checkboxes and radio addons

You can also add checkbox or radio elements within the .input-group-prepend element.


Button add-ons

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