📌 کارت‌ها (Cards) در بوت‌استرپ ۵ برای نمایش محتوای مرتبط مثل متن، عکس، دکمه‌ها و لینک‌ها داخل یک باکس منظم استفاده می‌شن.

✅ ساختار پایه کارت

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">عنوان کارت</h5>
    <p class="card-text">این یک متن نمونه برای کارت در بوت‌استرپ ۵ است.</p>
    <a href="#" class="btn btn-primary">بیشتر بخوانید</a>
  </div>
</div>

✅ کارت با تصویر بالا

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="تصویر">
  <div class="card-body">
    <h5 class="card-title">کارت با تصویر</h5>
    <p class="card-text">این کارت دارای یک تصویر در بالای آن است.</p>
    <a href="#" class="btn btn-success">مشاهده</a>
  </div>
</div>

✅ کارت با تصویر پایین

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">عنوان کارت</h5>
    <p class="card-text">متن نمونه داخل کارت.</p>
  </div>
  <img src="https://via.placeholder.com/300x200" class="card-img-bottom" alt="تصویر">
</div>

✅ کارت با هدر و فوتر

<div class="card text-center" style="width: 20rem;">
  <div class="card-header">هدر کارت</div>
  <div class="card-body">
    <h5 class="card-title">عنوان کارت</h5>
    <p class="card-text">متن نمونه داخل کارت.</p>
    <a href="#" class="btn btn-primary">ورود</a>
  </div>
  <div class="card-footer text-muted">فوتر کارت</div>
</div>

✅ کارت با رنگ‌های مختلف

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">هدر</div>
  <div class="card-body">
    <h5 class="card-title">کارت آبی</h5>
    <p class="card-text">این کارت پس‌زمینه آبی دارد.</p>
  </div>
</div>

<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">هدر</div>
  <div class="card-body">
    <h5 class="card-title">کارت زرد</h5>
    <p class="card-text">این کارت پس‌زمینه زرد دارد.</p>
  </div>
</div>

✅ کارت گروهی (Card Group)

برای کنار هم قرار دادن کارت‌ها:

<div class="card-group">
  <div class="card">
    <img src="https://via.placeholder.com/200x150" class="card-img-top" alt="تصویر">
    <div class="card-body">
      <h5 class="card-title">کارت ۱</h5>
      <p class="card-text">متن نمونه کارت ۱.</p>
    </div>
  </div>

  <div class="card">
    <img src="https://via.placeholder.com/200x150" class="card-img-top" alt="تصویر">
    <div class="card-body">
      <h5 class="card-title">کارت ۲</h5>
      <p class="card-text">متن نمونه کارت ۲.</p>
    </div>
  </div>

  <div class="card">
    <img src="https://via.placeholder.com/200x150" class="card-img-top" alt="تصویر">
    <div class="card-body">
      <h5 class="card-title">کارت ۳</h5>
      <p class="card-text">متن نمونه کارت ۳.</p>
    </div>
  </div>
</div>

✅ کارت در Grid

می‌تونی کارت‌ها رو داخل سیستم گرید بوت‌استرپ هم بذاری:

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="https://via.placeholder.com/200x150" class="card-img-top" alt="تصویر">
      <div class="card-body">
        <h5 class="card-title">کارت ۱</h5>
        <p class="card-text">متن نمونه کارت.</p>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card">
      <img src="https://via.placeholder.com/200x150" class="card-img-top" alt="تصویر">
      <div class="card-body">
        <h5 class="card-title">کارت ۲</h5>
        <p class="card-text">متن نمونه کارت.</p>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card">
      <img src="https://via.placeholder.com/200x150" class="card-img-top" alt="تصویر">
      <div class="card-body">
        <h5 class="card-title">کارت ۳</h5>
        <p class="card-text">متن نمونه کارت.</p>
      </div>
    </div>
  </div>
</div>

📌 نتیجه‌گیری:
کارت‌ها در بوت‌استرپ ۵ خیلی انعطاف‌پذیرن و می‌تونن شامل تصویر، دکمه، هدر/فوتر، رنگ‌بندی و گروه‌بندی باشن.