Labels

Below is a complete list of <label> class options supported by Material Design for Bootstrap:

Classes Notes
.bmd-label-static

Statically positioned above the input
.bmd-label-placeholder

Renders a <label> as a placeholder

  • focused: not visible after first keystroke
  • unfocused & empty: placeholder
  • unfocused & filled: not visible
  • do not use the placeholder attribute with this option
.bmd-label-floating

Animated combination of placeholder and label:

  • focused: label animates from placeholder to static label
  • unfocused & empty: placeholder
  • unfocused & filled: renders the same as .bmd-label-static

Contents

Styles

We'll never share your email with anyone else.
We'll never share your email with anyone else.
We'll never share your email with anyone else. 
<form>
  <fieldset class="form-group">
    <label for="exampleInputEmail1" class="bmd-label-static">label-static</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="placeholder text">
    <span class="bmd-help">We'll never share your email with anyone else.</span>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleInputEmail1" class="bmd-label-floating">label-floating</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
    <span class="bmd-help">We'll never share your email with anyone else.</span>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleInputEmail1" class="bmd-label-placeholder">label-placeholder</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
    <span class="bmd-help">We'll never share your email with anyone else.</span>
  </fieldset>
</form>