Bootstrap rows and form-inlines changing width of inputs - css

Question

I want a form to have three controls in each row. But the width of the control in every row is different(less to be exact). Must I always use columns? Is that regular behaviour of css? Sometimes the css feels like a labyrinth to me
Here's what I have so far:
bootply
<form action="" method="post" role="form" class="form-inline">
<div class="container">
<div class="row">
<div class="form-group">
<label for="id_firstname">First Name</label>
<input type="text" name="firstname" class="form-control" id="id_firstname">
</div>
<div class="form-group">
<label for="id_middlename">Middle Name</label>
<input type="text" name="middlename" class="form-control" id="id_middlename">
</div>
<div class="form-group">
<label for="id_lastname">Last Name</label>
<input type="text" name="lastname" class="form-control" id="id_lastname">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="form-group">
<label for="id_address">Address</label>
<input type="text" name="address" class="form-control" id="id_address">
</div>
<div class="form-group">
<label for="id_postalcode">Postal Code</label>
<input type="text" name="postalcode" class="form-control" id="id_postalcode">
</div>
<div class="form-group">
<label for="id_city">City</label>
<input type="text" name="city" class="form-control" id="id_city">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="form-group">
<label for="id_telephone">PHone</label>
<input type="text" name="phone" class="form-control" id="id_telephone">
</div>
<div class="form-group">
<label for="id_mobile">Mobile</label>
<input type="text" name="mobile" class="form-control" id="id_mobile">
</div>
<div class="form-group">
<label for="id_email">E-mail</label>
<input type="text" name="email" class="form-control" id="id_email">
</div>
</div>
</div>
</form>
Sorry thought you only wanted the link. I also wrapped every .form-group with .col-md-4 but still the width of the inputs differ from each other

Answer 1

From Bootstrap Documentation on Inline Forms
Requires custom widths: Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
Just apply the following css if you want all the inputs to be the same size
.form-group {
width: 300px;
}
.form-group input {
width: 300px;
}
bootply with css
OR fix the width of each of your form groups by adding col-md-4 class to each group like this:
<div class="form-group col-md-4">
<label for="id_telephone">Phone</label>
<input type="text" name="phone" class="form-control" id="id_telephone">
</div>
bootply with classes