স্কিপ করে মূল কন্টেন্ট এ যাও ডক্স নেভিগেশন এড়িয়ে যান
Check
in English

লেআউট

আমাদের ফর্ম লেআউট বিকল্পগুলির সাথে আপনার ফর্মগুলিকে কিছু কাঠামো দিন—ইনলাইন থেকে অনুভূমিক থেকে কাস্টম গ্রিড বাস্তবায়ন।

ফর্ম

ফর্ম ফিল্ডের প্রতিটি গ্রুপ একটি <form>উপাদানে থাকা উচিত। বুটস্ট্র্যাপ উপাদানটির জন্য কোনও ডিফল্ট স্টাইলিং প্রদান করে না <form>, তবে কিছু শক্তিশালী ব্রাউজার বৈশিষ্ট্য রয়েছে যা ডিফল্টরূপে সরবরাহ করা হয়।

  • ব্রাউজার ফর্ম নতুন? উপলব্ধ বৈশিষ্ট্যগুলির একটি ওভারভিউ এবং সম্পূর্ণ তালিকার জন্য MDN ফর্ম ডক্স পর্যালোচনা করার কথা বিবেচনা করুন ৷
  • <button>একটি <form>ডিফল্টের মধ্যে type="submit"রয়েছে, তাই নির্দিষ্ট হওয়ার চেষ্টা করুন এবং সর্বদা একটি অন্তর্ভুক্ত করুন 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>

কলাম সাইজিং

পূর্ববর্তী উদাহরণগুলিতে দেখানো হয়েছে, আমাদের গ্রিড সিস্টেম আপনাকে একটি এর মধ্যে যে কোনো সংখ্যক .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>

ইনলাইন ফর্ম

Use the .row-cols-* classes to create responsive horizontal layouts. By adding gutter modifier classes, we’ll have gutters in horizontal and vertical directions. On narrow mobile viewports, the .col-12 helps stack the form controls and more. The .align-items-center aligns the form elements to the middle, making the .form-check align properly.

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