Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Input Groups

Input Groups in Bootstrap are used to extend the default form controls by adding text or buttons on either side of textual inputs, custom file selectors or custom inputs.


Basic Input Group

The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind the input field.

@
@

The following classes are the base classes that are used to add the groups to either side of the input boxes:

  • The .input-group-prepend class is used to add groups to the front of the input
  • The .input-group-append class is used to add it behind the input
  • The .input-group-text class is used to style the text that is displayed inside the group
Run code

Input Group Sizing

Use the .input-group-lg for large input groups and .input-group-sm class for small input groups.

Large
Default
Small
Run code

Input Group Styles

Add color and border utilities to .input-group-text to change the appearance of an input group.

@
@
@
@
@
@
@
Run code

Multiple Inputs

Multiple inputs could be used with input groups.

Person
Run code

Multiple Addons

Multiple addons could be used with input groups.

One Two Three
One Two Three
Run code

Button Addons

Buttons could also be appended or prepended to the input group.

Run code

Input Group with Dropdown Button

Input groups could be used with dropdown button.

Run code

Input Group with Split Dropdown Button

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.

Run code

Input Group with Checkboxes and Radios

Place any checkbox or radio option within an input group’s addon instead of text.

Run code

Input Group with Icons

Place any icon within an input group’s addon button instead of text.

Run code

Custom Select

Input groups could be used with custom select element.

Note: The default versions of custom select are not supported by browsers.

Run code

Custom File Input

Input groups could be used with custom file inputs.

Note: Browser default versions of file inputs are not supported.

Upload
Upload
Run code