How to make input in a form-inline 100% width?

Question

<div class="container">
<div class="row">

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default pull-right">Send invitation</button>
</form>

</div>
</div>

As you can see here in the example, the input does not take all space.

How to make it 100% width(right border of input is next to button)?

It does not have to be form or form-inline, I just want to put label/input/button in one line.

Possible duplicate of [Bootstrap full-width text-input within inline-form](http://stackoverflow.com/questions/22774780/bootstrap-full-width-text-input-within-inline-form) — Kaan Burak Sener, Mar 30 '16 at 00:54

score 0 · Accepted Answer · answered Mar 30 '16 at 01:00

If you want to ensure they stay on one line and the text input touches the button, consider a form input-group:

<div class="input-group">
   <input type="email" class="form-control">
   <span class="input-group-btn">
      <button class="btn btn-default" type="submit">
          Send invitation
      </button>
   </span>    
</div>

How to make input in a form-inline 100% width?

1 Answers1