Multiple horizontal input-groups in Bootstrap

Question

How to achieve this in Bootstrap?

A label, followed by a in input-group, followed by a glyphicon, followed by an input-group?

Answer 1

You can do it using an inline form like this:

  <form class="form-inline">
    <div class="form-group">
      <label>Temporal Extent</label>
      <div class="input-group">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-calendar"></span></button>
        </span>
        <input type="text" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <div class="input-group">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-calendar"></span></button>
        </span>
        <input type="text" class="form-control">
      </div>
    </div>
  </form>

EDIT

For input group addons rather than buttons:

<div class="input-group">
  <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
  <input type="text" class="form-control">
</div>

Demo