Bootstrap two inputs in input-group

Question

I have following HTML, but I can't get two inputs to be on same line as all buttons.

<div class="well">
    <div class="input-group">
        <input class="form-control" placeholder="Page path"> 
        <input class="form-control" placeholder="Name"> 
        <div class="input-group-btn">                           
        <a href="#" class="btn btn-info">View</a> 
        <a href="#" class="btn btn-primary">Edit</a> 
        <a href="#" class="btn btn-danger">Delete</a></div>
    </div>
</div>

http://www.bootply.com/Iu7Ic99jm6

Answer 1

Bootstrap makes the width of those input elements 100%. You will need to overwrite that value. Something like this:

.input-group .form-control {
  width:45%;
  margin-right:5%;
}

See my bootply fork here: http://www.bootply.com/ApJNHnX5Lv

Answer 2

Place the entire content in a .form-inline <form> tag, and place the input and button sections in .form-group <div>'s :

<div class="well">
      <form class="form-inline">
         <div class="form-group">
            <input type="password" class="form-control input-medium" id="exampleInputPassword1" placeholder="Page path"> 
            <input type="password" class="form-control input-medium" id="exampleInputPassword1" placeholder="Name"> 
         </div>  
         <div class="form-group">                           
            <a href="#" class="btn btn-info">View</a> 
            <a href="#" class="btn btn-primary">Edit</a> 
            <a href="#" class="btn btn-danger">Delete</a>
         </div>
       </form>
</div>

see forked bootply -> http://www.bootply.com/xSxTb0xzqh