Search within TutorialsPark

Twitter Bootstrap Input Groups


To Group Multiple Inputs in a single block and add extended form controls


Twitter Bootstrap: Basic Input Group

1. To append(after) or prepend(before) elements in a .form-control use the class .input-group with an .input-group-addon.

2. You can place an .input-group-addon on either side of the input, and even at both sides of an input.

Example: Twitter Bootstrap Input Groups

Give it a TRY! »

Twitter Bootstrap: Sizing Input Groups

1. Just like other elements, relative sizing classes can be used with .input-group and contents are automatically resized.

Example:Twitter Bootstrap Sizing Input Groups

Give it a TRY! »

Twitter Bootstrap: Checkboxes and Radio Button Addons

1. Instead of text, a checkbox or radio options can be used within a .input-group-addon to checkboxes and radio addons.

Example:Twitter Bootstrap CheckBoxes and Radio Addons

Give it a TRY! »

Twitter Bootstrap: Button Addons

1. Unlike other addons, buttons require one extra level of nesting, you need to use .input-group-btn instead of .input-group-addon.

2. This is done because the default browser styles cannot be overrided.

Example:Twitter Bootstrap Addon Buttons

Give it a TRY! »

Twitter Bootstrap: Dropdown Button Groups

1. A dropdown button can be created using .dropdown-toggle and other extended classes as shown below.

Example:Twitter Bootstrap Dropdown Button Groups

Give it a TRY! »

Twitter Bootstrap: Segmented Button Groups

1. A segmented button can be created using the class .caret to denote a dropdown within the button element.

Example:Twitter Bootstrap Segmented Button Groups

Give it a TRY! »