Source

Fɔm dɛn

Ɛgzampul ɛn yuz gaydlayn fɔ fɔm kɔntrol stayl dɛn, layout opshɔn dɛn, ɛn kɔstɔm kɔmpɔnɛnt dɛn fɔ mek bɔku difrɛn fɔm dɛn.

Ɔvaviu fɔ di Baybul

Bootstrap in fɔm kɔntrol dɛn de ɛkspɛn pan wi Ribɔt fɔm stayl dɛn wit klas dɛn. Yuz dɛn klas ya fɔ opt insay dɛn kɔstɔmayt displei fɔ wan mɔ kɔnsistɛns rɛnda akɔdin to brɔwza ɛn divays dɛn.

Mek shɔ se yu yuz wan typeatribyut we fit pan ɔl di input dɛn (ɛgz., emailfɔ imel adrɛs ɔ numberfɔ nɔmba infɔmeshɔn) fɔ tek advantej pan nyu input kɔntrol dɛn lɛk imel verifyeshɔn, nɔmba sɛlɛkshɔn, ɛn ɔda tin dɛn.

Na wan kwik ɛgzampul fɔ sho Bootstrap in fɔm stayl dɛn. Kɔntinyu fɔ rid fɔ gɛt dɔkyumɛnt dɛn bɔt di klas dɛn we dɛn nid, fɔm layout, ɛn ɔda tin dɛn.

Wi nɔ go ɛva sheb yu imel wit ɛni ɔda pɔsin. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Fɔm kɔntrol dɛn

Di tɛkstual fɔm kɔntrol dɛn—lɛk <input>s, <select>s, ɛn <textarea>s—dɛn stayl dɛn wit di .form-controlklas. Insay de, dɛn gɛt stayl dɛn fɔ di we aw pɔsin de luk, di we aw pɔsin de pe atɛnshɔn, di sayz we i de, ɛn ɔda tin dɛn.

Mek shɔ se yu fɛn wi kɔstɔm fɔm dɛn fɔ mek yu gɛt mɔ stayl <select>s.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Fɔ fayl input dɛn, swap di .form-controlfɔ .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Sayz fɔ di sayz

Sɛt ayt dɛn yuz klas dɛn lɛk .form-control-lgɛn .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Na fɔ rid nɔmɔ

Ad di readonlyboolean atribyut pan wan input fɔ mek dɛn nɔ chenj di input in valyu. Di input dɛn we yu kin rid nɔmɔ kin tan lɛk layt (jɔs lɛk di input dɛn we dɛn dɔn disable), bɔt dɛn kin kip di standad kɔsa.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Na wan klin tɛks nɔmɔ fɔ rid

If yu want fɔ gɛt <input readonly>ɛlimɛnt dɛn na yu fɔm we dɛn stayl lɛk plein tɛks, yuz di .form-control-plaintextklas fɔ pul di difɔlt fɔm fil stayl ɛn kip di kɔrɛkt margin ɛn pad.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Chɛkbɔks dɛn ɛn redio dɛn

Difɔlt chɛkbɔks ɛn redio dɛn de impɔtant wit di ɛp fɔ .form-check, wan klas fɔ ɔl tu di kayn input dɛn we de mek di layout ɛn bihayvya fɔ dɛn HTML ɛlimɛnt dɛn bɛtɛ . Chɛkbɔks dɛn na fɔ pik wan ɔ sɔm tin dɛn we de na wan list, ɛn redio dɛn na fɔ pik wan tin dɛn frɔm bɔku pan dɛn.

Dɛn de sɔpɔt chɛkbɔks ɛn redio dɛn we nɔ ebul fɔ wok, bɔt fɔ mek yu ebul fɔ gi yu not-allowedkɔsa we yu de hova di mama ɔ papa <label>, yu go nid fɔ ad di disabledatribyut to di .form-check-input. Di disabled atribyut go aplay layt kala fɔ ɛp fɔ sho di input in stet.

Dɛn bil chɛkbɔks ɛn redio we dɛn de yuz fɔ sɔpɔt HTML-based fɔm validɛshɔn ɛn fɔ gi kɔrɛkt, aksesbul lɛbl dɛn. As a so, wi <input>s ɛn <label>s na brɔda ɛn sista ɛlimɛnt dɛn as opɔz to wan <input>insay wan <label>. Dis na smɔl mɔ verbose as yu fɔ spɛsifa idɛn foratribyut dɛn fɔ rilayt di <input>ɛn <label>.

Difɔlt (we dɛn dɔn stak) .

Bay difɔlt, ɛni nɔmba fɔ chɛkbɔks ɛn redio dɛn we na brɔda ɛn sista dɛn we de nia dɛnsɛf go de vertikal wan ɛn dɛn go put dɛn spɛshal say wit .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check disabled">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Inlayn

Grup chɛkbɔks ɔ redio dɛn na di sem ɔrizɔntal row bay we yu ad .form-check-inlineto ɛni wan pan dɛn .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Wi nɔ gɛt lɛbl dɛn

Ad .position-staticto inputs insay .form-checkwe nɔ gɛt ɛni lɛbul tɛks. Mɛmba fɔ stil gi sɔm kayn lɛbl fɔ ɛp tɛknɔlɔji dɛn (fɔ ɛgzampul, yuz aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Dizayn

Bikɔs Bootstrap de aplay display: blockɛn width: 100%to ɔlmost ɔl wi fɔm kɔntrol dɛn, fɔm dɛn go bay difɔlt stak vertikal. Yu kin yuz ɔda klas dɛn fɔ chenj dis layout pan ɛni fɔm.

Fɔm grup dɛn

Di .form-groupklas na di izi we fɔ ad sɔm strɔkchɔ to fɔm dɛn. I de gi wan fleksibul klas we de ɛnkɔrej fɔ grup di rayt lɛbl dɛn, kɔntrol dɛn, opshɔnal ɛp tɛks, ɛn fɔm validɛshɔn mɛsej. Bay difɔlt i jɔs de aplay margin-bottom, bɔt i de pik ɔda stayl dɛn insay .form-inlineas nid de. Yuz am wit <fieldset>s, <div>s, ɔ nia ɛni ɔda ɛlimɛnt.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

Fɔm grid fɔm

Yu kin bil mɔ kɔmpleks fɔm dɛn we yu de yuz wi grid klas dɛn. Yuz dɛn wan ya fɔ fɔm layout dɛn we nid bɔku kɔlɔm dɛn, difrɛn wit dɛn, ɛn ɔda alaynɛshɔn opshɔn dɛn.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Fɔm row

Yu kin chenj bak .rowfɔ .form-row, wan chenj fɔ wi standad grid row we de ɔvalayz di difɔlt kɔlɔm gɔta dɛn fɔ tayt ɛn mɔ kɔmpakt layout dɛn.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Yu kin mek mɔ kɔmpleks layout dɛn bak wit di grid sistem.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Ɔrizɔntal fɔm

Krio ɔrizɔntal fɔm dɛn wit di grid bay we yu ad di .rowklas to fɔm grup dɛn ɛn yuz di .col-*-*klas dɛn fɔ sho di wit fɔ yu lɛbl ɛn kɔntrol dɛn. Mek shɔ se yu ad .col-form-labelto yu <label>s bak so dɛn de vertikal sɛntrɛd wit dɛn asosiet fɔm kɔntrol dɛn.

Sɔntɛnde, yu go nid fɔ yuz margin ɔ padding utilities fɔ mek da pafɛkt alaynɛshɔn de we yu nid. Fɔ ɛgzampul, wi dɔn pul di padding-toppan wi stak redio input dɛn lɛbl fɔ mek di tɛks beslayn alaynɛd ​​fayn fayn wan.

Redio dɛn
Chɛkbɔks 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
Ɔrizɔntal fɔm lɛbl saiz

Mek shɔ se yu yuz .col-form-label-smɔ .col-form-label-lgto yu <label>s ɔ <legend>s fɔ fala di sayz fɔ .form-control-lgɛn kɔrɛkt wan .form-control-sm.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Di sayz fɔ di kɔlɔm dɛn

As wi bin dɔn sho na di ɛgzampul dɛn we dɔn pas, wi grid sistem de mek yu ebul fɔ put ɛni nɔmba fɔ .cols insay wan .rowɔ .form-row. Dem go split di avaylabl width ikwal bitwin dem. Yu kin pik wan sɔbsɛt bak pan yu kɔlɔm dɛn fɔ tek mɔ ɔ smɔl ples, we di ɔda .colwan dɛn we lɛf ikwal split di ɔda wan dɛn, wit sɔm patikyula kɔlɔm klas dɛn lɛk .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Awto-sayz

Di ɛgzampul we de dɔŋ ya de yuz wan fleksbɔks yutiliti fɔ sɛnt di tin dɛn we de insay vertikal wan ɛn chenj .colto .col-autoso dat yu kɔlɔm dɛn go jɔs tek bɔku ples we dɛn nid. If wi put am ɔda we, di kɔlɔm de saiz insɛf bay di tin dɛn we de insay.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Dɔn yu kin rimiks dat wan tɛm bak wit saiz-spɛsifi k kɔlɔm klas dɛn.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Ɛn fɔ tru , dɛn de sɔpɔt kɔstɔm fɔm kɔntrol dɛn.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Fɔm dɛn we de insay di layn

Yuz di .form-inlineklas fɔ sho wan siriɔs lɛbl, fɔm kɔntrol, ɛn bɔtin dɛn na wan ɔrizɔntal rɔw. Fɔm kɔntrol dɛn insay inlayn fɔm dɛn kin difrɛn smɔl frɔm dɛn difɔlt stet dɛn.

  • Kɔntrol dɛn na display: flex, we de kɔlap ɛni HTML wayt spɛs ɛn alaw yu fɔ gi alaynɛshɔn kɔntrol wit spɛshal ɛn fleksbɔks yutiliti dɛn.
  • Kɔntrol ɛn input grup dɛn de gɛt width: autofɔ ɔvalayz di Bootstrap difɔlt width: 100%.
  • Kɔntrol dɛn jɔs de apia inlayn na viupɔt dɛn we at le 576px waid fɔ akɔn fɔ smɔl smɔl viupɔt dɛn na mobayl divays dɛn.

Yu kin nid fɔ adrɛs wit yu an di wit ɛn alaynɛshɔn fɔ wan wan fɔm kɔntrol dɛn wit spɛshal yutiliti dɛn (as dɛn sho dɔŋ ya). Las wan, mek shɔ se yu put wan ɔltɛm <label>wit ɛni fɔm kɔntrol, ivin if yu nid fɔ ayd am frɔm pipul dɛn we nɔ de rid di skrin wit .sr-only.

@ 
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Kɔstɔm fɔm kɔntrol ɛn sɛlɛkshɔn dɛn de sɔpɔt bak.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
Ɔda tin dɛn we dɛn kin yuz fɔ mek lɛbl dɛn we dɛn ayd

Asisten teknɔlɔji dɛn lɛk skrin rida dɛn go gɛt prɔblɛm wit yu fɔm dɛn if yu nɔ put lɛbl fɔ ɛvri input. Fɔ dɛn inlayn fɔm dɛn ya, yu kin ayd di lɛbl dɛn we yu de yuz di .sr-onlyklas. Ɔda we dɛn de fɔ gi lɛbl fɔ ɛp tɛknɔlɔji dɛn, lɛk di aria-label, aria-labelledbyɔ titleatribyut. If nɔbɔdi pan dɛn tin ya nɔ de, ɛp tɛknɔlɔji dɛn kin yuz di placeholderatribyut, if i de, bɔt notis se placeholderdɛn nɔ advays fɔ yuz am as ples fɔ ɔda we dɛn fɔ lɛbul.

Ɛp tɛks

Blɔk-lɛvel ɛp tɛks insay fɔm dɛn kin mek yuz .form-text(we dɛn bin de kɔl bifo tɛm as .help-blockinsay v3). Inlayn ɛp tɛks kin fleksibul implimɛnt yuz ɛni inlayn HTML ɛlimɛnt ɛn yutiliti klas dɛn lɛk .text-muted.

Fɔ jɔyn ɛp tɛks wit fɔm kɔntrol dɛn

Ɛp tɛks fɔ gɛt sɔntin fɔ du wit di fɔm kɔntrol we i gɛt fɔ du wit fɔ yuz di aria-describedbyatribyut. Dis go mek shɔ se di ɛtɛknɔlɔji dɛn we de ɛp—lɛk di wan dɛn we de rid di skrin—go anɔys dis ɛp tɛks we di pɔsin we de yuz am de pe atɛnshɔn ɔ go insay di kɔntrol.

Ɛp tɛks we de dɔŋ di input dɛn kin stayl wit .form-text. Dis klas inklud display: blockɛn ad sɔm tɔp margin fɔ izi spɛshal frɔm di input dɛn we de ɔp.

Yu paswɔd fɔ lɔng 8-20 aks, i fɔ gɛt lɛta ɛn nɔmba dɛn, ɛn i nɔ fɔ gɛt spɛshal aks dɛn, ɔ imɔji dɛn. 
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

Inlayn tɛks kin yuz ɛni tipik inlayn HTML ɛlimɛnt (ilɛksɛf na <small>, <span>, ɔ ɔda tin) we nɔ gɛt natin pas yutiliti klas.

I fɔ lɔng 8-20 aks. 
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

Fɔm dɛn we gɛt disabled

Ad di disabledboolean atribyut pan wan input fɔ mek yuz nɔ intarakshɔn ɛn mek i tan lɛk layt.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Ad di disabledatribyut to a <fieldset>fɔ disable ɔl di kɔntrol dɛn we de insay.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
      <label class="form-check-label" for="disabledFieldsetCheck">
        Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Caveat wit ankɔ dɛn

Bay difɔlt, brawza dɛn go trit ɔl di nativ fɔm kɔntrol dɛn ( <input>, <select>ɛn <button>ɛlimɛnt dɛn) insay a <fieldset disabled>as disabled, we go mek ɔl tu di kibɔd ɛn maws intarakshɔn pan dɛn. Bɔt if yu fɔm gɛt <a ... class="btn btn-*">ɛlimɛnt dɛn bak, dɛn go jɔs gi dɛn wan ya wan stayl we na pointer-events: none. As wi bin dɔn tɔk na di sɛkshɔn bɔt disabled stet fɔ bɔtin dɛn (ɛn spɛshal wan na di sab-sɛkshɔn fɔ ankɔ ɛlimɛnt dɛn), dis CSS prɔpati nɔ standad yet ɛn i nɔ fulɔp fɔ sɔpɔt am na Opera 18 ɛn dɔŋ ya, ɔ na Intanɛt Ɛksplɔrɔ 10, ɛn i win 't fɔ mek di wan dɛn we de yuz di kibɔd nɔ ebul fɔ fos ɔ aktiv dɛn link dɛn ya. So fɔ mek yu sef, yuz kɔstɔm JavaSkript fɔ disable dɛn kayn link dɛn de.

Krɔs-brauza kɔmpitibliti

Pan ɔl we Bootstrap go yuz dɛn stayl dɛn ya na ɔl di brawza dɛn, Intanɛt Ɛksplɔrɔ 11 ɛn dɔŋ ya nɔ de sɔpɔt di disabledatribyut ɔlsay na wan <fieldset>. Yuz kɔstɔm JavaSkript fɔ disable di fil sɛt na dɛn brɔuza dɛn ya.

Validɛshɔn fɔ di wok

Gi valyu, akshɔnable fidbak to yu yuza dɛn wit HTML5 fɔm validɛshɔn– we de na ɔl wi brawza dɛn we wi sɔpɔt . Pik frɔm di brawza difɔlt validɛshɔn fidbak, ɔ impruv kɔstɔm mɛsej dɛn wit wi bilt-in klas dɛn ɛn stata JavaSkript.

Wi rili kɔmɛnt fɔ kɔstɔm validɛshɔn stayl dɛn bikɔs dɛn nɔ de anɔys di nativ brawza difɔlt dɛn to di wan dɛn we de rid di skrin.

Aw i de wok

Na so fɔm validɛshɔn de wok wit Bootstrap:

  • HTML fɔm validɛshɔn de aplay via CSS in tu pseudo-klas dɛn, :invalidɛn :valid. I de aplay to <input>, <select>, ɛn <textarea>ɛlimɛnt dɛn.
  • Bootstrap de skɔp di :invalidɛn :validstayl dɛn to mama ɛn papa .was-validatedklas, dɛn kin yuz am fɔ di <form>. If nɔto dat, ɛni fil we dɛn nid we nɔ gɛt valyu go sho se i nɔ rayt we dɛn de lod di pej. Dis we ya, yu kin pik ustɛm fɔ aktiv dɛn (tipikli afta dɛn dɔn tray fɔ sɛn fɔm).
  • As fɔl bak, .is-invalidɛn .is-validklas dɛn kin yuz instead ɔf di pseudo-klas fɔ sava sayd validɛshɔn . Dɛn nɔ nid fɔ gɛt .was-validatedmama ɛn papa dɛn klas.
  • Bikɔs ɔf kɔnstrakshɔn dɛn na aw CSS de wok, wi nɔ go ebul (naw) fɔ yuz stayl dɛn to wan <label>we de kam bifo wan fɔm kɔntrol na di DOM if dɛn nɔ ɛp di kɔstɔm JavaSkript.
  • Ɔl di mɔdan brawza dɛn de sɔpɔt di kɔnstrakshɔn validɛshɔn API , we na wan siriɔs JavaSkript we fɔ validet fɔm kɔntrol dɛn.
  • Fidbak mɛsej dɛn kin yuz di brɔwza difɔlt dɛn (difrɛn fɔ ɛni brawza, ɛn dɛn nɔ kin stayl am bay CSS) ɔ wi kɔstɔm fidbak stayl dɛn wit ɔda HTML ɛn CSS.
  • Yu kin gi kɔstɔm validiti mɛsej dɛn wit setCustomValidityinsay JavaSkript.

Wit dat in maynd, tink bɔt di demo dɛn we de dɔŋ ya fɔ wi kɔstɔm fɔm validɛshɔn stayl dɛn, opshɔnal sava sayd klas dɛn, ɛn brawza difɔlt dɛn.

Kastom stayl dɛn

Fɔ kɔstɔm Bootstrap fɔm validɛshɔn mɛsej dɛn, yu go nid fɔ ad di novalidatebuli atribyut to yu <form>. Dis de mek di brɔwza difɔlt fidbak tultip dɛn nɔ wok, bɔt stil de gi yu akses to di fɔm validɛshɔn API dɛn na JavaSkript. Tray fɔ sɛn di fɔm we de dɔŋ ya; wi JavaSkript go intasept di sɔbmit bɔtin ɛn rilay fidbak to yu.

We yu de tray fɔ sɛn, yu go si di :invalidɛn :validstayl dɛn we dɛn yuz fɔ yu fɔm kɔntrol dɛn.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Brawza difɔlt dɛn

Yu nɔ intres pan kɔstɔm validɛshɔn fidbak mɛsej ɔ rayt JavaSkript fɔ chenj fɔm bihayvya? Ɔl gud, yu kin yuz di brɔwza difɔlt dɛn. Tray fɔ sɛn di fɔm we de dɔŋ ya. Dipen pan yu brawza ɛn OS, yu go si difrɛn stayl fɔ fidbak smɔl.

Pan ɔl we dɛn fidbak stayl ya nɔ go ebul fɔ stayl wit CSS, yu kin stil kɔstɔmayz di fidbak tɛks tru JavaSkript.

@ 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Serva sayd

Wi kin advays yu fɔ yuz klaynt sayd validɛshɔn, bɔt if yu nid sava sayd, yu kin sho se fɔm fil dɛn we nɔ rayt ɛn we valid wit .is-invalidɛn .is-valid. Notis se .invalid-feedbackdɛn de sɔpɔt bak wit dɛn klas ya.

I luk fayn!
I luk fayn!
@
Duya pik wan yuz nem.
Duya gi yu wan siti we go wok.
Duya gi wan valid stet.
Duya gi yu wan valid zip.
Yu fɔ gri bifo yu sɛn am. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Elemɛnt dɛn we dɛn sɔpɔt

Wi ɛgzampul fɔm dɛn de sho nativ tɛkstual <input>s ɔp, bɔt fɔm validɛshɔn stayl dɛn de fɔ wi kɔstɔm fɔm kɔntrol dɛn, bak.

Example invalid fidbak tɛks
Mɔ ɛgzampul invalid fidbak tɛks
Example invalid kɔstɔm sɛlɛkt fidbak
Example invalid kɔstɔm fayl fidbak 
<form class="was-validated">
  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

Tultip dɛn fɔ yuz

If yu fɔm layout alaw am, yu kin swap di .{valid|invalid}-feedbackklas dɛn fɔ .{valid|invalid}-tooltipklas dɛn fɔ sho validɛshɔn fidbak insay wan stayl tultip. Mek shɔ se yu gɛt mama ɔ papa wit position: relativepan am fɔ tultip pozishɔn. Insay di ɛgzampul we de dɔŋ ya, wi kɔlɔm klas dɛn dɔn ɔlrɛdi gɛt dis, bɔt yu prɔjek kin nid fɔ gɛt ɔda sɛtup.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Kɔstɔm fɔm dɛn

Fɔ ivin mɔ kɔstɔmayshɔn ɛn krɔs brawza kɔnsistɛns, yuz wi kɔmplit kɔstɔm fɔm ɛlimɛnt dɛn fɔ riples di brɔwza difɔlt dɛn. Dɛn bil dɛn pan ɔp sɛmantik ɛn aksesbul mak, so dɛn na sɔlid riplesmɛnt fɔ ɛni difɔlt fɔm kɔntrol.

Chɛkbɔks dɛn ɛn redio dɛn

Ɛni chɛkbɔks ɛn redio gɛt wan <div>wit wan brɔda ɛn sista <span>fɔ mek wi kɔstɔm kɔntrol ɛn a <label>fɔ di tɛks we de wit am. Structurally, dis na di sem we aw wi de du am difɔlt .form-check.

Wi de yuz di brɔda ɛn sista sɛlɛktɔ ( ~) fɔ ɔl wi <input>stet dɛn—lɛk :checked—fɔ stayl wi kɔstɔm fɔm indikɛtɔ fayn fayn wan. We wi jɔyn wit di .custom-control-labelklas, wi kin stayl di tɛks bak fɔ ɛni tin bay di <input>’s stet.

Wi de ayd di difɔlt <input>wit opacityɛn yuz di .custom-control-labelfɔ bil nyu kɔstɔm fɔm indikɛtɔ na in ples wit ::beforeɛn ::after. Na ɔnfɔni wi nɔ ebul fɔ bil kɔstɔm wan frɔm jɔs di <input>bikɔs CSS's contentnɔ de wok pan da ɛlimɛnt de.

Insay di stet dɛn we dɛn chɛk, wi de yuz base64 ɛmbaded SVG aykɔn dɛn frɔm Open Iconic . Dis de gi wi di bɛst kɔntrol fɔ stayl ɛn pozishɔn akɔdin to brawza ɛn divays dɛn.

Chɛkbɔks dɛn

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Kastom chɛkbɔks dɛn kin yuz di :indeterminatepseudo klas bak we dɛn sɛt wit dɛn an bay JavaSkript (no HTML atribyut nɔ de fɔ spɛsifa am).

If yu de yuz jQuery, sɔntin lɛk dis fɔ du fɔ:

$('.your-checkbox').prop('indeterminate', true)

Redio dɛn

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Inlayn

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Disebul

Yu kin disable di kɔstɔm chɛkbɔks ɛn redio dɛn bak. Ad di disabledboolean atribyut to di <input>ɛn di kɔstɔm indikɛtɔ ɛn di lɛbl diskripshɔn go ɔtomɛtik stayl.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>

Pik di mɛnyu

Kastom <select>mɛnyu dɛn nid jɔs wan kɔstɔm klas, .custom-selectfɔ trig di kɔstɔm stayl dɛn.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Yu kin pik bak frɔm smɔl ɛn big kɔstɔm sɛlɛkshɔn dɛn fɔ mach wi tɛks input dɛn we gɛt di sem sayz.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Di multipleatribyut de sɔpɔt bak:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

As na di sizeatribyut:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Fayl brawza

Di fayl input na di wan we gnarly pas ɔl pan di bɔnch ɛn i nid fɔ gɛt ɔda JavaSkript if yu want fɔ huk dɛn wit funkshɔn Choose fayl... ɛn fayl nem tɛks we yu dɔn pik.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Wi de ayd di difɔlt fayl <input>via opacityɛn insted stayl di <label>. Di bɔtin de jenarayz ɛn posishun wit ::after. Las las, wi deklare a widthɛn heightpan di <input>fɔ di rayt spays fɔ kɔntinyu fɔ de rawnd.

Fɔ translet ɔ kɔstɔmayt di string dɛn

Dɛn kin yuz di :lang()pseudo-klas fɔ alaw fɔ translet di “Browse” tɛks insay ɔda langwej dɛn. Ɔvarayd ɔ ad ɛntri dɛn to di $custom-file-textSass vɛriɔbul wit di rilevɛns langwej tɛg ɛn lokaliz string dɛn. Yu kin kɔstɔmayt di Inglish string dɛn di sem we. Fɔ ɛgzampul, na dis na aw pɔsin kin ad Spanish transleshɔn (Spanish in langwej kɔd na es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Na dis na lang(es)in akshɔn pan di kɔstɔm fayl input fɔ wan Spanish transleshɔn:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

Yu go nid fɔ sɛt di langwej fɔ yu dɔkyumɛnt (ɔ di sabtri fɔ am) kɔrɛkt wan fɔ mek dɛn sho di kɔrɛkt tɛks. Dis kin bi yuz di langatribyut we de na di <html>ɛlimɛnt ɔ di Content-LanguageHTTP hεda , wit ɔda we dɛn.