Input fields, textarea and select can have a material design style, where labels are displayed as placeholder in default state and scaled/moved when input is in focus or has a value. To enable floating labels, simply wrap a pair of <input class="form-control"> and <label> elements in container with .form-floating class. A placeholder is required on each <input> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element. Also note that the <input> must come first so we can utilize a sibling selector (e.g., ~).