কম্পিউটার টিউটোরিয়াল

Bootstrap Button Group Classes: বাটন গোষ্ঠী তৈরি করা


Bootstrap-এ একাধিক বাটনকে একসাথে গোষ্ঠীবদ্ধ করার জন্য .btn-group ক্লাস ব্যবহার করা হয়। এটি বাটনগুলোকে পাশাপাশি রাখে এবং দেখতে একটি একক কন্ট্রোলের মতো লাগে।

উদাহরণ

নিচের কোডে তিনটি বাটন একটি গোষ্ঠীতে রাখা হয়েছে:

<!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>
    <p>নিচে বাটন গোষ্ঠী দেওয়া হলো:</p>
    <div class="btn-group">
      <button type="button" class="btn btn-default">A</button>
      <button type="button" class="btn btn-default">B</button>
      <button type="button" class="btn btn-default">C</button>
    </div>
  </body>
</html>

বিবিধতা: .btn-group-vertical ব্যবহার করে উল্লম্ব বাটন গোষ্ঠী, .btn-toolbar ব্যবহার করে একাধিক গ্রুপ একসাথে টুলবার তৈরি করা যায়।

  1. Bootstrap বাটন

  2. CSS দিয়ে ভার্টিক্যাল বাটন গ্রুপ তৈরি

  3. CSS দিয়ে হরিজন্টাল বাটন গ্রুপ তৈরি

  4. User Rights Assignment-এ Add User or Group বাটন গ্রে-আউট সমাধান