title: Bootstrap input fields are not the same width when putting them in separate columns
body: <p>I have created a form for online admissions using the Bootstrap framework. I am having a problem with putting two input fields in separate columns; those two fields are not adjusted according to the other fields' width. Here is my form code and also image of this problem:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form method="post" action=""&gt;
                          &lt;h3&gt;Personal Information&lt;/h3&gt;
                          &lt;div class="form-group"&gt;
                              &lt;span&gt;Name&lt;/span&gt;
                              &lt;span&gt;&lt;input type="username" class="form-control" id="userName"&gt;&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div  class="form-group"&gt;
                              &lt;span&gt;Father Name&lt;/span&gt;
                              &lt;span&gt;&lt;input type="username" class="form-control" id="userName"&gt;&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;div class="col-xs-6"&gt;
                                  &lt;span&gt;Nationality&lt;/span&gt;
                                  &lt;span&gt;&lt;input type="username" class="form-control" id="userName"&gt;&lt;/span&gt;
                              &lt;/div&gt;
                              &lt;div class="col-xs-6"&gt;
                                  &lt;span&gt;Region&lt;/span&gt;
                                  &lt;span&gt;&lt;input type="username" class="form-control" id="userName"&gt;&lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;div class="col-xs-6"&gt;
                                  &lt;span&gt;Date of Birth&lt;/span&gt;
                                  &lt;span&gt;&lt;input type="username" class="form-control" id="userName"&gt;&lt;/span&gt;
                              &lt;/div&gt;
                              &lt;div class="col-xs-6"&gt;
                                  &lt;span&gt;Place of Birth&lt;/span&gt;
                                  &lt;span&gt;&lt;input type="username" class="form-control" id="userName"&gt;&lt;/span&gt;
                              &lt;/div&gt;
                              &lt;h3&gt;&lt;/h3&gt;
                          &lt;/div&gt;
                          &lt;div  class="form-group"&gt;
                              &lt;span&gt;Permanent Home Address&lt;/span&gt;
                              &lt;span&gt;&lt;input type="username" class="form-control" id="userName"&gt;&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div  class="form-group"&gt;
                              &lt;span&gt;e-mail&lt;/span&gt;
                              &lt;span&gt;&lt;input type="email" class="form-control" id="inputEmail3"&gt;&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div&gt;
                              &lt;label class="fa-btn btn-1 btn-1e"&gt;&lt;input type="submit" value="submit us"&gt;&lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/XQyoJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XQyoJ.png" alt="enter image description here"></a></p>