---
title: Floating Labels
layout: nested-component.html
---
<form class="form-inline">
    <div class="form-group floating-label">
        <label for="usernameInput">Username</label>
        <input name="usernameInput" type="text" placeholder="Username" class="form-control" id="usernameInput"/>
    </div>

    <div class="form-group floating-label">
        <label for="usernameInput">Username</label>
        <input name="usernameInput" type="text" value="HEST" placeholder="Username" class="form-control" id="usernameInput"/>
    </div>

    <div class="form-group floating-label floating-label-sm">
        <label for="usernameInput">Username</label>
        <input name="usernameInput" type="text" placeholder="Username" class="form-control input-sm" id="usernameInput"/>
    </div>

    <div class="form-group floating-label floating-label-lg">
        <label for="usernameInput">Username</label>
        <input name="usernameInput" type="text" placeholder="Username" class="form-control input-lg" id="usernameInput"/>
    </div>
</form>