How to reduce too much space between two columns with Bootstrap - html

Question

There is too much space between two form-groups, if i reduce the column size of the first one it goes on next line which i don't want. I would like email address to be closer to phone extension. Is there any way to do this without moving email address field with css left margins?
<div class="row">
<div class="form-group col-md-5">
<label for="telephoneNumber">Telephone Number</label>
<div class="form-inline">
<input type="text" class="form-control" id="telephoneNumber1" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber2" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber3" maxlength="3" size="3">Ext
<input type="text" class="form-control" id="extension" maxlength="3" size="3">
</div>
</div>
<div class="form-group col-md-4">
<label for="emailAddress">Email Address</label>
<input type="text" class="form-control" id="emailAddress">
</div>
</div>

Answer 1

The total number of columns on a row is equal to 12.
You have set the class .col-md-5 on your first column which means it would take about 50% of the available width. And your next column starts immediately after that.
A solution would be to set a class with fewer column on your first form-group, let's say col-md-3. Here's a demo: http://output.jsbin.com/tipusi/1/

Answer 2

<!-- HTML -->
<div class="row">
<div class="form-group col-md-12">
<div class="inline-block">
<label for="telephoneNumber">Telephone Number</label>
<div class="form-inline">
<input type="text" class="form-control" id="telephoneNumber1" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber2" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber3" maxlength="3" size="3">Ext
<input type="text" class="form-control" id="extension" maxlength="3" size="3">
</div>
</div>
<div class="inline-block">
<label for="emailAddress">Email Address</label>
<input type="text" class="form-control" id="emailAddress">
</div>
</div>
</div>
<!-- CSS-->
.inline-block {display: inline-block;}

Answer 3

<div class="row">
<div class="form-group col-md-5 no-padding">
<label for="telephoneNumber">Telephone Number</label>
<div class="form-inline">
<input type="text" class="form-control" id="telephoneNumber1" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber2" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber3" maxlength="3" size="3">Ext
<input type="text" class="form-control" id="extension" maxlength="3" size="3">
</div>
</div>
<div class="form-group col-md-4 no-padding">
<label for="emailAddress">Email Address</label>
<input type="text" class="form-control" id="emailAddress">
</div>
</div>
Add below css class
.less-padding {
padding: 10px !important;
margin: 10px !important;
}
.no-padding {
padding: 0 !important;
margin: 0 !important;
}