Bootstrap 5 Tutorial

Bootstrap 5 Floating Labels

Last modified on: October 27, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="b697aef4-2fdd-4142-acc2-0198b367366e" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Bootstrap 5: Floating Labels</h3>
<p>Bootstrap 5&rsquo;s floating labels make form inputs more dynamic by positioning labels inside the form fields, which float above when the user interacts with the field. This feature enhances form usability by conserving space and making inputs look clean and minimal.</p>
<hr />
<h3>Basic Floating Labels</h3>
<p>To use floating labels, wrap the form input and label within a <code>.form-floating</code> container. Bootstrap&rsquo;s floating labels work with most form elements, such as <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code>.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="form-floating mb-3"&gt;
    &lt;input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"&gt;
    &lt;label for="floatingInput"&gt;Email address&lt;/label&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Floating Labels with Textarea</h3>
<p>Floating labels also work with <code>&lt;textarea&gt;</code>. Note that adding <code>placeholder</code> text isn't required for textareas when using floating labels.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="form-floating mb-3"&gt;
    &lt;textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"&gt;&lt;/textarea&gt;
    &lt;label for="floatingTextarea"&gt;Comments&lt;/label&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Floating Labels with Select Dropdown</h3>
<p>Floating labels can be combined with <code>&lt;select&gt;</code> elements as well, providing a unified appearance across different input types.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="form-floating mb-3"&gt;
    &lt;select class="form-select" id="floatingSelect" aria-label="Floating label select example"&gt;
        &lt;option selected&gt;Open this select menu&lt;/option&gt;
        &lt;option value="1"&gt;Option 1&lt;/option&gt;
        &lt;option value="2"&gt;Option 2&lt;/option&gt;
        &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;/select&gt;
    &lt;label for="floatingSelect"&gt;Select an option&lt;/label&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Input Group with Floating Labels</h3>
<p>Floating labels also work within input groups. You can add <code>.form-floating</code> around the input and its associated label for a cohesive look.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="input-group mb-3"&gt;
    &lt;span class="input-group-text"&gt;@&lt;/span&gt;
    &lt;div class="form-floating flex-grow-1"&gt;
        &lt;input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username"&gt;
        &lt;label for="floatingInputGroup1"&gt;Username&lt;/label&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Sizing Floating Labels</h3>
<p>Control the size of floating labels using Bootstrap's <code>.form-control-lg</code> or <code>.form-control-sm</code> on the input field for large or small floating label fields.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="form-floating mb-3"&gt;
    &lt;input type="text" class="form-control form-control-lg" id="floatingLarge" placeholder="Large Input"&gt;
    &lt;label for="floatingLarge"&gt;Large Input&lt;/label&gt;
&lt;/div&gt;

&lt;div class="form-floating"&gt;
    &lt;input type="text" class="form-control form-control-sm" id="floatingSmall" placeholder="Small Input"&gt;
    &lt;label for="floatingSmall"&gt;Small Input&lt;/label&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More