Bootstrap: Breakpoints
We hebben reeds vermeld hoe we met Bootstrap responsieve websites kunnen bouwen.
Dit impliceert onmiddellijk dat we met media queries werken en bepaalde ‘breakpoints’ hebben om aan te geven op welke schermbreedte we een andere layout willen weergeven.
Bootstrap maakt gebruik van vijf ‘breakpoints’ o.b.v. de meest voorkomende schermgroottes voor hedendaagse toestellen.
| Label | Type toestellen | Pixels |
| Extra small (xs) | Portret mode smartphone | Tot 575px |
| Small (sm) | Landschap mode smartphone | 576px – 767px |
| Medium (md) | Tablets | 768px – 991px |
| Large (lg) | Desktops | 992px – 1199px |
| Extra large (xl) | Grote desktops | Meer dan 1200px |
Aangezien we mobile-first werken correspondeert de default layout met ‘xs’ en kunnen we deze aanpassen voor ‘sm’-toestellen door hier andere specificaties voor op te geven. Desgewenst kunnen we voor elk breakpoint een andere layout definiëren.
Als je de breakpoints van BS wil visualiseren tijdens het schrijven van je HTML pagina dan kan je een stukje code toevoegen zoals:
<div id='breakpoints'>
<span class='d-block d-sm-none'> XS </span>
<span class='d-none d-sm-block d-md-none'> SM</span>
<span class='d-none d-md-block d-lg-none'> MD</span>
<span class='d-none d-lg-block d-xl-none'> LG</span>
<span class='d-none d-xl-block'> XL</span>
</div>
<style>
#breakpoints {
position: fixed;
top: 0;
left: 0;
background-color: lightgrey;
color: white;
padding: 0.2em;
z-index: 999;
}
</style>Bovenstaand stukje code
Met dit snippet voegen we een vakje toe in de linkerbovenhoek van ons scherm waar we het huidige breakpoint weergeven.
We hebben namelijk voor elk breakpoint een span gedefinieerd die op “display: block” (d-block) staat voor het huidige breakpoint en die op “display: none” staat (d-none) voor alle andere breakpoints.
We bemerken tevens vanuit het snippet hierboven dat bepaalde syntax opnieuw patronen vertoont.
- De klassen d-none en d-block staan namelijk voor “display:none” en “display”block”.
- En als we in de klassenamen een verwijzing maken naar een specifiek breakpoint (vb: d-sm-block) dan veranderen we de display-weergave enkel voor dat specifieke breakpoint (en grotere breakpoints tenzij hiervoor een extra klasse-verwijzing is opgegeven).