Add gap between input and button using input-group

Question

How can I add a gap between the input and the button using input-group on Bootstrap 3? jsFiddle

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Example</h1>
            <div class="input-group">
               <input type="text" class="form-control">
               <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go!</button>
               </span>
            </div>
        </div>
    </div>
</div>

Answer 1

Add your custom class to class="input-group-btn" and use padding to create the space.

See working example. > class="input-group-btn input-space"

.input-group-btn.input-space {
  padding-left: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>Example</h1>

      <div class="input-group">
        <input type="text" class="form-control"> <span class="input-group-btn input-space">
                    <button class="btn btn-default" type="button">Go!</button>
               </span>

      </div>
    </div>
  </div>
</div>