Utilities voor layout
Voor snellere mobielvriendelijke en responsieve ontwikkeling bevat Bootstrap tientallen utility-klassen om content te tonen, te verbergen, uit te lijnen en van ruimte te voorzien.
display wijzigen
Gebruik onze display-utilities om gangbare waarden van de display-eigenschap responsief te schakelen. Combineer ze met ons grid-systeem, content of componenten om die per viewport te tonen of te verbergen.
Flexbox-opties
Bootstrap is met flexbox gebouwd, maar niet van elk element is de display op display: flex gezet, omdat dat veel onnodige overrides zou toevoegen en belangrijk browsergedrag onverwacht zou veranderen. De meeste van onze componenten zijn met flexbox ingeschakeld gebouwd.
Als je display: flex aan een element wilt toevoegen, doe dat dan met .d-flex of een van de responsieve varianten (bijv. .d-sm-flex). Je hebt deze klasse of display-waarde nodig om onze aanvullende flexbox-utilities voor afmetingen, uitlijning, ruimte en meer te kunnen gebruiken.
Margin en padding
Gebruik de margin- en padding-spacing-utilities om te bepalen hoe elementen en componenten van ruimte en afmetingen worden voorzien. Bootstrap bevat een schaal met zes niveaus voor spacing-utilities, gebaseerd op de standaard $spacer-variabele met een waarde van 1rem. Kies waarden voor alle viewports (bijv. .me-3 voor margin-right: 1rem in LTR), of kies responsieve varianten om specifieke viewports te targeten (bijv. .me-md-3 voor margin-right: 1rem — in LTR — vanaf het md-breakpoint).
visibility schakelen
Wanneer het schakelen van display niet nodig is, kun je de visibility van een element schakelen met onze visibility-utilities. Onzichtbare elementen beïnvloeden nog steeds de layout van de pagina, maar zijn visueel verborgen voor bezoekers.