Bootstrap Input Groups - Bootstrap

What are Input Groups?

This section clarifies about one more feature Bootstrap supports, the Input Groups. Input groups are prolonged Form Controls. Using input groups one can simply remove and add text or buttons to the text-based inputs.

By adding prepended and added content to an input field, you can add shared features to the user’s input. For instance, you can add the dollar symbol, the @ for a Twitter username, or anything else that might be mutual for your application interface.

To remove or attach elements to a .form-control−

  • Wrap it in a <div> with class .input-group
  • As a next step, within that same <div> , place your extra content inside a <span> with class .input-group-addon.
  • Now place this <span> either before or after the <input> element.

For cross browser compatibility, avoid using <select> elements here as they cannot be fully styled in WebKit browsers. Also do not apply input group classes directly to form groups. An input group is an isolated component.

Basic Input Group

The following example demonstrates basic input group −

What is Input Group Sizing?

Input Group Sizing

You can alter the size of the input collections, by adding the relative form sizing classes like .input-group-lg, input-group-sm, input-group-xs to the .input-group itself. The contents within will automatically resize.

Following examples demonstrates this −

How to attach and detach Checkboxes and Radio Addons?

Checkboxes and Radio Addons

You can detach or attach radio buttons and checkboxes in its place of text as verified in the following example −

Button Addons

You can even detach or attach buttons in input groups. Instead of .input-group-addon class, you'll need to use class .input-group-btn to wrap the buttons. This is required due to the default browser styles that cannot be overridden. Following instances proves this −

how to add Buttons with Dropdowns?

Buttons with Dropdowns

Adding buttons with dropdown menus in input groups can be done by just wrapping the button and dropdown menu in a .input-group-btn class as demonstrated in the following example −

What are Segmented Buttons?

Segmented Buttons

To segment button dropdowns in input groups, use the same overall style as the dropdown button, but improve a main action along with the dropdown as can be seen in the next instance −

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

Bootstrap Topics