DEV Community

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

Posted on • Edited on

1

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

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

Image description

<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>
Enter fullscreen mode Exit fullscreen mode

.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

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more