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

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

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

.card -> Bootstrap এ card তৈরি করার জন্য একটা in-built component. এই class এর under এ যা লিখা হবে bootstrap সেতাকে একটা card এর মত design করার চেষ্টা করবে।

.card-img-top -> এর মানে হল card এর মধ্যে image টা vertically (column wise) সবার উপরে থাকবে। যদি আপনি image টা সবার নিচে দেখাতে চান, সেক্ষেত্রে .card-img-bottom এই class টা ব্যবহার করতে হবে। .card-img-top এটা ব্যবহার করলে image এর top দুইটা corner rounded হবে, bottom corder দুইটা sharp হবে। উপরের image এর মত। আর .card-img-bottom এটা ব্যবহার করলে top corder দুইটা sharp হবে, নিচের corner দুইটা হবে rounded।

.card-body -> image ছাড়া আর বাকি যত content আপনি card এর মধ্যে দিতে চান সব গুলোকে bootstrap card এর body হিসেবে বিবেচনা করেছে এবং সেই হিসেবেই design করেছে। তাই এই class টি ব্যবহার করা হয়।

.card-title -> card body content এর title এর styling দেওয়ার জন্য এই class ব্যবহার করা হয়েছে।

.card-text -> card body content এর text এর styling দেওয়ার জন্য এই class ব্যবহার করা হয়েছে। Normally এটা দেখে আপনার কাছে মনে হতে পারে এটা p এর কাজই করছে। আসলেও করছে অনেকটা তাইই। তবে এই ক্লাস এর under এ bootstrap নিজের মত করে কিছু assignment, spacing সেট করে দিয়েছে।

~let's_code_your_career
~happy_coding