Wiesselt op den Haaptinhalt Wiesselt op d'Docs Navigatioun
Check
in English

Layout

Gitt Är Formen eng Struktur - vun inline bis horizontal bis personaliséiert Gitterimplementatiounen - mat eise Formlayoutoptiounen.

Op dëser Säit

Formen

All Grupp vu Formfelder soll an engem <form>Element wunnen. Bootstrap stellt kee Standard Styling fir d' <form>Element, awer et ginn e puer mächteg Browserfeatures déi standardiséiert ginn.

  • Nei zu Browser Formen? Betruecht d'MDN Form Dokumenter ze iwwerpréiwen fir en Iwwerbléck a komplett Lëscht vun verfügbaren Attributer.
  • <button>s bannent engem <form>Default ze type="submit", also striewen spezifesch ze sinn an ëmmer eng enthalen type.

Zënter Bootstrap gëlt display: blocka width: 100%fir bal all eis Form Kontrollen, Forme ginn standardiséiert vertikal gestapelt. Zousätzlech Klassen kënne benotzt ginn fir dëse Layout op enger Performbasis ze variéieren.

Utilities

Margin Utilities sinn deen einfachste Wee fir eng Struktur op Formen ze addéieren. Si bidden Basis Gruppéierung vun Etiketten, Kontrollen, optional Form Text, a Form Validatioun Messagerie. Mir recommandéieren Iech un margin-bottomUtilities ze halen, an eng eenzeg Richtung uechter d'Form ze benotzen fir Konsistenz.

Fillt gratis Är Formen ze bauen wéi Dir wëllt, mat <fieldset>s, <div>s, oder bal all aner Element.

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

Form Gitter

Méi komplex Forme kënne mat eise Gitterklassen gebaut ginn. Benotzt dës fir Form Layouten déi verschidde Kolonnen, variéiert Breeten an zousätzlech Ausriichtungsoptiounen erfuerderen. Verlaangt datt d' $enable-grid-classesSass Variabel aktivéiert ass (op Standard).

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

Gutters

Andeems Dir Rennmodifikateur Klassen bäidréit , kënnt Dir Kontroll iwwer d'Grennebreet an der Inline wéi och an der Blockrichtung hunn. Erfuerdert och datt d' $enable-grid-classesSass Variabel aktivéiert ass (op Standard).

html 
<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

Méi komplex Layouten kënnen och mam Gittersystem erstallt ginn.

html 
<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Email</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>
  <div class="col-12">
    <label for="inputAddress" class="form-label">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">City</label>
    <input type="text" class="form-control" id="inputCity">
  </div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">State</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-2">
    <label for="inputZip" class="form-label">Zip</label>
    <input type="text" class="form-control" id="inputZip">
  </div>
  <div class="col-12">
    <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>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</form>

Horizontal Form

Erstellt horizontale Forme mam Gitter andeems Dir d' .rowKlass bäidréit fir Gruppen ze bilden an d' .col-*-*Klassen ze benotzen fir d'Breet vun Ären Etiketten a Kontrollen ze spezifizéieren. Gitt sécher och .col-form-labelop Är <label>s ze addéieren sou datt se vertikal mat hiren assoziéierte Formkontrolle zentréiert sinn.

Heiansdo musst Dir vläicht Margin oder Padding Utilities benotzen fir déi perfekt Ausrichtung ze kreéieren déi Dir braucht. Zum Beispill hu mir den padding-topop eisem gestapelten Radio-Input Label geläscht fir d'Textbaseline besser auszegläichen.

Radioen
html 
<form>
  <div class="row mb-3">
    <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">
    </div>
  </div>
  <div class="row mb-3">
    <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">
    </div>
  </div>
  <fieldset class="row mb-3">
    <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>
  </fieldset>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <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>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Horizontal Form Label Gréisst

Gitt sécher ze benotzen .col-form-label-smoder .col-form-label-lgop Är <label>s oder <legend>s fir d'Gréisst vun .form-control-lga richteg ze verfollegen .form-control-sm.

html 
<div class="row mb-3">
  <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="row mb-3">
  <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="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>

Kolonn Gréisst

Wéi an de fréiere Beispiller gewisen, erlaabt eise Gittersystem Iech all Zuel vu .cols an engem .row. Si verdeelen déi verfügbar Breet gläich tëscht hinnen. Dir kënnt och e Subset vun Äre Spalten auswielen fir méi oder manner Plaz opzehuelen, während déi verbleiwen .cols de Rescht gläich deelen, mat spezifesche Kolonnklassen wéi .col-sm-7.

html 
<div class="row g-3">
  <div class="col-sm-7">
    <input type="text" class="form-control" placeholder="City" aria-label="City">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="State" aria-label="State">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
  </div>
</div>

Automatesch Gréisst

D'Beispill hei drënner benotzt e Flexbox Utility fir den Inhalt vertikal ze zentréieren an z'änneren .colsou .col-autodatt Är Kolonnen nëmmen esou vill Plaz ophuelen wéi néideg. Anescht gesot, d'Kolonngréisst selwer baséiert op den Inhalt.

@
html 
<form class="row gy-2 gx-3 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInput">Name</label>
    <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
    </div>
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingSelect">Preference</label>
    <select class="form-select" id="autoSizingSelect">
      <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">
    <div class="form-check">
      <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">Submit</button>
  </div>
</form>

Dir kënnt dat dann nach eng Kéier mat Gréisst-spezifesch Kolonn Klassen remixen.

@
html 
<form class="row gx-3 gy-2 align-items-center">
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputName">Name</label>
    <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
    </div>
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeSelect">Preference</label>
    <select class="form-select" id="specificSizeSelect">
      <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">
    <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">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

Inline Formen

Benotzt d' .row-cols-*Klassen fir reaktiounsfäeger horizontal Layouten ze kreéieren. Andeems Dir Rennenmodifizéierungsklassen bäidréit , hu mir Rennen an horizontalen a vertikale Richtungen. Op schmuel mobil viewports .col-12hëlleft der Form Kontrollen Stack a méi. D' .align-items-centeralignéiert d'Formelementer an d'Mëtt, sou datt d' .form-checkAusrichtung richteg ass.

@
html 
<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
    </div>
  </div>

  <div class="col-12">
    <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
    <select class="form-select" id="inlineFormSelectPref">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="inlineFormCheck">
      <label class="form-check-label" for="inlineFormCheck">
        Remember me
      </label>
    </div>
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>