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

मांडणी

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

फॉर्म

फॉर्म फील्डचा प्रत्येक गट एका <form>घटकामध्ये असावा. बूटस्ट्रॅप घटकासाठी डीफॉल्ट शैली प्रदान करत नाही <form>, परंतु काही शक्तिशाली ब्राउझर वैशिष्ट्ये आहेत जी डीफॉल्टनुसार प्रदान केली जातात.

  • ब्राउझर फॉर्मसाठी नवीन? विहंगावलोकन आणि उपलब्ध विशेषतांच्या पूर्ण सूचीसाठी MDN फॉर्म डॉक्सचे पुनरावलोकन करण्याचा विचार करा .
  • <button>च्या <form>डीफॉल्टमध्ये आहे type="submit", म्हणून विशिष्ट असण्याचा प्रयत्न करा आणि नेहमी a समाविष्ट करा type.

बूटस्ट्रॅप लागू होत असल्याने display: blockआणि width: 100%आमच्या जवळजवळ सर्व फॉर्म नियंत्रणांवर, फॉर्म डीफॉल्टनुसार अनुलंब स्टॅक केले जातील. प्रति-फॉर्म आधारावर या लेआउटमध्ये बदल करण्यासाठी अतिरिक्त वर्ग वापरले जाऊ शकतात.

उपयुक्तता

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

<fieldset>s, <div>s, किंवा इतर कोणत्याही घटकांसह, तुम्हाला आवडेल तसे तुमचे फॉर्म तयार करण्यास मोकळ्या मनाने .

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>

फॉर्म ग्रिड

आमचे ग्रिड वर्ग वापरून अधिक जटिल फॉर्म तयार केले जाऊ शकतात. हे फॉर्म लेआउटसाठी वापरा ज्यासाठी एकाधिक स्तंभ, विविध रुंदी आणि अतिरिक्त संरेखन पर्याय आवश्यक आहेत. Sass व्हेरिएबल सक्षम करणे आवश्यक$enable-grid-classes आहे (डीफॉल्टनुसार चालू).

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>

गटार

गटर मॉडिफायर वर्ग जोडून , ​​तुम्ही गटरच्या रुंदीवर तसेच ब्लॉक दिशा म्हणून इनलाइनवर नियंत्रण ठेवू शकता. तसेच $enable-grid-classesSass व्हेरिएबल सक्षम करणे आवश्यक आहे (डीफॉल्टनुसार चालू).

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>

ग्रिड प्रणालीसह अधिक जटिल लेआउट देखील तयार केले जाऊ शकतात.

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>

क्षैतिज फॉर्म

.rowगट तयार करण्यासाठी वर्ग जोडून .col-*-*आणि तुमच्या लेबल्स आणि नियंत्रणांची रुंदी निर्दिष्ट करण्यासाठी वर्ग वापरून ग्रिडसह क्षैतिज फॉर्म तयार करा. .col-form-labelतुमच्या s मध्ये देखील जोडण्याची खात्री करा <label>जेणेकरून ते त्यांच्या संबंधित फॉर्म नियंत्रणांसह अनुलंब केंद्रीत असतील.

काही वेळा, तुम्हाला आवश्यक ते परिपूर्ण संरेखन तयार करण्यासाठी तुम्हाला मार्जिन किंवा पॅडिंग युटिलिटी वापरण्याची आवश्यकता असू शकते. उदाहरणार्थ, padding-topमजकूर बेसलाइन चांगल्या प्रकारे संरेखित करण्यासाठी आम्ही आमच्या स्टॅक केलेले रेडिओ इनपुट लेबल काढून टाकले आहे.

रेडिओ
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>

क्षैतिज फॉर्म लेबल आकार

आणि चा आकार योग्यरित्या फॉलो करण्यासाठी तुमच्या s किंवा .col-form-label-sms चा वापर केल्याची खात्री करा ..col-form-label-lg<label><legend>.form-control-lg.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>

स्तंभ आकारमान

मागील उदाहरणांमध्ये दाखवल्याप्रमाणे, आमची ग्रिड सिस्टीम तुम्हाला a मध्ये कितीही .cols ठेवण्याची परवानगी देते .row. ते उपलब्ध रुंदी त्यांच्यामध्ये समान प्रमाणात विभाजित करतील. तुम्ही कमी किंवा जास्त जागा घेण्यासाठी तुमच्या स्तंभांचा एक उपसंच देखील निवडू शकता, तर उर्वरित .colभाग समान रीतीने, विशिष्ट स्तंभ वर्गांसह विभाजित करू शकता .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>

स्वयं-आकार

खालील उदाहरण सामग्रीला अनुलंब मध्यभागी ठेवण्यासाठी फ्लेक्सबॉक्स युटिलिटी वापरते आणि त्यात बदल .colकरते .col-autoजेणेकरून तुमचे स्तंभ आवश्यक तेवढीच जागा घेतात. दुसरा मार्ग सांगा, स्तंभाचा आकार सामग्रीवर आधारित असतो.

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

त्यानंतर तुम्ही ते पुन्हा एकदा आकार-विशिष्ट स्तंभ वर्गांसह रीमिक्स करू शकता.

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

इनलाइन फॉर्म

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

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