Media queries in Bootstrap

Bootstrap? Fantastisch. Heerlijk om mee te werken. Het neemt je veel werk uit handen om een responsive opzet van je applicatie of website te realiseren. Maar soms moet je toch een aanpassing maken bij een bepaalde schermgrootte, bijvoorbeeld wanneer het scherm kleiner is dan 480 pixels. In ons geval gaan we op dat moment het logo laten verdwijnen.

In ons geval hebben we een probleem met een logo dat over een carousel is geplaatst. Bootstrap biedt goede mogelijkheden om afbeeldingen responsive te maken. De plaatsing van het logo (over een carousel en onder een uitklapbaar menu) zorgt er echter voor dat het logo niet meer goed te zien is bij een schermbreedte van minder dan 480 pixels. Tijd om alleen in dat geval een aanpassing te doen

Standaard (versie 3 en hoger) kent Bootstrap 4 verschillende formaten scherm:

• Large desktop (> 1.200 pixels)
• Portrait tablet tot landscape tablet en desktop (> 768 pixels en < 979 pixels)
• Landscape telefoon tot portrait tablet (> 480 pixels en < 767 pixels)
• Landscape telefoons en lager (< 480 pixels)

Bij het testen is het natuurlijk wel handig om te zien op welk moment de browser overschakelt naar het volgende formaat. Een handige tip is om de volgende code op te nemen in je webtoepassing:

<span class="visible-xs">SIZE XS</span><span class="visible-sm">SIZE SM</span> <span class="visible-md">SIZE MD</span><span class="visible-lg">SIZE LG</span>

Verander je nu de breedte van je browserscherm, dan zie je direct welk formaat op dat moment is gekozen. Maar goed, we willen het logo laten verdwijnen op het moment dat het scherm minder dan 480 pixels breed is. Het logo is als volgt opgenomen in de code:

<a href="index.cfm"><img src="img/logo.png" class="logoBanner" id="logo"></a>

Media queries zijn de oplossing. Met behulp van media queries kunnen we eenvoudig aanpassingen maken voor een specifieke resolutie. In het geval van Bootstrap ziet de custom CSS code er globaal als volgt uit:

@media (min-width: 1200px) { }
@media (min-width: 980px) and (max-width: 1199px) { }
@media (min-width: 768px) and (max-width: 979px) { }
@media (max-width: 767px) { }

Binnen de curly brackets kun je alle CSS statements maken die je wilt. In ons geval gaan we alleen een aanpassing maken aan het laatste statement, zodat het logo niet langer wordt getoond. Onze code ziet er dan als volgt uit:

@media (max-width: 480px) { #logoDVM { display: none; } }