Bootstrap Input Groups

Input Groups is the most important feature of Bootstrap we will discuss about it in this tutorial. Input groups are extended Form Controls. Form controls by adding text or buttons before, after, or on both sides of any text-based input. Using input groups you can easily prepend and append text or buttons to text-based inputs.

To adding common elements with the user’s input, for prepend and append content to an input field. For example if you would like to add dollar symbol or @ for the twitter username or anything like that that might be common for your application interface, these will helpful to implement for you.

Here are steps to prepend or append elements to a .form-control:

  • Apply .input-group class on your main <div>

  • In the next step, put your additional content inside a <span> with class .input-group-addon
    within that same <div>.

  • Now before or after the <input> element place this <span>.

As you know cross browser compatibility issues are still exists so avoid using <select> elements here as they cannot be fully styled in WebKit browsers. An input group is an inaccessible component thus do not use input group classes directly to form groups.

Basic Input Group

Following examples show that how to work basic input group:

Input Group Sizing

You can modify the size of the input groups, by using the relative form sizing classes like .input-group-sm, .input-group-xs, .input-group-lg to the .input-group itself and the contents within will automatically resize. This examples demonstrates this:

Checkboxes and radio addons

Prepend or append any checkbox or radio option within an input group’s addon instead of text as shows in the following example.

Button addons

Buttons in input groups are a little bit different and need one extra level of nesting. You be able to even prepend or append 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 default browser styles that cannot be overridden. Following examples show how to work this:

Buttons with dropdowns

In input groups you can add button with dropdown menus in input groups. This action can be done by simply wrap the button and dropdown menu both in the class .input-group-btn as you can see in the following example.

Segmented buttons

Use the same style as the dropdown button to the segment button dropdowns in input groups, but add a primary action next to with the dropdown as can be seen in the following example:

Leave a Reply

Your email address will not be published. Required fields are marked *