Bootstrap: البطاقات

Q: هل عرض البطاقة ثابت أم متكيّف؟

البطاقة افتراضيًا width: 100% (تملأ الحاوية الأم). يمكنك استخدام style="width: 18rem;" لتثبيت العرض، أو وضعها داخل عمود شبكة لتتكيّف تلقائيًا.

Q: هل تدعم البطاقة الوضع الداكن؟

نعم. بطاقات Bootstrap 5.3 تستجيب تلقائيًا لـ data-bs-theme="dark" ، وستبدّل ألوان النص والخلفية تلقائيًا.

Q: كيف تعرض مجموعة البطاقات على الشاشات الصغيرة؟

على الشاشات الصغيرة، تتراكم بطاقات card-group عموديًا، وتأخذ كل بطاقة عرض الحاوية بالكامل، مع الحفاظ على ارتفاع متساوٍ. إذا لم يكن الارتفاع المتساوي مطلوبًا، يُوصى باستخدام شبكة row-cols-* .

Q: هل يمكنني وضع مجموعة قوائم كاملة داخل بطاقة؟

نعم. يمكنك وضع list-group list-group-flush مباشرة داخل البطاقة. في هذه الحالة، ستكون مجموعة القوائم محاذية لمسافة البطاقة الداخلية، مما يخلق تأثيرًا بصريًا موحدًا.

آخر تحديث: 2026-08-26

1. مقدمة الدرس

(1) المتطلبات الأساسية

الدرس 09: الأزرار ومجموعات الأزرار

(2) 🎯 ما الذي ستتعلّمه

بناء البنية الأساسية للبطاقة (صورة، جسم، عنوان، نص)
استخدام card-header وcard-footer لإضافة أعلى وأسفل
استخدام card-img-overlay لتراكب النص على الصور
استخدام text-bg-* وborder-* للتحكم في ألوان البطاقة
استخدام card-group ونظام الشبكة لإنشاء تخطيطات البطاقات

(3) المشكلة

تحتاج صفحة قوائم منتجات Bob إلى عرض 6 منتجات — كل واحد بصورة واسم وسعر وزر "أضف إلى السلة". باستخدام مكوّن البطاقة في Bootstrap ونظام الشبكة، يمكن فعل ذلك في أكثر من عشرة أسطر قليلة من التعليمات البرمجية.

(4) الحل

البطاقة هي أكثر حاوية محتوى أساسية في Bootstrap 5. يمكنها دمج الصور والنص والأزرار والقوائم في وحدة محتوى واحدة مستقلة. تُستخدم على نطاق واسع لعرض المنتجات ومعاينات المقالات وبطاقات ملفات المستخدمين.

(5) الفوائد

باستخدام مكوّن البطاقة في Bootstrap مع نظام الشبكة، يمكنك بناء صفحة عرض منتجات احترافية وجميلة في أكثر من عشرة أسطر قليلة من التعليمات البرمجية.

2. البنية الأساسية للبطاقة

▶ مثال: بطاقة أساسية

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">

    <div class="card" style="width: 18rem;">
      <img src="https://via.placeholder.com/286x180/0d6efd/fff" class="card-img-top" alt="Placeholder">
      <div class="card-body">
        <h5 class="card-title">Product Name</h5>
        <h6 class="card-subtitle mb-2 text-body-secondary">$29.99</h6>
        <p class="card-text">A great product that solves real problems for everyday users.</p>
        <a href="#" class="btn btn-primary">Add to Cart</a>
      </div>
    </div>

    <hr>

    <div class="card">
      <div class="card-header">Featured</div>
      <div class="card-body">
        <h5 class="card-title">Special Offer</h5>
        <p class="card-text">With supporting text below as a natural lead-in.</p>
        <a href="#" class="btn btn-success">Claim Offer</a>
      </div>
      <div class="card-footer text-body-secondary">2 days remaining</div>
    </div>

    <hr>

    <div class="card" style="width: 18rem;">
      <div class="card-header">Notifications</div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">New message from Alice</li>
        <li class="list-group-item">Server update completed</li>
        <li class="list-group-item">Payment received: $120</li>
      </ul>
    </div>

  </div>
</body>
</html>

▶ جرّب الكود

3. شرح بنية البطاقة

العنصر	الفئة	الوصف
الحاوية	`card`	تُعرّف مكوّن البطاقة، وتوفر الحدود والزوايا المستديرة والظلال.
الصورة	`card-img-top`	الصورة العلوية للبطاقة (عرض متجاوب).
الجسم	`card-body`	حاوية بمسافة داخلية لوضع النص والأزرار.
العنوان	`card-title`	عنوان البطاقة (حجم خط h5).
العنوان الفرعي	`card-subtitle`	نص ثانوي أسفل العنوان.
النص	`card-text`	فقرة الجسم (تأتي مع margin-bottom).
الرابط	`card-link`	رابط داخل البطاقة (نص أزرق).
الترويسة	`card-header`	الشريط العلوي للبطاقة.
التذييل	`card-footer`	الشريط السفلي للبطاقة.
تراكب الصورة	`card-img-overlay`	نص متراكب فوق صورة.

(1) تراكب الصورة

HTML

<div class="card text-white">
  <img src="https://via.placeholder.com/400x200/198754/fff" class="card-img" alt="Background">
  <div class="card-img-overlay">
    <h5 class="card-title">Overlay Title</h5>
    <p class="card-text">Text is placed on top of the image.</p>
  </div>
</div>

▶ جرّب الكود

4. ألوان وخلفيات البطاقة

HTML

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card</h5>
    <p class="card-text">Full background color using text-bg-* class.</p>
  </div>
</div>

<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Danger border</div>
  <div class="card-body">
    <h5 class="card-title">Border only card</h5>
    <p class="card-text">Only the border gets the color.</p>
  </div>
</div>

▶ جرّب الكود

الفئة	التأثير
`text-bg-primary` / `text-bg-dark`	خلفية ملوّنة كاملة + نص أبيض
`bg-light` / `bg-dark`	لون خلفية مخصص
`border-primary` / `border-danger`	لون الحدود فقط

5. البطاقة الأفقية

HTML

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="https://via.placeholder.com/200x200/0d6efd/fff" class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Horizontal Card</h5>
        <p class="card-text">This card uses row + col to place image and text side by side.</p>
        <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

▶ جرّب الكود

6. مجموعة البطاقات

HTML

<div class="card-group">
  <div class="card">
    <img src="https://via.placeholder.com/300x180/0d6efd/fff" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card 1</h5>
      <p class="card-text">This card has less content.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/300x180/198754/fff" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card 2</h5>
      <p class="card-text">This card has more content. Cards auto-match height.</p>
      <p class="card-text">Additional paragraph to show height matching.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/300x180/dc3545/fff" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card 3</h5>
      <p class="card-text">Short content again.</p>
    </div>
  </div>
</div>

▶ جرّب الكود

(1) شبكة البطاقات (موصى به)

HTML

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="https://via.placeholder.com/300x180/0d6efd/fff" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card 1</h5>
        <p class="card-text">Content here.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="https://via.placeholder.com/300x180/dc3545/fff" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card 2</h5>
        <p class="card-text">More content here.</p>
      </div>
    </div>
  </div>
</div>

▶ جرّب الكود

طريقة التخطيط	الميزات	حالة الاستخدام
`card-group`	بلا فجوات، ارتفاع متساوٍ	صفحات التفاصيل، ميزات جنبًا إلى جنب
`row-cols-*` + `h-100`	بفجوات، ارتفاع متساوٍ	قوائم المنتجات/المقالات
`row` + `col-*` قياسي	ارتفاع غير متساوٍ	عرض المعلومات

7. المزيد من أمثلة البطاقات

▶ مثال: بطاقة منتج تجارة إلكترونية

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>E-Commerce Product Card</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="row row-cols-1 row-cols-md-3 g-4">
      <div class="col">
        <div class="card h-100">
          <img src="https://via.placeholder.com/300x200/0d6efd/fff" class="card-img-top" alt="Product">
          <div class="card-body">
            <h5 class="card-title">Wireless Headphones</h5>
            <p class="card-text text-muted">Noise-cancelling, 30hr battery life.</p>
            <div class="d-flex justify-content-between align-items-center">
              <span class="h5 mb-0">$79.99</span>
              <span class="badge bg-success rounded-pill">In Stock</span>
            </div>
          </div>
          <div class="card-footer bg-transparent">
            <button class="btn btn-primary w-100">Add to Cart</button>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <img src="https://via.placeholder.com/300x200/198754/fff" class="card-img-top" alt="Product">
          <div class="card-body">
            <h5 class="card-title">Smart Watch</h5>
            <p class="card-text text-muted">Fitness tracker with heart-rate monitor.</p>
            <div class="d-flex justify-content-between align-items-center">
              <span class="h5 mb-0">$199.99</span>
              <span class="badge bg-warning rounded-pill">Low Stock</span>
            </div>
          </div>
          <div class="card-footer bg-transparent">
            <button class="btn btn-primary w-100">Add to Cart</button>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <img src="https://via.placeholder.com/300x200/dc3545/fff" class="card-img-top" alt="Product">
          <div class="card-body">
            <h5 class="card-title">Bluetooth Speaker</h5>
            <p class="card-text text-muted">Portable, waterproof, 12hr playback.</p>
            <div class="d-flex justify-content-between align-items-center">
              <span class="h5 mb-0">$49.99</span>
              <span class="badge bg-danger rounded-pill">Sold Out</span>
            </div>
          </div>
          <div class="card-footer bg-transparent">
            <button class="btn btn-secondary w-100" disabled>Out of Stock</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

▶ مثال: بطاقة ملف المستخدم (تراكب الصورة)

HTML

<div class="card text-white border-0" style="width: 20rem;">
  <img src="https://via.placeholder.com/320x200/6f42c1/fff" class="card-img rounded-3" alt="Cover">
  <div class="card-img-overlay d-flex flex-column justify-content-end">
    <h5 class="card-title">Alice Chen</h5>
    <p class="card-text">Senior UI Designer at TechCorp</p>
    <div>
      <span class="badge bg-primary rounded-pill">12 Projects</span>
      <span class="badge bg-success rounded-pill">98% Rating</span>
    </div>
  </div>
</div>

▶ جرّب الكود

▶ مثال: جدول أسعار بمجموعة بطاقات

HTML

<div class="card-group text-center">
  <div class="card border-primary">
    <div class="card-header bg-primary text-white">Basic</div>
    <div class="card-body">
      <h3 class="card-title">$9<span class="text-muted fs-6">/mo</span></h3>
      <ul class="list-unstyled mt-3 mb-4">
        <li>10 GB Storage</li>
        <li>1 User</li>
        <li>Email Support</li>
      </ul>
      <button class="btn btn-outline-primary">Choose Plan</button>
    </div>
  </div>
  <div class="card border-success">
    <div class="card-header bg-success text-white">Pro</div>
    <div class="card-body">
      <h3 class="card-title">$29<span class="text-muted fs-6">/mo</span></h3>
      <ul class="list-unstyled mt-3 mb-4">
        <li>100 GB Storage</li>
        <li>5 Users</li>
        <li>Priority Support</li>
      </ul>
      <button class="btn btn-success">Choose Plan</button>
    </div>
  </div>
  <div class="card border-warning">
    <div class="card-header bg-warning text-white">Enterprise</div>
    <div class="card-body">
      <h3 class="card-title">$99<span class="text-muted fs-6">/mo</span></h3>
      <ul class="list-unstyled mt-3 mb-4">
        <li>Unlimited Storage</li>
        <li>Unlimited Users</li>
        <li>24/7 Support</li>
      </ul>
      <button class="btn btn-warning">Choose Plan</button>
    </div>
  </div>
</div>

▶ جرّب الكود

▶ مثال: بطاقة أيقونة أفقية

HTML

<div class="card mb-3" style="max-width: 500px;">
  <div class="row g-0 align-items-center">
    <div class="col-md-3 text-center p-3">
      <div class="display-6 text-primary">🔒</div>
    </div>
    <div class="col-md-9">
      <div class="card-body">
        <h5 class="card-title">Secure Payment</h5>
        <p class="card-text">All transactions are encrypted with SSL 256-bit security.</p>
      </div>
    </div>
  </div>
</div>
<div class="card mb-3" style="max-width: 500px;">
  <div class="row g-0 align-items-center">
    <div class="col-md-3 text-center p-3">
      <div class="display-6 text-success">🚚</div>
    </div>
    <div class="col-md-9">
      <div class="card-body">
        <h5 class="card-title">Free Shipping</h5>
        <p class="card-text">Free delivery on orders over $50, arrives within 3-5 days.</p>
      </div>
    </div>
  </div>
</div>

▶ جرّب الكود

(1) بنية مكوّن البطاقة

flowchart TD
    A[card container] --> B[card-img-top<br/>Image]
    A --> C[card-body Body]
    A --> D[card-header<br/>Header]
    A --> E[card-footer<br/>Footer]
    C --> F[card-title Title]
    C --> G[card-subtitle Subtitle]
    C --> H[card-text Text]
    C --> I[card-link Link]
    A --> J[card-img-overlay<br/>Image Overlay Text]
    A --> K[list-group List Group]

تنويع البطاقة	الفئة	وصف التأثير
خلفية ملوّنة كاملة	`text-bg-primary/dark`	الخلفية والنص يغيّران اللون معًا
الحدود فقط	`border-primary/danger`	خلفية بيضاء محتفظ بها، الحدود ملوّنة
خلفية شفافة	`bg-transparent`	بلا لون خلفية، مناسب للوضع الداكن
بلا حدود	`border-0`	يزيل الحدود تمامًا

طريقة التخطيط	الفجوة	ارتفاع متساوٍ	السيناريو المناسب
`card-group`	لا	نعم	صفحات التفاصيل، مقارنة الميزات
`row-cols-*` + `h-100`	نعم	نعم	قوائم المنتجات، المدونات
`row-cols-*` بدون `h-100`	نعم	لا	محتوى بارتفاعات متفاوتة

المحتوى المدمج	الفئة	حالات الاستخدام الشائعة
صورة + نص + زر	`card-img-top` + `card-body`	عرض المنتجات
ترويسة + جسم + تذييل	`card-header` + `card-body` + `card-footer`	الرسائل، الإعلانات
تراكب الصورة	`card-img-overlay`	الأغلفة، اللافتات
أيقونة + تخطيط أفقي	`row g-0` + `col-*`	قوائم الميزات، الخدمات
مجموعة قوائم	`list-group list-group-flush`	الإشعارات، القوائم

❓ أسئلة شائعة

س هل عرض البطاقة ثابت أم متكيّف؟

ج البطاقة افتراضيًا width: 100% (تملأ الحاوية الأم). يمكنك استخدام style="width: 18rem;" لتثبيت العرض، أو وضعها داخل عمود شبكة لتتكيّف تلقائيًا.

س كيف يمكنني ترتيب المناطق المختلفة داخل البطاقة بشكل منفصل؟

ج يمكنك استخدام فئات أدوات Flexbox داخل البطاقة. على سبيل المثال، لدفع زر في .card-body إلى الأسفل، استخدم mt-auto لدفعه إلى أسفل البطاقة.

س هل تدعم البطاقة الوضع الداكن؟

ج نعم. بطاقات Bootstrap 5.3 تستجيب تلقائيًا لـ data-bs-theme="dark"، وستبدّل ألوان النص والخلفية تلقائيًا.

س كيف تعرض مجموعة البطاقات على الشاشات الصغيرة؟

ج على الشاشات الصغيرة، تتراكم بطاقات card-group عموديًا، وتأخذ كل بطاقة عرض الحاوية بالكامل، مع الحفاظ على ارتفاع متساوٍ. إذا لم يكن الارتفاع المتساوي مطلوبًا، يُوصى باستخدام شبكة row-cols-*.

س هل يمكنني وضع مجموعة قوائم كاملة داخل بطاقة؟

ج نعم. يمكنك وضع list-group list-group-flush مباشرة داخل البطاقة. في هذه الحالة، ستكون مجموعة القوائم محاذية لمسافة البطاقة الداخلية، مما يخلق تأثيرًا بصريًا موحدًا.

📖 ملخص

بنية البطاقة: card > card-img-top + card-body (card-title / card-text / card-link)
card-header / card-footer يضيفان شريطين علوي وسفلي، card-img-overlay لتراكب النص على الصور
text-bg-* لبطاقات بخلفية ملوّنة كاملة، border-* لتلوين الحدود فقط
card-group لارتفاع متساوٍ بلا فجوات، row-cols-* + h-100 لشبكة ارتفاع متساوٍ بفجوات

📝 تمارين

⭐ أنشئ شبكة بطاقات منتجات: عمود واحد على الجوال، 2 على الجهاز اللوحي، 3 على سطح المكتب. كل بطاقة تحتوي على صورة + عنوان + سعر + وصف + زر. استخدم mt-auto لتثبيت الزر في الأسفل.
⭐⭐ أنشئ بطاقة ملف مستخدم: صورة رمزية يسار (صورة أفقية) + اسم يمين + نبذة + روابط اجتماعية. يجب أن يكون للبطاقة حد أزرق border-primary.
⭐⭐⭐ استخدم card-group لإنشاء ثلاث بطاقات تعريف ميزات، كل بطاقة بها منطقة أيقونة + عنوان + وصف. البطاقات الثلاث يجب أن تكون متساوية الارتفاع تلقائيًا.

الدرس السابق: الأزرار ومجموعات الأزرار · الدرس التالي: List Groups and Badges

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن