لإخفاء div ضمن الbootstrap

أهلاً محمد،

لإخفاء div في نسخة Bootstrap4 يمكنك استخدام الصف d-none وذلك لإخفاءه في الشاشات الصغيرة جداً -إكسترا سمول- (xs) أو الصف d-sm-none لإخفاء العنصر div في الشاشات الصغيرة (sm).

إخفاء العنصر div في الشاشات الصغيرة (sm) يمكنك تطبيق الكود التالي:

<div class="d-sm-none">
  <img src="img_name">
</div>

إخفاء العنصر div في الشاشات الصغيرة جداً (xs) يمكنك تطبيق الكود التالي:

<div class="d-none">
  <img src="img_name">
</div>

وبالمثل يمكن تطبيق هذه الصفوف على عنصر الصورة مباشرةً لإخفائها سواء في الشاشات الصغيرة أو الشاشات الصغيرة جداً.

إخفاء العنصر img في الشاشات الصغيرة (sm) يمكنك تطبيق الكود التالي:

<img src="img_name" class="d-sm-none">

إخفاء العنصر img في الشاشات الصغيرة جداً (xs) يمكنك تطبيق الكود التالي:

<img src="img_name" class="d-none">

إن الصف d-none يغير قيمة خاصية العرض display الخاصة بالعنصر إلى القيمة none وذلك في الشاشات الصغيرة جداً (xs) فقط، وبالمثل الصف d-sm-none يغير قيمة خاصية العرض display الخاصة بالعنصر إلى القيمة none وذلك في الشاشات الصغيرة (sm) فقط.

من هذا المُنطَلق فإنّ أسماء الأصناف تأخذ الصيغة التاليّة:

‎d-{value}‎ بالنسبة للنقطة الحديّة xs

‎d-{breakpoint}-{value}‎ بالنسبة للنقاط الحديّة sm، و md، و lg وxl

لمزيدٍ من المعلومات اطلع على خاصيّة العرض display في إطار العمل Bootstrap :

https://wiki.hsoub.com/Bootstrap/display

السلام عليكم 

للقيام بذلك في Bootstrap 4    لاخفاء حجم معين تقوم اولا باضافة d-none  حيث تعني لا تعرض اي اخفاء عند كل الاحجام ثم تضيف d-md-block  وهذه تعني اعرض حجم الشاشة المتوسط و اي حجم اكبر منه

<div  > 
    <h1>will not display in small and extra small
    </h1>
    
    <img class="d-none d-md-block"  src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"/>
    
    </div>

وهنا شرح مبسط علي يوتيوب 

تحياتي