Multiple Input Field Group

How to add multiple input fields to a Bootstrap 3 input field group.

by Hifni Nazeer

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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><!-- /input-group -->
<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><!-- /input-group -->
    
    
</div>

CSS

.double-input .form-control {
    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;
}