البطاقات (Cards) | مرجع Bootstrap

1. البطاقة الأساسية (Basic Card)

تحتوي على صورة علوية ومحتوى نصي وزر.

المعاينة

بعض النصوص السريعة كمثال لبناء محتوى البطاقة بحيث يملأ المساحة المخصصة لها.

card: الكلاس الأساسي الحاوي. يضيف إطاراً ناعماً وخلفية.
card-img-top: يضع الصورة في الأعلى مع تدوير الزوايا العلوية فقط لتتناسب مع البطاقة.
card-body: الحاوية الرئيسية للنصوص، تضيف مساحة داخلية (Padding) متناسقة.
card-title و card-text: يضبط المسافات السفلية للعناوين والفقرات.

يمكن تقسيم البطاقة لأقسام لترتيب المحتوى بشكل أفضل.

المعاينة

مميز

احصل على خصم 50% عند الاشتراك في النشرة البريدية الآن.

اشترك الآن

منذ يومين

card-header: يضيف قسماً علوياً بخلفية باهتة وخط فاصل، ممتاز للعناوين الجانبية.
card-footer: يضيف قسماً سفلياً بخط فاصل، ممتاز للتواريخ أو الإحصائيات أو الأزرار الثانوية.
text-center: كلاس عام في البوتستراب قمنا بإضافته للبطاقة بأكملها ليتم توسيط جميع النصوص بداخلها.

يمكن جعل الصورة كخلفية للبطاقة مع كتابة النص فوقها.

المعاينة

هذه البطاقة تحتوي على صورة خلفية بدلاً من صورة علوية عادية، مما يعطي مظهراً جمالياً مختلفاً.

آخر تحديث منذ 3 دقائق

card-img: يضاف للصورة بدلاً من `card-img-top` لتدوير زواياها الأربعة بالكامل.
card-img-overlay: يحول جسم البطاقة ليطفو فوق الصورة بدلاً من أن يكون تحتها.
استخدمنا CSS مضمن filter: brightness(0.5) لتعتيم الصورة وجعل النص الأبيض قابلاً للقراءة.

استخدم كلاسات شبكة البوتستراب (Grid) لتقسيم البطاقة أفقياً (صورة بجانب نص).

المعاينة

هذا النص موجود بجانب الصورة وليس أسفلها بفضل استخدام نظام الجريد (الشبكة) داخل البطاقة.

محتوى إضافي صغير هنا

لا توجد كلاسات خاصة بالبطاقة الأفقية؛ نقوم فقط بإنشاء row (صف) بداخل البطاقة، ونعطي الصورة col-4 والمحتوى col-8.
g-0: (Gutters 0) أزلنا المسافات بين الأعمدة داخل الصف لتلتصق الصورة تماماً بالنص.
rounded-start: لجعل زوايا الصورة دائرية من الجهة اليمنى فقط (في العربي) لتتناسب مع إطار البطاقة.