Bootstrap two inputs in the input group

Question

I have the following HTML, but I can’t get two inputs on the same line, like 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 these input elements 100%. You will need to overwrite this value. Something like that:

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

See my plug for download here: http://www.bootply.com/ApJNHnX5Lv

Answer 2

Put all the content in the tag .form-inline <form>and put the input sections and buttons in .form-group <div>:

<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

Answer 3

form-inline

<div class="well">
  <div class="form-inline">
    <div class="form-group">
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Page path"> 
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Name"> 
      <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>

Bootply

Answer 4

col divs . form-inline/form-group