Bootstrap - Input Groups

Ethan D. - June 1, 2024

Basic Structure

To create an input group in Bootstrap, you need to follow a specific syntax and use the required classes and elements. The basic structure of an input group consists of a container element with the class .input-group, which wraps the input field and any additional elements such as addons.

Example: Basic Input Group Syntax

<div class="input-group">
  <!-- Addons or input field -->
  <input type="text" class="form-control" />
  <!-- Addons or input field -->
</div>

The .input-group class is used to create a container for the input field and its related elements. Inside this container, you can add the input field itself, which should have the class .form-control to apply the default Bootstrap styling.

In addition to the input field, you can combine it with addons. Addons are elements that provide additional functionality or visual cues to the input field. They can be placed before or after the input field within the input group container.

Example: Addon Before Input Field

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">Addon</span>
  </div>
  <input type="text" class="form-control" />
</div>

The addon is placed inside a <div> element with the class .input-group-prepend, indicating that it should be prepended to the input field. The addon itself is typically wrapped in a <span> element with the class .input-group-text to apply appropriate styling.

Example: Addon After Input Field

<div class="input-group">
  <input type="text" class="form-control" />
  <div class="input-group-append">
    <span class="input-group-text">Addon</span>
  </div>
</div>

The addon is placed inside a <div> element with the class .input-group-append, indicating that it should be appended to the input field.

By combining input fields with addons using the appropriate classes and structure, you can create visually appealing and functional input groups in Bootstrap. Addons can provide additional context, icons, or buttons to make the input field more intuitive.

Addon Types

Bootstrap input groups support two types of addons: prepended addons and appended addons. These addons allow you to add icons, text, or other elements before or after the input field, providing more context or functionality to the user.

Prepended Addons

Prepended addons are placed before the input field within the input group. They are used to add icons, labels, or static text that give context or guidance to the user.

To create a prepended addon, wrap the addon content inside a <div> element with the class .input-group-prepend. Inside this <div>, add a <span> element with the class .input-group-text to apply the right styling.

Example: Prepended Addon with Icon

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">
      <i class="fas fa-user"></i>
    </span>
  </div>
  <input type="text" class="form-control" placeholder="Username">
</div>

An icon is added as a prepended addon using the Font Awesome library. The icon is wrapped inside a <span> element with the class .input-group-text to apply the addon styling.

You can also add text or labels as prepended addons:

Example: Prepended Addon with Text

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">https://</span>
  </div>
  <input type="text" class="form-control" placeholder="example.com">
</div>

Appended Addons

Appended addons are placed after the input field within the input group. They serve a similar purpose as prepended addons but appear on the right side of the input field.

To create an appended addon, wrap the addon content inside a <div> element with the class .input-group-append. Inside this <div>, add a <span> element with the class .input-group-text to apply the right styling.

Example: Appended Addon with Icon

<div class="input-group">
  <input type="text" class="form-control" placeholder="Search">
  <div class="input-group-append">
    <span class="input-group-text">
      <i class="fas fa-search"></i>
    </span>
  </div>
</div>

A search icon is added as an appended addon. The icon is wrapped inside a <span> element with the class .input-group-text to apply the addon styling.

You can also add text or labels as appended addons:

Example: Appended Addon with Text

<div class="input-group">
  <input type="text" class="form-control" placeholder="Amount">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

By using prepended and appended addons, you can add meaningful icons, labels, or text to give more information or guidance to the user when interacting with the input field. These addons help to make the input field more intuitive and improve the overall user experience.

Sizing Input Groups

Bootstrap lets you adjust the size of input groups to match your design needs. You can make input groups smaller or larger by using specific size classes on the input field and addons.

Bootstrap has three size classes for input groups:

Class	Description
`.input-group-sm`	Makes a small-sized input group.
Default size	No extra class needed.
`.input-group-lg`	Makes a large-sized input group.

To use a size class on an input group, add the matching class to the .input-group container element.

Example: Small Input Group

<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <span class="input-group-text">Small</span>
  </div>
  <input type="text" class="form-control">
</div>

For the default size, no extra class is needed on the .input-group container.

Example: Default Input Group

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">Default</span>
  </div>
  <input type="text" class="form-control">
</div>

Example: Large Input Group

<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text">Large</span>
  </div>
  <input type="text" class="form-control">
</div>

When using size classes on input groups, make sure the input field and addons within the group have the same size. Bootstrap changes the size of the addons to match the input field size based on the class used on the .input-group container.

Example: Small Input Group with Append

<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <span class="input-group-text">Small</span>
  </div>
  <input type="text" class="form-control">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

By using the available size classes, you can easily change the size of input groups to match the needs of your application.

Multiple Addons

Bootstrap lets you combine multiple addons within a single input group. This is useful when you need to add more than one addon before or after the input field. You can mix and match prepended and appended addons to create complex input group layouts.

To combine multiple addons, you include multiple .input-group-prepend or .input-group-append elements within the .input-group container. The order in which you place these elements determines the positioning of the addons relative to the input field.

Example: Combining multiple prepended addons

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
  <input type="text" class="form-control">
</div>

Two prepended addons are used: a dollar sign ($) and a value (0.00). They are placed inside separate .input-group-prepend elements to position them before the input field.

You can also combine prepended and appended addons within the same input group:

Example: Combining prepended and appended addons

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

A prepended addon ($) and an appended addon (.00) are used together. The prepended addon is placed inside a .input-group-prepend element, while the appended addon is placed inside a .input-group-append element.

When dealing with complex addon layouts, you can nest multiple .input-group-prepend or .input-group-append elements to achieve the desired arrangement. This allows you to create input groups with multiple addons on either side of the input field.

Example: Complex addon layouts

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">Prepend 1</span>
    <span class="input-group-text">Prepend 2</span>
  </div>
  <input type="text" class="form-control">
  <div class="input-group-append">
    <span class="input-group-text">Append 1</span>
    <div class="input-group-append">
      <span class="input-group-text">Append 2</span>
      <span class="input-group-text">Append 3</span>
    </div>
  </div>
</div>

In this complex layout, there are two prepended addons (Prepend 1 and Prepend 2) and three appended addons (Append 1, Append 2, and Append 3). The appended addons are nested inside multiple .input-group-append elements to achieve the desired positioning.

By combining multiple addons and using the flexibility of .input-group-prepend and .input-group-append elements, you can create input groups with complex layouts that fit your specific needs.

Button Addons

Bootstrap lets you use buttons as addons in input groups. By adding buttons before or after an input field, you can give more actions or functions related to the input. This is a useful way to make input groups that offer more than just text or icons.

To use buttons as addons, you need to put the button elements inside the .input-group-prepend or .input-group-append containers, like you would with normal addons.

Example: Button Before Input Field

<div class="input-group">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Search</button>
  </div>
  <input type="text" class="form-control" placeholder="Enter search query">
</div>

A button with the text "Search" is added before the input field. The button is put inside the .input-group-prepend container and styled using the .btn and .btn-outline-secondary classes.

You can also add buttons after the input field:

Example: Button After Input Field

<div class="input-group">
  <input type="text" class="form-control" placeholder="Enter email address">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">Subscribe</button>
  </div>
</div>

A button with the text "Subscribe" is added after the input field. The button is put inside the .input-group-append container and styled using the .btn and .btn-primary classes.

When using button addons, you can use the same styling and sizing classes as you would with normal buttons in Bootstrap. This includes classes like .btn-primary, .btn-secondary, .btn-sm, .btn-lg, and so on.

Example: Sized Button Addons

<div class="input-group input-group-sm">
  <input type="text" class="form-control" placeholder="Enter name">
  <div class="input-group-append">
    <button class="btn btn-sm btn-success" type="button">Save</button>
  </div>
</div>

The input group is sized using the .input-group-sm class, and the button addon is sized using the .btn-sm class to match the smaller input size.

You can also mix button addons with other types of addons, such as icons or text, in the same input group:

Example: Button and Icon Addons

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control" placeholder="Amount">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">Donate</button>
  </div>
</div>

A prepended addon with the dollar sign ($) is combined with an appended button addon labeled "Donate".

By using button addons in input groups, you can give interactive and actionable elements directly attached to the input field, making your forms easier to use.

Dropdown Addons

Bootstrap lets you add dropdowns as addons in input groups. This gives you more options or choices related to the input field in a compact and interactive way. You can place dropdowns before or after the input field, giving you flexibility in how you design your forms.

To use a dropdown as an addon, put the dropdown toggle button and menu inside the .input-group-prepend or .input-group-append container, depending on where you want the dropdown to show up.

Example: Dropdown addon before input field

<div class="input-group">
  <div class="input-group-prepend">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
      Options
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Option 1</a>
      <a class="dropdown-item" href="#">Option 2</a>
      <a class="dropdown-item" href="#">Option 3</a>
    </div>
  </div>
  <input type="text" class="form-control" placeholder="Select an option">
</div>

A dropdown toggle button labeled "Options" is placed before the input field. The button and its dropdown menu are wrapped inside the .input-group-prepend container. The dropdown menu items use the .dropdown-menu and .dropdown-item classes.

You can also add dropdowns after the input field:

Example: Dropdown addon after input field

<div class="input-group">
  <input type="text" class="form-control" placeholder="Enter a value">
  <div class="input-group-append">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
      Units
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Pixels</a>
      <a class="dropdown-item" href="#">Percentage</a>
      <a class="dropdown-item" href="#">Ems</a>
    </div>
  </div>
</div>

A dropdown toggle button labeled "Units" is placed after the input field. The button and its dropdown menu are wrapped inside the .input-group-append container.

When using dropdown addons, you have full control over the contents and style of the dropdown menu. You can add custom menu items, dividers, headers, or any other valid dropdown menu content.

Example: Custom dropdown menu

<div class="input-group">
  <input type="text" class="form-control" placeholder="Enter a date">
  <div class="input-group-append">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
      <i class="far fa-calendar-alt"></i>
    </button>
    <div class="dropdown-menu dropdown-menu-right">
      <h6 class="dropdown-header">Select a date range:</h6>
      <a class="dropdown-item" href="#">Today</a>
      <a class="dropdown-item" href="#">Yesterday</a>
      <a class="dropdown-item" href="#">Last 7 Days</a>
      <a class="dropdown-item" href="#">Last 30 Days</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Custom Range</a>
    </div>
  </div>
</div>

The dropdown menu is customized with a header, divider, and specific date range options. The .dropdown-menu-right class aligns the dropdown menu to the right side of the toggle button.

Dropdown addons offer a compact way to give related options or additional input choices directly attached to the input field. This can make your forms simpler to use and save space in your layout.

Segmented Buttons

Bootstrap lets you create segmented button addons for input groups. Segmented buttons combine multiple related actions or options into a single compact unit, making your input groups more intuitive and user-friendly.

To create a segmented button addon, wrap a series of buttons inside a <div> element with the class .input-group-prepend or .input-group-append, depending on where you want the buttons to appear in relation to the input field.

Example: Prepending a Segmented Button Addon

<div class="input-group">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-secondary">Action</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action 1</a>
      <a class="dropdown-item" href="#">Action 2</a>
      <a class="dropdown-item" href="#">Action 3</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated action</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>

In this example, a segmented button addon is prepended to the input field. The addon consists of a primary button labeled "Action" and a dropdown toggle button. The dropdown menu contains additional actions related to the primary button.

You can also append segmented button addons to the input field:

Example: Appending a Segmented Button Addon

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
  <div class="input-group-append">
    <button type="button" class="btn btn-secondary">Action</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action 1</a>
      <a class="dropdown-item" href="#">Action 2</a>
      <a class="dropdown-item" href="#">Action 3</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated action</a>
    </div>
  </div>
</div>

When combining segmented buttons with input fields, you can use the same sizing classes as regular input groups. Add the appropriate class (e.g., .input-group-sm or .input-group-lg) to the .input-group container to adjust the size of both the input field and the segmented buttons.

Example: Small Segmented Button Addon

<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-secondary">Small</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Small Action 1</a>
      <a class="dropdown-item" href="#">Small Action 2</a>
      <a class="dropdown-item" href="#">Small Action 3</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with small segmented dropdown button">
</div>

Segmented buttons in input groups inherit the styling of regular Bootstrap buttons. You can customize their appearance by applying button classes like .btn-primary, .btn-secondary, .btn-success, etc., to the individual buttons within the segmented button addon.

Segmented button addons provide a compact and organized way to group related actions or options together with an input field. They offer a clean and intuitive interface for users to interact with, improving the overall user experience of your forms and input groups.

Customization and Styling

Bootstrap provides default styles for input groups, but you may want to customize their appearance to match your application's design. You can override the default styles and apply your own CSS classes and styles to input groups.

To start customizing, you can target the .input-group class or any of its child elements and apply your desired styles. Bootstrap uses a combination of classes to style input groups, so you may need to use more specific selectors to override certain styles.

Example: Customizing input groups with CSS

<style>
  .custom-input-group {
    max-width: 400px;
  }

  .custom-input-group .form-control,
  .custom-input-group .input-group-text {
    height: 50px;
  }
</style>

<div class="input-group custom-input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username">
</div>

A custom class .custom-input-group is applied to the input group. CSS styles are then defined for this class to set a maximum width of 400 pixels. The height of the input field and the prepended addon is increased to 50 pixels by targeting the .form-control and .input-group-text classes within the custom input group.

You can also customize the colors, backgrounds, borders, and other visual properties of input groups. Bootstrap uses variables and mixins to define the default styles, so you can override them in your own CSS.

Example: Custom colors and borders for input groups

<style>
  .custom-input-group .input-group-prepend .input-group-text {
    background-color: #f8f9fa;
    border-color: #ced4da;
    color: #495057;
  }

  .custom-input-group .form-control {
    border-color: #ced4da;
  }

  .custom-input-group .form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }
</style>

<div class="input-group custom-input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">
      <i class="fas fa-user"></i>
    </span>
  </div>
  <input type="text" class="form-control" placeholder="Username">
</div>

The background color, border color, and text color of the prepended addon are customized using the .custom-input-group class. The border color of the input field is also modified. The focus state of the input field is styled with a different border color and box shadow.

When adapting input groups to match your design, consider the following tips:

Tip	Description
Consistency	Use consistent styling across all input groups in your application for a cohesive look.
Contrast and Readability	Ensure that the customized styles maintain proper contrast and readability.
Testing	Test the input groups with different states (default, hover, focus) to make sure they appear as intended.
CSS Management	Consider using CSS variables or a CSS preprocessor like Sass to manage your custom styles more efficiently.

Remember, while customizing input groups, it's important to balance aesthetic appeal and usability. Make sure that the custom styles do not make it harder for users to understand the purpose of the input group.

By leveraging CSS and applying custom classes and styles, you can personalize the look and feel of Bootstrap input groups to match your application's design.