Bootstrap 5 แผง

কার্ড

Bootstrap 5-এর কার্ড

মৌলিক কার্ড

একটি মৌলিক কার্ড .card ক্লাস দ্বারা তৈরি করা হয়, কার্ডের কনটেন্টে একটি .card-body ক্লাস:

উদাহরণ

<div class="card">
  <div class="card-body">মৌলিক কার্ড</div>
</div>

আপনার নিজেই প্রয়াস করুন

শিরোমুখ ও পাদভাগ

.card-header শিরোমুখ যোগ করতে ক্লাস ব্যবহার করুন:.card-footer পাদভাগ যোগ করতে ক্লাস ব্যবহার করুন:

উদাহরণ

<div class="card">
  <div class="card-header">শিরোমুখ</div>
  <div class="card-body">কনটেন্ট</div>
  <div class="card-footer">পাদভাগ</div>
</div>

আপনার নিজেই প্রয়াস করুন

কনটেক্সট কার্ড

কার্ডকে পটভূমি রঙ যোগ করতে, অনুগ্রহ করে কনটেক্সট ক্লাস ব্যবহার করুন:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

উদাহরণ

আপনার নিজেই প্রয়াস করুন

শিরোনাম, লেখা এবং লিঙ্ক

অনুগ্রহ করে .card-title কার্ড শিরোনাম যে কোনও শিরোনাম এলিমেন্টে যোগ করুন। যদি <p> এলিমেন্ট .card-body আমার শেষ কিংবা একমাত্র সাব-এলিমেন্ট (কিংবা একমাত্র সাব-এলিমেন্ট), তখন .card-text ক্লাস ব্যবহার করে সরানো যায় <p> এলিমেন্টের নিচের হেডার মার্জিন.card-link কোনো লিঙ্কের জন্য ব্লু এবং হভার ইফেক্ট যোগ করুন。

উদাহরণ

<div class="card">
  <div class="card-body">
    <h4 class="card-title">কার্ড শিরোনাম</h4>
    <p class="card-text">কিছু উদাহরণ টেক্সট।আরও কিছু উদাহরণ টেক্সট。</p>
    <a href="#" class="card-link">কার্ড লিঙ্ক</a>
    <a href="#" class="card-link">আরেকটি লিঙ্ক</a>
  </div>
</div>

আপনার নিজেই প্রয়াস করুন

কার্ড ছবি .card-img-top বা .card-img-bottom যোগ করুন <img>ছবিকে কার্ডের উপরে বা নীচে রাখা যায়。

মনে রাখুন, আমরা .card-body বাইরে ছবিকে যোগ করেছি যাতে সমগ্র প্রস্থ অতিক্রম করা যায়:

উদাহরণ

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="কার্ড ছবি">
  <div class="card-body">
    <h4 class="card-title">বিল গেটস</h4>
    <p class="card-text">বিল গেটস একজন প্রোগ্রামার এবং ইঞ্জিনিয়ার।আরও কিছু উদাহরণ টেক্সট।আরও কিছু উদাহরণ টেক্সট。</p>
    <a href="#" class="btn btn-primary">পার্সোনাল প্রোফাইল দেখুন</a>
  </div>
</div>

আপনার নিজেই প্রয়াস করুন

কার্ড ছবি ওভারলে

ছবিকে কার্ড ব্যাকগ্রাউন্ড হিসাবে রূপান্তরিত করে ব্যবহার করুন .card-img-overlay ছবির উপরে টেক্সট যোগ করুন:

উদাহরণ

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="কার্ড ছবি">
  <div class="card-img-overlay">
    <h4 class="card-title">বিল গেটস</h4>
    <p class="card-text">কিছু উদাহরণ টেক্সট।আরও কিছু উদাহরণ টেক্সট。</p>
    <a href="#" class="btn btn-primary">পার্সোনাল প্রোফাইল দেখুন</a>
  </div>
</div>

আপনার নিজেই প্রয়াস করুন