Bootstrap Hidden Class: এলিমেন্ট লুকিয়ে রাখা

Bootstrap-এ যেকোনো এলিমেন্ট লুকিয়ে রাখার জন্য .hidden ক্লাস ব্যবহার করা হয়। এটি এলিমেন্টকে ডিসপ্লে থেকে সরিয়ে দেয় কিন্তু DOM-এ রেখে দেয়।

উদাহরণ

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

<!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="row" style="padding: 91px 100px 19px 50px;">
      <div class="show" style="margin-left:10px; width:300px; background-color:#ccc;">
        এই ক্লাসটি দৃশ্যমান।
      </div>
      <div class="hidden" style="width:200px; background-color:#ccc;">
        এটি hidden ক্লাসের উদাহরণ। এটি লুকানো থাকবে।
      </div>
    </div>
  </body>
</html>

নোট: Bootstrap 4-এ hidden ক্লাসটি রেসপন্সিভ ইউটিলিটি ক্লাসে পরিবর্তন হয়েছে (যেমন d-none, d-sm-block ইত্যাদি)।