Bootstrap Clearfix Class: ফ্লোট ক্লিয়ার করা

Bootstrap-এ যেকোনো এলিমেন্টের ফ্লোট (float) ক্লিয়ার করার জন্য .clearfix ক্লাস ব্যবহার করা হয়। এটি প্যারেন্ট কন্টেইনারের মধ্যে ফ্লোট করা চাইল্ড এলিমেন্টের পরে স্পেস তৈরি করে।

উদাহরণ

নিচের উদাহরণে বামে এবং ডানে ফ্লোট করা দুটি ডিভের প্যারেন্টে clearfix ব্যবহার করা হয়েছে:

<!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>
    <div class="clearfix" style="background: orange; border: 1px solid #000; padding: 10px;">
      <div class="pull-left" style="background:#58D3F7;">
        বামে ফ্লোট
      </div>
      <div class="pull-right" style="background: #DA81F5;">
        ডানে ফ্লোট
      </div>
    </div>
  </body>
</html>

নোট: আধুনিক CSS-এ display: flow-root বা Flexbox/Grid ব্যবহার করে আরও সহজে ফ্লোট ক্লিয়ার করা যায়।