বুটস্ট্রাপ Modal কম্পোনেন্ট এর ক্লাসগুলোর সহজ, সিম্পল বিশ্লেষণ

Bootstrap তাদের modal component এর code এ কোন কোন class কেন ব্যবহার করেছে সেটা আমরা আজকে এখানে কিছুটা আলোচনা করার চেষ্টা করব।

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

modal -> Normally কোনও website এ modal যেরকম হয় সেরকম type একটা styling দেওয়ার জন্য এই class দেওয়া হয়েছে। চাইলে এই ক্লাস টা রিমুভ করে দেখুন অউটপুট কিরকম আসে।

modal-dialog -> কোনও button এ click করার পর যেই pop-up box টা modal hisebe open হওয়ার কথা সেটাই আসবেনা, full screen টা just blur হয়ে থাকবে।

modal-content -> modal এর whole content এই class এর under এ রাখা হয়।

modal-header -> modal এর content কে styling সুবিধার জন্য ৩ ভাগে ভাগ করা হয়েছে। header, body, footer. Header এর content গুলো এই class এর under এ রাখা হয়েছে।

modal-title -> header এর মধ্যে title দিতে এটা ব্যাবহার করা হয়েছে।

modal-body -> body র content গুলো এর মধ্যে রাখা হয়েছে।

modal-footer -> footer এর content গুলো এর মধ্যে রাখা হয়েছে।

~let's_code_your_career
~happy_coding!