title: bootstrap form-control and grid
body: <p>What am I missing here?</p>
  
  <p>Not only are my labels on top of my input field but the input field is as wide as the page.</p>
  
  <p>[UPDATED with improved code]</p>
  
  <pre><code>&lt;form class="form-horizontal" #scheduleWorkForm="ngForm"&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="control-label col-md-3" for="averageHoursWorkedPerWeek"&gt;{{ 'RequestTimeOff.AvgHoursWorked' | translate }}&lt;/label&gt;
          &lt;div class="col-md-5"&gt;
              &lt;input class="form-control col-md-5" type="number" [numRange]="{ min: 1, max: 140 }" [(ngModel)]="incident.schedule.averageHoursWorkedPerWeek" name="averageHoursWorkedPerWeek" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>When I examine the rendered CSS, I see that div.form-control width is set explicitly to 100%, but div.col-md-x has no width specified.</p>