मुख्य सामग्री पर जाउ डॉक्स नेविगेशन पर जाउ
Check
in English

नक्शा

अपन फॉर्म कें किछु संरचना दिअ-इनलाइन सं ल क क्षैतिज सं ल क कस्टम ग्रिड कार्यान्वयन-हमर फॉर्म लेआउट विकल्पक कें साथ.

रूप

रूप क्षेत्रक प्रत्येक समूह एकटा <form>तत्व मे निवास करबाक चाही। बूटस्ट्रैप तत्व कें लेल कोनों डिफ़ॉल्ट स्टाइलिंग नहि प्रदान करयत छै <form>, मुदा किछ शक्तिशाली ब्राउज़र सुविधा छै जे डिफ़ॉल्ट रूप सं उपलब्ध करायल गेल छै.

  • ब्राउज़र फॉर्म मे नव? उपलब्ध विशेषताक कें अवलोकन आ पूरा सूची कें लेल एमडीएन फॉर्म डॉक्स कें समीक्षा करय पर विचार करूं .
  • <button><form>s एकटा डिफ़ॉल्ट के भीतर type="submit", अतः विशिष्ट बनबाक प्रयास करू आ सदिखन एकटा शामिल करू type.

चूँकि बूटस्ट्रैप लागू होय छै display: blockआरू width: 100%लगभग हमरऽ सब फॉर्म नियंत्रण प॑, फॉर्म डिफ़ॉल्ट रूप स॑ लंबवत ढेर होय जैतै । अतिरिक्त वर्गक कें उपयोग प्रति-फॉर्म आधार पर अइ लेआउट मे बदलाव करय कें लेल कैल जा सकय छै.

उपयोगिताएँ

फॉर्म मे किछ संरचना जोड़य कें लेल मार्जिन यूटिलिटीज सब सं आसान तरीका छै. इ लेबल, नियंत्रण, वैकल्पिक फॉर्म पाठ, आ फॉर्म सत्यापन संदेश कें बुनियादी समूहीकरण प्रदान करयत छै. हम margin-bottomउपयोगिता सं चिपकय कें सलाह दैत छी, आ स्थिरता कें लेल पूरा फॉर्म मे एकटा दिशा कें उपयोग करूं.

बेझिझक अपन रूप जेना चाहब, <fieldset>s, <div>s, वा लगभग कोनो आन तत्वक संग बनाउ।

एचटीएमएल
<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>

फॉर्म ग्रिड

हमर ग्रिड क्लास कें उपयोग करयत बेसि जटिल फॉर्म बनायल जा सकय छै. फॉर्म लेआउट कें लेल एकर उपयोग करूं जइ मे अनेक कॉलम, विविध चौड़ाई, आ अतिरिक्त संरेखण विकल्पक कें आवश्यकता होयत छै. Sass चर क' सक्षम (डिफ़ॉल्ट रूप सँ चालू) करबाक आवश्यकता अछि .$enable-grid-classes

एचटीएमएल
<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>

गटर

By adding gutter modifier classes , आप गटर चौड़ाई पर नियंत्रण रख सकते हैं के साथ-साथ इनलाइन के रूप में ब्लॉक दिशा. साथ ही $enable-grid-classesSass चर क॑ सक्षम (डिफ़ॉल्ट रूप स॑ चालू) करलऽ जाय के आवश्यकता छै ।

एचटीएमएल
<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>

ग्रिड सिस्टम सं बेसि जटिल लेआउट सेहो बनायल जा सकय छै.

एचटीएमएल
<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>

क्षैतिज रूप

.rowसमूहक कें रूप मे क्लास कें जोड़य आ .col-*-*अपनय लेबल आ नियंत्रणक कें चौड़ाई निर्दिष्ट करय कें लेल क्लास कें उपयोग करयत ग्रिड कें साथ क्षैतिज रूप बनावा . .col-form-labelअपनऽ s म॑ भी जोड़ना सुनिश्चित करऽ <label>ताकि वू अपनऽ संबद्ध फॉर्म नियंत्रण के साथ लंबवत केंद्रित होय ।

कखनो काल, अहां कें शायद मार्जिन या पैडिंग उपयोगिता कें उपयोग करय कें जरूरत होयत छै ताकि अहां कें जरूरत कें ओ सही संरेखण बना सकय. उदाहरण के लेल, हम padding-topअपन ढेर रेडियो इनपुट लेबल पर हटा देलौं पाठ बेसलाइन के बेहतर संरेखित करय लेल.

रेडियो के
एचटीएमएल
<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>

क्षैतिज रूप लेबल आकार

कें आकार कें सही ढंग सं पालन करय कें लेल या अपन s या .col-form-label-sms कें उपयोग करनाय सुनिश्चित करूं ..col-form-label-lg<label><legend>.form-control-lg.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>

कॉलम साइजिंग

जैना की पिछला उदाहरणक मे दिखायल गेल छै, हमर ग्रिड सिस्टम अहां कें कोनों संख्या मे .cols कें एकटा कें भीतर रखय कें अनुमति देयत छै .row. उपलब्ध चौड़ाई के बराबर के बीच में बांट देत। अहां अपन कॉलम के एकटा उपसमूह सेहो चुनि सकय छी जे कम-बेसी जगह लेबय, जखन कि शेष .cols बाकी के समान रूप सं विभाजित करैत अछि, विशिष्ट कॉलम क्लास के संग जेना .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>

ऑटो-साइजिंग

नीचा देल गेल उदाहरण सामग्री कें लंबवत केंद्रित करय कें लेल एकटा फ्लेक्सबॉक्स उपयोगिता कें उपयोग करय छै आ बदलय .colछै .col-autoताकि अहां कें कॉलम केवल जरूरत कें हिसाब सं ओतेक जगह लेतय. दोसर तरहेँ कहल जाय तँ स्तंभ सामग्रीक आधार पर स्वयं आकार लैत अछि ।

@ .
एचटीएमएल
<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>

तखन अहाँ ओहि एक बेर फेर साइज-विशिष्ट कॉलम क्लास सँ रिमिक्स क' सकैत छी.

@ .
एचटीएमएल
<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>

इनलाइन फार्म

.row-cols-*प्रतिक्रियाशील क्षैतिज लेआउट बनाबय लेल कक्षाक उपयोग करू . गटर संशोधक वर्ग जोड़ला स , हमरा सब लग क्षैतिज आ ऊर्ध्वाधर दिशा मे गटर होयत। संकीर्ण मोबाइल व्यूपोर्ट पर, .col-12फॉर्म नियंत्रण आओर बहुत किछु ढेर करय मे मदद करैत अछि. द .align-items-centerरूप तत्व क॑ बीच म॑ संरेखित करै छै, जेकरा स॑ .form-checkसही ढंग स॑ संरेखित करलऽ जाय छै ।

@ .
एचटीएमएल
<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>