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...