title: Bootstrap Grid Dimensions on form-group div
body: <p>I am trying to clean up a pretty formidable layout which uses Bootstrap 3 and tabs in an AngularJs app.</p>
  
  <p>I'm pretty familiar with most of the Bootstrap rules (e.g. nesting rows etc.), but there is one combination which I have not yet seen. Take the following snippet    </p>
  
  <pre><code>&lt;div class="tab-pane ng-scope active" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab"&gt;
      &lt;div class="tab-top-buffer ng-scope"&gt;
          &lt;div class="row"&gt;
              &lt;ng-form name="patientDetailsForm" class="ng-pristine ng-invalid ng-invalid-required ng-valid-minlength ng-valid-maxlength ng-valid-date"&gt;
                  &lt;div class="col-md-9"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;span&gt;&amp;nbsp;&lt;i class="fa fa-question-circle" title="Enter the first three letters of the patient’s surname"&gt;&lt;/i&gt;&lt;/span&gt;
                              &lt;label for="name" class="control-label"&gt;Name:&lt;/label&gt;
                              &lt;span&gt;&amp;nbsp;&lt;i class="fa fa-asterisk text-danger"&gt;&lt;/i&gt;&lt;/span&gt;
                              &lt;input type="text" id="name" name="name" required="" placeholder="Enter given name" ng-model="editModel.breastData.episode.patient.name" ng-minlength="2" ng-maxlength="3" class="ng-pristine form-control ng-valid-minlength ng-valid-maxlength ng-not-empty ng-valid ng-valid-required ng-touched"&gt;
                          &lt;!-- ngIf: patientDetailsForm.name.$invalid &amp;&amp; patientDetailsForm.name.$touched --&gt;&lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="row"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;span&gt;&amp;nbsp;&lt;i class="fa fa-question-circle" title="Enter the patient’s date of birth as day, month and four digit year of birthdate to be separated by a forward slash (/)."&gt;&lt;/i&gt;&lt;/span&gt;
                              &lt;label for="dob" class="control-label"&gt;DOB:&lt;/label&gt;
                              &lt;span&gt;&amp;nbsp;&lt;i class="fa fa-asterisk text-danger"&gt;&lt;/i&gt;&lt;/span&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;input type="text" id="dob" name="dob" class="form-control ng-pristine ng-untouched ng-isolate-scope ng-not-empty ng-valid-date ng-valid ng-valid-required" uib-datepicker-popup="dd-MM-yyyy" alt-input-formats="altInputFormats" ng-model="$parent.$parent.dob" is-open="dobPopup.opened" datepicker-options="dobDateOptions" ng-required="true" close-text="Close" ng-change="$parent.$parent.validateDob()" placeholder="DD-MM-YYYY" required="required"&gt;&lt;div uib-datepicker-popup-wrap="" ng-model="date" ng-change="dateSelection(date)" template-url="uib/template/datepickerPopup/popup.html" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty"&gt;&lt;!-- ngIf: isOpen --&gt;
      &lt;/div&gt;
                                  &lt;span class="input-group-btn"&gt;
                                      &lt;button type="button" class="btn btn-default" ng-click="openDobPopup()"&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
                                  &lt;/span&gt;
                              &lt;/div&gt;
                              &lt;!-- ngIf: patientDetailsForm.dob.$invalid &amp;&amp; patientDetailsForm.dob.$touched --&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>Is it legal (not bad practice) to add grid dimensions to the div which contains the <code>form-group</code> class. E.g.  </p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="form-group col-md-4 col-md-offset-4"&gt; ...
  </code></pre>
  
  <p>It seems to work, but it doesn't feel right. I just wanted to seek clarification to see if this was, in fact, a bad idea, in which case, I'll probably have to create a wrapping div. </p>
  
  <p>Thanks</p>