CODEWITHSUNDEEP
csstwitter-bootstrap
brunodd
brunodd

Reputation: 2584

Add gap between input and button using input-group

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>

Upvotes: 4

Views: 8937

Answers (3)

Sari Rahal
Sari Rahal

Reputation: 1955

Another way is to overwrite the form-control class like this:

.form-control {
    width: 90% !important;
}

Upvotes: -1

bernadd
bernadd

Reputation: 700

Just add padding-left to .input-group-btn, for example:

.input-group-btn {
    padding-left: 10px !important;
}

Upvotes: 0

vanburen
vanburen

Reputation: 21663

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>

Upvotes: 7

Related Questions