تنسيق container في بوتستراب

لإظهار التنسيقات مثل النموذج نعمل كتالي :-

أولا نصلح تقسم div الثلاثة الموجودة داخل section المعطى كلاس services ، نقوم بإعطاء الكلاس col-md-4 لجميع div بدلا من col-md-6،  col-md-4 ، col-md-4

<div class="col-md-4">
</div>

ثم نصلح الصورة ونقوم بإعطائها width="100%" بهذا الشكل 

<div class="col-md-4">
  <div class="women">
    <img src="images/temp/woman.jpg" width="100%">
  </div>
</div>

ثم قمت بإعطاء كلاس services-text الى div التي تحتوي على العنوان والنبذة بهذا الشكل 

<div class="services-text flex-grow-1 ms-3">
  <h5 class="mt-0 text-left">
    EASY CUSTOMIZATION
  </h5>
  <p class="mb-2 text-left">
    Seamlessly restore client-focused potentialities rather than functional
    strategic theme areas.
  </p>
</div>

وفي css قمت بإعطائه التنسيق التالي

.services-text{
    margin-left: 30px;
}

أما بخصوص الأيقونات لإظهارها باللون الأحمر قمت بإعطائها الكلاس services-icon لأستطيع الوصول لها بشكل صحيح 

<i class="fa-solid fa-screwdriver-wrench fa-2x services-icon" aria-hidden="true"></i>

ثم في css  قمت بإعطائه التنسيق التالي 

.services-icon {color: red;}

 وهكذا تصبح التنسيقات مثل التي بالصورة 

بتاريخ 38 دقائق مضت قال أسامة زيادة:

لإظهار التنسيقات مثل النموذج نعمل كتالي :-

أولا نصلح تقسم div الثلاثة الموجودة داخل section المعطى كلاس services ، نقوم بإعطاء الكلاس col-md-4 لجميع div بدلا من col-md-6،  col-md-4 ، col-md-4

<div class="col-md-4">
</div>

ثم نصلح الصورة ونقوم بإعطائها width="100%" بهذا الشكل 

<div class="col-md-4">
  <div class="women">
    <img src="images/temp/woman.jpg" width="100%">
  </div>
</div>

ثم قمت بإعطاء كلاس services-text الى div التي تحتوي على العنوان والنبذة بهذا الشكل 

<div class="services-text flex-grow-1 ms-3">
  <h5 class="mt-0 text-left">
    EASY CUSTOMIZATION
  </h5>
  <p class="mb-2 text-left">
    Seamlessly restore client-focused potentialities rather than functional
    strategic theme areas.
  </p>
</div>

وفي css قمت بإعطائه التنسيق التالي

.services-text{
    margin-left: 30px;
}

أما بخصوص الأيقونات لإظهارها باللون الأحمر قمت بإعطائها الكلاس services-icon لأستطيع الوصول لها بشكل صحيح 

<i class="fa-solid fa-screwdriver-wrench fa-2x services-icon" aria-hidden="true"></i>

ثم في css  قمت بإعطائه التنسيق التالي 

.services-icon {color: red;}

 وهكذا تصبح التنسيقات مثل التي بالصورة 

استاذي كيف يمكنني استخدام اي ايقونه في اخر اصدار لfont awosome لان معظم الايقونات لا تعمل معي

بتاريخ 3 دقائق مضت قال Ahmed Alfadaly:

استاذي كيف يمكنني استخدام اي ايقونه في اخر اصدار لfont awosome لان معظم الايقونات لا تعمل معي

يمكنك إضافة هذا cdn الخاص بأيقونات font awosome في head 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

وبعدها أخبرني هل سوف تعمل الأيقونات 

بتاريخ 2 ساعات قال أسامة زيادة:

يمكنك إضافة هذا cdn الخاص بأيقونات font awosome في head 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

وبعدها أخبرني هل سوف تعمل الأيقونات 

استاذي هذا اللنك كنت واضعه ولا تعمل وع ذلك يوجد انواع في الإصدار الجديد grand و Light و solid لم أفهم لما لا يعمل ايقونات Light مثلا"

بتاريخ 14 دقائق مضت قال Ahmed Alfadaly:

استاذي هذا اللنك كنت واضعه ولا تعمل وع ذلك يوجد انواع في الإصدار الجديد grand و Light و solid لم أفهم لما لا يعمل ايقونات Light مثلا"

يمكنك أن تقوم بتنزيل ملفات المكتبة من هنا ومن ثم وضع ملف الأيقونات الخاص بـ css التي تريد استخدامها في ملفات مشروعك ، وتضمينه في صفحة html ، مع العلم أن ليست كل الأيقونات Free .