Bootstrap-এ ফর্মের উচ্চতা এবং প্রস্থ নিয়ন্ত্রণ: input-lg, input-sm, col-lg-*

Bootstrap-এ ফর্ম ইনপুটের উচ্চতা এবং প্রস্থ নিয়ন্ত্রণের জন্য .input-lg, .input-sm এবং গ্রিড ক্লাস যেমন .col-lg-* ব্যবহার করা হয়।

উদাহরণ

নিচের কোড চালিয়ে বিভিন্ন আকারের ইনপুট এবং সিলেক্ট বক্স এবং কলাম প্রস্থ দেখুন:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Example</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
  </head>
  <body>
    <form role="form">
      <div class="form-group">
        <input class="form-control input-lg" type="text" placeholder=".input-lg">
      </div>
      <div class="form-group">
        <input class="form-control" type="text" placeholder="Default input">
      </div>
      <div class="form-group">
        <input class="form-control input-sm" type="text" placeholder=".input-sm">
      </div>
      <div class="form-group"></div>
      <div class="form-group">
        <select class="form-control input-lg">
          <option value="">.input-lg</option>
        </select>
      </div>
      <div class="form-group">
        <select class="form-control">
          <option value="">Default select</option>
        </select>
      </div>
      <div class="form-group">
        <select class="form-control input-sm">
          <option value="">.input-sm</option>
        </select>
      </div>
      <div class="row">
        <div class="col-lg-2">
          <input type="text" class="form-control" placeholder=".col-lg-2">
        </div>
        <div class="col-lg-3">
          <input type="text" class="form-control" placeholder=".col-lg-3">
        </div>
        <div class="col-lg-4">
          <input type="text" class="form-control" placeholder=".col-lg-4">
        </div>
      </div>
    </form>
  </body>
</html>

ব্যাখ্যা:

• input-lg এবং input-sm ইনপুটের উচ্চতা বড় বা ছোট করে।
• col-lg-* ক্লাসগুলো ফর্ম ইলিমেন্টের প্রস্থ নিয়ন্ত্রণ করে।