Label

The label component can be placed outside or within the field.

Normal label

Infield label

Floating label

<div class="form-group">
  <label>Normal label</label>
  <input type="text" class="form-control">
</div>
<div class="form-group">
  <div class="label-infield">
    <label for="infield">Infield label</label>
    <input id="infield" type="text" class="form-control">
  </div>
</div>
<div class="form-group">
  <div class="label-floating">
    <input id="floating" type="text" class="form-control" placeholder="Floating label">
    <label for="floating">Floating label</label>
  </div>
</div>

Warranties

The .floating-label component needs space to move into and the .label-infield component needs space to stay inside. To do this, it is need to increase the input height.
In order for the .floating-label and .label-infield components to work properly you have to set the attribute id of the input and the attribute for of the label.
In order for the .floating-label component to work properly you have to set the attribute attribute placeholder of the input.

Browser compatibility

Floating labels will not work properly on IE11 and older versions.