How to set text right after twitter bootstrap text block

Question

I have form elements using the following markup. And the current form view, which you can find in the following screenshot:

How can I set "In" and "Lbs" right after the corresponding text box?

<div class="form-group">
    <label for="BI16" class="col-md-1 col-md-offset-1 control-label">Height:</label>
    <div class="col-md-1">
        <input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />In
    </div>
    <label for="BI16" class="col-md-1 control-label">Weight:</label>
    <div class="col-md-1">
        <input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
    </div>
    <label for="BI16" class="col-md-1 control-label">BMI:</label>
    <div class="col-md-2">
        <input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />Lbs
    </div>
    <label for="BI16" class="col-md-1 control-label">Waist:</label>
    <div class="col-md-2">
        <input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
    </div>
</div>

Answer 1

You can use Bootstrap input groups to attach units to inputs:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
  <label for="BI16" class="col-md-1 col-md-offset-1 control-label">Height:</label>
  <div class="col-md-1">
    <div class="input-group">
      <input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
      <span class="input-group-addon">In</span>
    </div>
  </div>
  <label for="BI16" class="col-md-1 control-label">Weight:</label>
  <div class="col-md-1">
    <div class="input-group">
      <input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
      <span class="input-group-addon">Lbs</span>
    </div>
  </div>
  <label for="BI16" class="col-md-1 control-label">BMI:</label>
  <div class="col-md-2">
      <input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
  </div>
  <label for="BI16" class="col-md-1 control-label">Waist:</label>
  <div class="col-md-2">
      <input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
  </div>
</div>

Run codeHide result