چطور از مدیا کوئری‌ها در بوت‌ استرپ استفاده کنم؟

<div class="d-none d-md-block">
  This content will be visible only on devices larger than 768px.
</div>

این کد باعث می‌شه که المنت فقط توی سایزهای متوسط به بالا (یعنی از 768 پیکسل به بالا) دیده بشه. توی سایزهای کوچیک‌تر، این المنت پنهان می‌شه (d-none).

اگه بخوای از مدیا کوئری‌های دستی استفاده کنی و به دلخواه خودت چیزی رو تغییر بدی، میتونی از این کدها استفاده کنی:

@media (min-width: 768px) {   
.custom-class {     
/* Styles for devices larger than 768px */  
 } 
}

ابنطوری می‌تونی کنترل دقیق تری روی طراحی ریسپانسیو سایتت داشته باشی. بازم میگم که بوت‌استرپ  خیلی از این موارد رو خودش هندل می‌کنه و بهتره از کلاس‌های خودش استفاده کنی، مگر اینکه نیاز خاصی داشته باشی.