Bootstrap: Displays
We hebben reeds gezien dat we met CSS de weergave van onze HTML elementen kunnen aanpassen. Deze display parameter kunnen we in Bootstrap ook aanroepen via ingebouwde klassen beginnende met “d-” (display).
| Klasse | Functionaliteit |
| .d-none | Geeft de display:none opmaak (verbergt de div en diens inhoud) |
| .d-block | Geeft de display:block opmaak (neem de hele breedte in) |
| .d-inline | Geeft de display:inline opmaak |
| .d-inline-block | Geeft de display: inline-block opmaak |
| .d-flex | Geeft de display: flex opmaak |
| .flex-row | Geeft aan de items van een flex container de rij weergave (horizontaal), dit is de default voor een flex container |
| .flex-column | Geeft aan de items van een flex container de kolom weergave (vertikaal) |
| .d-sm-none | Geeft de display:none opmaak vanaf de kleine (sm) schermbreedte en groter (tenzij een andere klasse dit aanpast voor grotere schermen) |
| .img-fluid | Maakt je afbeelding responsief om steeds binnen diens parent div te blijven (max-width: 100% en height: auto) |
Via .d-flex kunnen we dus een display:flex opzetten. En in combinatie met .flex-row geven we deze op eenzelfde rij weer terwijl de combinatie met .flex-column voor een gestapelde weergave zorgt.
Er zijn natuurlijk altijd andere verfijningen die we kunnen doen. Voor een flex container kunnen we immers met justify-content en align-items de flex kinderen aligneren op de hoofdas en de zijas. Hiervoor bestaan opnieuw Bootstrap klassen. Verder kunnen we met .flex-wrap meedelen dat de kinderen die niet meer binnen de huidige rij passen (niet genoeg schermbreedte) naar een volgende rij moeten gaan.
We kunnen nooit alle klassen in detail bespreken maar de website van getbootstrap is een handige resource om naar terug te grijpen wanneer je een bepaalde functionaliteit wil toevoegen.
Voor BS kan je ook werken met responsieve afbeeldingen. I.p.v. een schermvullende weergave kan je via de klasse .img-fluid een max-width van 100% en een height: auto verkrijgen. De breedte van de parent container wordt dan gerespecteerd.
Heb je een afbeelding dan kan je deze ook centreren via de combinatie van .mx-auto en .d-block.
Vele klassenamen in Bootstrap
Dit alles illustreert ook dat BS je html code sterk vervuilt met vele klassenamen. Immers BS-klassen zijn zo algemeen mogelijk dus voor elke functionaliteit is er een aparte klasse (met eigen CSS kan je functionaliteiten echter bundelen in eenzelfde klasse).