title: Bootstrap 12 column layout breaks even there is two more column space remaning
body: <p>Im using a non bootstrap application to which I recently integrated boostrap styling (CSS files). But am facing a strange issue in grid layout. Here is the screen shot of the issue.
  <a href="https://i.stack.imgur.com/Ui9mK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ui9mK.jpg" alt="enter image description here"></a></p>
  
  <p>Here the first label column is <strong>col-md-2</strong>, then dropdown column <strong>col-md-5</strong>, and the last column (With button group) is only <strong>col-md-4</strong>. But the last column got breaks into new line.</p>
  
  <p>Here is the markup</p>
  
  <pre><code>&lt;div class="panel panel-default"&gt;
                              &lt;div class=" panel-heading"&gt;
                                  &lt;i class="fa fa-apple"&gt;&lt;/i&gt;
                                  Manage Questionnaire&lt;/div&gt;
                              &lt;div class="panel-body"&gt;
  
                                          &lt;div class="form-horizontal"&gt;
                                              &lt;div class="form-group"&gt;
                                                  &lt;label class=" col-md-2 control-label"&gt;
                                                      Account&lt;/label&gt;
                                                  &lt;div class="col-md-5"&gt;
                                                      &lt;select class="form-control"&gt;
                                                          &lt;option value="value"&gt;text&lt;/option&gt;
                                                      &lt;/select&gt;&lt;/div&gt;
                                              &lt;/div&gt;
                                              &lt;div class="form-group"&gt;
                                                  &lt;label class="col-md-2 control-label"&gt;
                                                      Survey&lt;/label&gt;
                                                  &lt;div class="col-md-5"&gt;
                                                      &lt;select class="form-control "&gt;
                                                          &lt;option value="value"&gt;text&lt;/option&gt;
                                                      &lt;/select&gt;
                                                  &lt;/div&gt;
                                                  &lt;div class="col-md-4"&gt;
                                                      &lt;div class="btn-group"&gt;
                                                          &lt;a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton3','')" class="btn btn-default" id="LinkButton3"&gt; &lt;i class="fa fa-file-o"&gt;&lt;/i&gt;&lt;/a&gt;
                                                          &lt;a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton4','')" class="btn btn-default" id="LinkButton4"&gt; &lt;i class="fa fa-pencil"&gt;&lt;/i&gt;&lt;/a&gt;
                                                          &lt;a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton5','')" class="btn btn-danger" id="LinkButton5"&gt; &lt;i class="fa fa-remove"&gt;&lt;/i&gt;&lt;/a&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                              &lt;div class="form-group"&gt;
                                                  &lt;label class="col-md-2 control-label"&gt;
                                                      Section&lt;/label&gt;
                                                  &lt;div class="col-md-5"&gt;
                                                      &lt;select class="form-control"&gt;
                                                          &lt;option value="value"&gt;text&lt;/option&gt;
                                                      &lt;/select&gt;
                                                  &lt;/div&gt;
                                                  &lt;div class="col-md-4"&gt;
                                                      &lt;div class="btn-group"&gt;
                                                          &lt;a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton1','')" class="btn btn-default" id="LinkButton1"&gt; &lt;i class="fa fa-file-o"&gt;&lt;/i&gt;&lt;/a&gt;
                                                          &lt;a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton2','')" class="btn btn-default" id="LinkButton2"&gt; &lt;i class="fa fa-pencil"&gt;&lt;/i&gt;&lt;/a&gt;
                                                          &lt;a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton6','')" class="btn btn-danger" id="LinkButton6"&gt; &lt;i class="fa fa-remove"&gt;&lt;/i&gt;&lt;/a&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
  </code></pre>
  
  <p>Am not getting why its not get fit in one line since its only total 11 if we add the column length of those rows</p>