مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
Check
in English

ترتیب

ہمارے فارم لے آؤٹ کے اختیارات کے ساتھ اپنے فارم کو کچھ ڈھانچہ دیں — ان لائن سے افقی تک اپنی مرضی کے مطابق گرڈ کے نفاذ تک۔

فارمز

<form>فارم فیلڈز کے ہر گروپ کو ایک عنصر میں رہنا چاہیے ۔ بوٹسٹریپ عنصر کے لیے کوئی ڈیفالٹ اسٹائل فراہم نہیں کرتا <form>، لیکن براؤزر کی کچھ طاقتور خصوصیات ہیں جو بطور ڈیفالٹ فراہم کی جاتی ہیں۔

  • براؤزر فارمز میں نئے ہیں؟ ایک جائزہ اور دستیاب صفات کی مکمل فہرست کے لیے MDN فارم دستاویزات کا جائزہ لینے پر غور کریں ۔
  • <button><form>کے ڈیفالٹ کے اندر ہے type="submit"، لہذا مخصوص ہونے کی کوشش کریں اور ہمیشہ ایک شامل کریں type۔

چونکہ بوٹسٹریپ لاگو ہوتا ہے display: blockاور width: 100%ہمارے تقریباً تمام فارم کنٹرولز پر، فارمز بطور ڈیفالٹ عمودی طور پر اسٹیک ہوں گے۔ فی فارم کی بنیاد پر اس ترتیب کو تبدیل کرنے کے لیے اضافی کلاسز کا استعمال کیا جا سکتا ہے۔

افادیت

مارجن یوٹیلیٹیز فارم میں کچھ ڈھانچہ شامل کرنے کا سب سے آسان طریقہ ہے۔ وہ لیبلز، کنٹرولز، اختیاری فارم ٹیکسٹ، اور فارم کی توثیق کے پیغامات کی بنیادی گروپ بندی فراہم کرتے ہیں۔ ہم margin-bottomیوٹیلیٹیز پر قائم رہنے، اور مستقل مزاجی کے لیے پورے فارم میں ایک ہی سمت استعمال کرنے کی تجویز کرتے ہیں۔

<fieldset><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 یا s .col-form-label-smکو .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>

کالم کا سائز

جیسا کہ پچھلی مثالوں میں دکھایا گیا ہے، ہمارا گرڈ سسٹم آپ کو کسی بھی تعداد میں .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>