Web Designer Wall

Snippets Box

Bootstrap 5 Input Boxes with Floating and Inline Labels

A set of modern text and select inputs showing floating labels above the value and inline labels on the left.

Bootstrap 5 No jQuery Mar 2020 2.3K views 

<section class="wdw-stage">
  <div class="container" style="max-width:920px">
    <form class="wdw-card p-4 p-md-5" id="boxesForm" novalidate>
      <span class="wdw-eyebrow">Application</span>
      <h1 class="wdw-heading h3 mt-1 mb-4">Tell us about yourself</h1>
      <div class="row g-4 g-lg-5">
        <div class="col-lg-6">
          <h2 class="wdw-eyebrow mb-3">About you</h2>
          <div class="form-floating mb-3">
            <input type="text" class="form-control" id="bxName" placeholder="Full name" autocomplete="name" value="Alex Morgan">
            <label for="bxName">Full name</label>
          </div>
          <div class="form-floating mb-3">
            <input type="email" class="form-control" id="bxEmail" placeholder="Email" autocomplete="email" value="[email protected]">
            <label for="bxEmail">Email address</label>
          </div>
          <div class="form-floating">
            <select class="form-select" id="bxRole">
              <option value="" disabled>Please select</option>
              <option>Designer</option><option selected>Developer</option><option>Product manager</option><option>Founder</option>
            </select>
            <label for="bxRole">Your role</label>
          </div>
        </div>
        <div class="col-lg-6">
          <h2 class="wdw-eyebrow mb-3">Your income</h2>
          <div class="input-group mb-3 rounded-4">
            <label class="input-group-text bg-body-tertiary box-label" for="bxIncome">Annual income</label>
            <input type="number" class="form-control text-end" id="bxIncome" placeholder="Enter amount" inputmode="numeric">
          </div>
          <div class="input-group mb-3 rounded-4">
            <label class="input-group-text bg-body-tertiary box-label" for="bxType">Income type</label>
            <select class="form-select text-end" id="bxType">
              <option value="" selected disabled>Please select</option>
              <option>Salary</option><option>Freelance</option><option>Investments</option>
            </select>
          </div>
          <div class="input-group rounded-4">
            <label class="input-group-text bg-body-tertiary box-label" for="bxYears">Years employed</label>
            <input type="number" class="form-control text-end" id="bxYears" placeholder="0" inputmode="numeric" min="0" value="4">
          </div>
        </div>
      </div>
      <div class="d-flex justify-content-end mt-4 mt-md-5">
        <button type="submit" class="btn btn-primary rounded-pill px-5 w-100 w-md-auto">Continue</button>
      </div>
    </form>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More box snippets