title: Bootstrap rows and form-inlines changing width of inputs
body: <p>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 </p>
  
  <p><strong>Here's what I have so far:</strong></p>
  
  <h1><a href="http://bootply.com/92488" rel="nofollow">bootply</a></h1>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form action="" method="post" role="form" class="form-inline"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="id_firstname"&gt;First Name&lt;/label&gt;
                  &lt;input type="text" name="firstname" class="form-control" id="id_firstname"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="id_middlename"&gt;Middle Name&lt;/label&gt;
                  &lt;input type="text" name="middlename" class="form-control" id="id_middlename"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="id_lastname"&gt;Last Name&lt;/label&gt;
                  &lt;input type="text" name="lastname" class="form-control" id="id_lastname"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="id_address"&gt;Address&lt;/label&gt;
                  &lt;input type="text" name="address" class="form-control" id="id_address"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="id_postalcode"&gt;Postal Code&lt;/label&gt;
                  &lt;input type="text" name="postalcode" class="form-control" id="id_postalcode"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="id_city"&gt;City&lt;/label&gt;
                  &lt;input type="text" name="city" class="form-control" id="id_city"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="id_telephone"&gt;PHone&lt;/label&gt;
                  &lt;input type="text" name="phone" class="form-control" id="id_telephone"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="id_mobile"&gt;Mobile&lt;/label&gt;
                  &lt;input type="text" name="mobile" class="form-control" id="id_mobile"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="id_email"&gt;E-mail&lt;/label&gt;
                  &lt;input type="text" name="email" class="form-control" id="id_email"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>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</p>