Bootstrap Tutorial - Create Multiple Input Field Group

The following code shows how to create Multiple Input Field Group.

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<style type='text/css'>
.double-input .form-control {<!--   ww w .  j  a  va 2  s. c om-->
  width: 50%;
  border-right-width: 0px;
}

.double-input .form-control:focus {
  border-right-width: 1px;
}

.triple-input .form-control {
  width: 33.3%;
  border-right-width: 0px;
}

.triple-input .form-control:focus {
  border-right-width: 1px;
}
</style>
</head>
<body>
  <div style="width: 70%; padding: 20px;">
    <div class="input-group double-input">
      <input type="text" placeholder="First" class="form-control" /> 
      <input type="text" placeholder="Second" class="form-control" /> 
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Go!</button>
      </span>
    </div>
    <br>
    <div class="input-group triple-input">
      <input type="text" placeholder="First" class="form-control" /> 
      <input type="text" placeholder="Middle" class="form-control" /> 
      <input type="text" placeholder="Second" class="form-control" /> 
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Go!</button>
      </span>
    </div>
  </div>
</body>
</html>

Click to view the demo