Button dropdowns

Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>. Use .input-group with an .input-group-prepend or .input-group-append to prepend or append elements to a single .form-control.


Basic example

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

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

Sizing

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

@
@

Button addons

Buttons in input groups are a bit different and require one extra level of nesting.

Multiple buttons

While you can only have one add-on per side, you can have multiple buttons inside a single .input-group-append