title: Floating Label on Input Placeholder
body: <p>I've created a floating label on top of a text field. Once the text field has been focused or has values, the label will float. However, 1 text field needs to be disabled. And upon setting readonly to true to the text field, the label for that disabled text field doesn't float. Here's the jsfiddle link so that we can easily understand each other <a href="https://jsfiddle.net/omhre5c9/" rel="nofollow noreferrer">https://jsfiddle.net/omhre5c9/</a></p>
  
  <pre><code>&lt;div class="form-row"&gt;
        &lt;div class="form-group col-md-3"&gt;
          &lt;input type="number" id="floor" class="form-control" required&gt;
          &lt;label class="form-control-placeholder" for="floor"&gt;Floor&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="form-group col-md-3"&gt;
          &lt;input type="number" id="unit" class="form-control" required&gt;
          &lt;label class="form-control-placeholder" for="unit"&gt;Unit&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="form-group col-md-6"&gt;
          &lt;input type="text" id="bldg" class="form-control" value="TEST BLDG" readonly="true"&gt;
          &lt;label class="form-control-placeholder" for="bldg"&gt;Building Name&lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>