Making an input grouping

As we discussed in the last chapter, it is possible to group components together with inputs, as we did to the sign form in the home page. However, it is possible to add even more things to inputs. We will talk about some group options that can be useful.

First of all, let's exemplify the usage of grouping inputs and buttons. The main idea is almost the same—creating a div.input-group, and creating an input and a button inside this element, as shown in this HTML code:

<div class="input-group">
  <input type="text" class="form-control" placeholder="Type the page title...">
  <span class="input-group-btn">
    <button class="btn btn-success" type="button">Search</button>
  </span>
</div>

The output of the preceding code is shown in the following screenshot:

The only trick here is to add a <span> element wrapping the button. If you invert the input order with the button, you will prepend the button to the input:

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-success" type="button">Search</button>
  </span>
  <input type="text" class="form-control" placeholder="Type the page title...">
</div>

The output of the preceding code is shown in this screenshot:

Bootstrap also gives us the possibility to add any other kind of button. To exemplify this, let's now add a button dropdown grouped with an input. Replace <button> with the button dropdown that we just used in the previous example:

<div class="input-group">
  <span class="input-group-btn">
    <div class="btn-group pull-right">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Customer area <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
  </span>
  <input type="text" class="form-control" placeholder="Type the page title...">
</div>

It is pretty simple; you can add almost any kind of button, prepended or appended in an input. The following screenshot shows the result of the previous HTML code: