Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
in English

Lebul dɛn we de flɔt

Krio fayn fayn simpul fɔm lɛbl dɛn we de flɔt oba yu input fil dɛn.

Ɛgzampul

Rap wan pe fɔ <input class="form-control">ɛn <label>ɛlimɛnt dɛn insay .form-floatingfɔ mek yu ebul fɔ flɔt lɛbl dɛn wit Bootstrap in tɛkstual fɔm fil dɛn. A placeholdernid pan ɛni wan pan dɛn <input>as wi we fɔ yuz CSS-onli flotin lɛbl dɛn de yuz di :placeholder-shownpseudo-ɛlimɛnt. Notis bak se di <input>must kam fɔs so wi kin yuz wan brɔda ɛn sista sɛlɛktɔ (ɛgz., ~).

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>

We wan de we dɛn valuedɔn ɔlrɛdi difayn, <label>s go ɔtomɛtik ajɔst to dɛn flot pozishɔn.

<form class="form-floating">
  <input type="email" class="form-control" id="floatingInputValue" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputValue">Input with value</label>
</form>

Fɔm validɛshɔn stayl dɛn bak de wok lɛk aw dɛn bin de ɛkspɛkt.

<form class="form-floating">
  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputInvalid">Invalid input</label>
</form>

Teks eria dɛn

Bay difɔlt, <textarea>s wit .form-controlgo bi di sem ayt lɛk <input>s.

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

Fɔ sɛt kɔstɔm ayt pan yu <textarea>, nɔ yuz di rowsatribyut. Bifo dat, sɛt wan ɛksplisit height(ilɛksɛf na in layn ɔ yu kin yuz kɔstɔm CSS).

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
  <label for="floatingTextarea2">Comments</label>
</div>

Di wan dɛn we de pik

Ɔda pas .form-control, di lɛbl dɛn we de flɔt de nɔmɔ na .form-selects. Dɛn de wok di sem we, bɔt nɔ lɛk <input>s, dɛn go ɔltɛm sho di <label>insay in flot stet. Selekt wit sizeɛn multipledɛn nɔ de sɔpɔt.

<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="floatingSelect">Works with selects</label>
</div>

Dizayn

We yu de wok wit di Bootstrap grid sistem, mek shɔ se yu put fɔm ɛlimɛnt dɛn insay kɔlɔm klas dɛn.

<div class="row g-2">
  <div class="col-md">
    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]" value="[email protected]">
      <label for="floatingInputGrid">Email address</label>
    </div>
  </div>
  <div class="col-md">
    <div class="form-floating">
      <select class="form-select" id="floatingSelectGrid" aria-label="Floating label select example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <label for="floatingSelectGrid">Works with selects</label>
    </div>
  </div>
</div>

Sass we bin de

Di tin dɛn we kin chenj

$form-floating-height:            add(3.5rem, $input-height-border);
$form-floating-line-height:       1.25;
$form-floating-padding-x:         $input-padding-x;
$form-floating-padding-y:         1rem;
$form-floating-input-padding-t:   1.625rem;
$form-floating-input-padding-b:   .625rem;
$form-floating-label-opacity:     .65;
$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem);
$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out;