Buuka ku bigambo ebikulu Buuka ku docs navigation
in English

Okulambulula

Wa foomu zo ensengeka ezimu —okuva mu layini okutuuka ku horizontal okutuuka ku custom grid implementations —n'enkola zaffe ez'ensengeka ya foomu.

Ku muko guno

Ffoomu

Buli kibinja ky’ennimiro za ffoomu kisaana okubeera mu <form>elementi. Bootstrap tewa sitayiro ya default eri <form>element, naye waliwo ebimu ku bikozesebwa bya browser eby'amaanyi ebiweebwa nga default.

  • Kipya ku foomu za browser? Lowooza ku kwekenneenya ebiwandiiko bya foomu ya MDN okufuna okulambika n’olukalala olujjuvu olw’ebintu ebiriwo.
  • <button>s within a <form>default to type="submit", kale fuba okuba specific era bulijjo oteekemu a type.
  • Osobola okulemesa buli kitundu kya ffoomu munda mu foomu ng'olina disabledekintu ekiri ku <form>.

Okuva Bootstrap bwekola display: blockera width: 100%kumpi ku bifuga byaffe byonna ebya foomu, foomu zijja by default stack vertically. Ebika ebirala bisobola okukozesebwa okukyusakyusa ensengeka eno ku musingi gwa buli ffoomu.

Ebikozesebwa

Margin utilities y’engeri ennyangu ey’okwongerako ensengeka ezimu ku foomu. Ziwa okugatta okusookerwako okw'ebiwandiiko, ebifuga, ebiwandiiko bya foomu eby'okwesalirawo, n'obubaka obukakasa foomu. Tukuwa amagezi okunywerera ku margin-bottombikozesebwa, n’okukozesa obulagirizi bumu mu ffoomu yonna okusobola okukwatagana.

Wulira nga oli wa ddembe okuzimba ffoomu zo mu ngeri gy’oyagala, nga olina <fieldset>s, <div>s, oba kumpi ekintu ekirala kyonna.

<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>

Ffoomu grid

Ffoomu ezisingako obuzibu zisobola okuzimbibwa nga tukozesa kiraasi zaffe eza grid. Kozesa bino ku nsengeka za foomu ezeetaaga empagi eziwera, obugazi obw'enjawulo, n'enkola endala ez'okulaganya. Yeetaaga $enable-grid-classesenkyukakyuka ya Sass okusobozesa (on by default).

<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>

Emifulejje

By adding gutter modifier classes , osobola okuba n’obuyinza ku gutter obugazi mu nga bwe kiri mu inline nga block direction. Era kyetaagisa $enable-grid-classesenkyukakyuka ya Sass okusobozesa (on by default).

<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>

Ensengeka ezisingako obuzibu nazo zisobola okutondebwawo n’enkola ya grid.

<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>

Ekifaananyi eky’okwebungulula

Tonda foomu eziwanvuwa ne giridi ng’ogattako .rowkiraasi okukola ebibinja era ng’okozesa .col-*-*kiraasi okulaga obugazi bw’ebiwandiiko byo n’ebifuga. Kakasa nti oyongera .col-form-labelku <label>s zo nga bwe ziri vertically centered ne form controls zaabwe ezikwatagana.

Oluusi, oyinza okuba nga weetaaga okukozesa margin oba padding utilities okukola alignment eyo entuufu gye weetaaga. Okugeza, tuggyewo ku padding-topku stacked radio inputs label yaffe okusobola okukwataganya obulungi text baseline.

Leediyo 
<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>

Okugerageranya obunene bw’akabonero ka foomu mu ngeri ey’okwebungulula

Kakasa nti okozesa .col-form-label-smoba .col-form-label-lgeri <label>s oba <legend>s yo okugoberera obulungi obunene bwa .form-control-lgne .form-control-sm.

<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>

Okugerageranya obunene bw’empagi

Nga bwe kiragibwa mu byokulabirako ebiyise, enkola yaffe eya giridi ekusobozesa okuteeka omuwendo gwonna ogwa .cols munda mu .row. Bajja kugabanya obugazi obuliwo kyenkanyi wakati waabwe. Oyinza n’okulonda ekitundu ekitono eky’ennyiriri zo okutwala ekifo ekiwera oba ekitono, ate .cols ezisigadde ne zigabanya kyenkanyi ebisigadde, nga waliwo ebika by’ennyiriri ebitongole nga .col-sm-7.

<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>

Okukola sayizi mu ngeri ey’okwekolako

Ekyokulabirako wansi kikozesa ekintu ekiyitibwa flexbox utility okuteeka ebirimu wakati mu vertikal era ne kikyuka .colokutuuka .col-autoennyiriri zo ne zitwala ekifo ekiwera kyokka nga bwe kyetaagisa. Mu ngeri endala, ennyiriri zeekula okusinziira ku birimu.

@ 
<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>

Olwo osobola okuddamu okutabula ekyo omulundi omulala ne size-specific column classes.

@ 
<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>

Ffoomu eziri mu layini

Kozesa .row-cols-*kiraasi okukola ensengeka ez’okwebungulula eziddamu. By adding gutter modifier classes , tujja kuba ne gutters mu ndagiriro ez’okwebungulula n’ez’okwesimbye. Ku bifo ebifunda eby’okulaba ku ssimu, .col-12eyamba okutunga ebifuga foomu n’ebirala. The .align-items-centerekwataganya elementi za ffoomu okutuuka wakati, n’ekola .form-checkboxokulaganya obulungi.

@ 
<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>