لدي مشكلة في cards لا تأتي بنفس الطول

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

نقوم بإنشاء صنف جديد لنسميه مثلاً image-style ونعطيه للوسم img 

<a href="#">
  <img src="css/background.png" class="card-img-top image-style" alt="...">
  <div class="card-body p-0">
    <h5 class="card-title ">أحمد حيدر</h5>
    <p class="card-text text-dark">خبرة في مجال كمال الأجسام منذ أكثر من 15 سنة خريج الجامعة الصينة تخصص تغذية</p>
  </div>
</a>

وفي تنسيقات css نقوم بإعطائه التنسيقات التالية ، ويمكنك وضع حجم height الذي تراه مناسب لصور

.image-style {
    width: auto;
    height: 280px;
}

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

هناك صنف من أصناف ال bootstrap مخصص لهذه الحالة و يسهل العمل كثيراً، حيث أنك لن تحتاج إلى أي تعديل يدوي على ال css.

هذا الصنف هو img-fluid حيث أنه يقوم بإعطاء الصورة عرض كامل و طول تلقائي و كل ذلك بالنسبة للعنصر الأب الذي يحتويها، ينصح باستعمال هذا الصنف حيث أنه responsive أكثر من إعطاء قيم ثابتة، فمثلاً عند استعمال أجهزة مختلفة سيبقى الشكل متناسق تلقائياً.

يمكنك إضافته على الصور لديك بالشكل التالي:

<img src="css/background.png" class="img-fluid card-img-top" alt="...">