YouTip` with the class **.input-group**.
* Then, within the same `
`, place the additional content inside a `` with the class **.input-group-addon**.
* Place this `` either before or after the `` element.
> !(#)To maintain cross-browser compatibility, avoid using `` elements, as they do not render fully in WebKit browsers. Also, do not apply input group classes directly to form groups; input groups are standalone components.
## Basic Input Groups
The following example demonstrates a basic input group:
## Example
[Try it »](#)
The result is as follows:
## Input Group Sizing
You can change the size of the input group by adding sizing classes relative to the form (e.g., **.input-group-lg**, **.input-group-sm**) to the **.input-group**. The content within the input will automatically resize.
The following example demonstrates this:
## Example
[Try it »](#)
The result is as follows:
## Checkboxes and Radio Addons
You can use checkboxes and radio addons as prefix or suffix elements for input groups, as shown in the following example:
## Example
[Try it »](#)
The result is as follows:
## Button Addons
You can also use buttons as prefix or suffix elements for input groups. In this case, instead of adding the **.input-group-addon** class, you need to wrap the button using the class **.input-group-btn**. This is necessary because the default browser styles are not overridden. The following example demonstrates this:
## Example
[Try it »](#)
The result is as follows:
## Buttons with Dropdowns
To add buttons with dropdowns in input groups, simply wrap the button and dropdown menu inside an **.input-group-btn** class, as shown in the following example:
## Example
[Try it »](#)
The result is as follows:
## Segmented Dropdown Buttons
To add segmented dropdown buttons in input groups, use a style similar to dropdown buttons, but add primary functionality to the dropdown menu, as shown in the following example:
## Example
[Try it »](#)
The result is as follows:
@
.00
$.00
@
@
@