Bootstrap 5 Handige Tools

Utilities / Helper Classes

Bootstrap 5 heeft veel utility/helper classes die je kunt gebruiken om snel de stijl van een element in te stellen zonder enige CSS-code te hoeven schrijven.

Rand

Gebruik de border class om randen aan of van een element toe te voegen of te verwijderen:

Voorbeelden

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Probeer het zelf

Randbreedte

Gebruik .border-1 tot .border-5 Wijzig de breedte van de rand met:

Voorbeelden

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

Probeer het zelf

Randkleur

Voeg een kleur toe aan de rand met een willekeurige contextkleurklasse:

Voorbeelden

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

Probeer het zelf

Hoekradius van de rand

Gebruik rounded Elementen ronden af met een cirkelrand:

Voorbeelden

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>

Probeer het zelf

Floating en float clear

Gebruik .float-end Class voor floatend elementen naar rechts floaten, of gebruik .float-start Naar links floaten en gebruik .clearfix Float clear class:

Voorbeelden

<div class="clearfix">
  <span class="float-start">Naar links floaten</span>
  <span class="float-end">Naar rechts floaten</span>
</div>

Probeer het zelf

Responsive floating

Floating elementen links of rechts浮动，gebruik responsive float classes (.float-*-left|right) waarvan * is:

  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

Voorbeelden

<div class="float-sm-end">Naar rechts floaten op kleine schermen of breder</div><br>
<div class="float-md-end">Naar rechts floaten op middelgrote schermen of breder</div><br>
<div class="float-lg-end">Naar rechts floaten op grote schermen of breder</div><br>
<div class="float-xl-end">Naar rechts floaten op extra grote schermen of breder</div><br>
<div class="float-xxl-end">Naar rechts floaten op extra grote schermen of breder</div><br>
<div class="float-none">Geen float</div>

Probeer het zelf

Centraal uitlijnen

Gebruik .mx-auto Centraal geplaatste elementen (voeg margin-left en margin-right: auto toe):

Voorbeelden

<div class="mx-auto bg-warning" style="width:150px">Centraal</div>

Probeer het zelf

Breedte

Gebruik de w-* klassen (.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）Instellen van de breedte van het element:

Voorbeelden

<div class="w-25 bg-warning">Breedte 25%</div>
<div class="w-50 bg-warning">Breedte 50%</div>
<div class="w-75 bg-warning">Breedte 75%</div>
<div class="w-100 bg-warning">Breedte 100%</div>
<div class="w-auto bg-warning">Automatische breedte</div>
<div class="mw-100 bg-warning">Maximale breedte 100%</div>

Probeer het zelf

Hoogte

Gebruik de h-* klassen (.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）Instellen van de hoogte van het element:

Voorbeelden

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">Hoogte 25%</div>
  <div class="h-50 bg-warning">Hoogte 50%</div>
  <div class="h-75 bg-warning">Hoogte 75%</div>
  <div class="h-100 bg-warning">Hoogte 100%</div>
  <div class="h-auto bg-warning">Automatische hoogte</div>
  <div class="mh-100 bg-warning" style="height:500px">Maximale hoogte 100%</div>
</div>

Probeer het zelf

Ruimte

Bootstrap 5 heeft een breed scala aan responsieve margin en padding utility classes. Ze zijn geschikt voor alle breakpoints:

  • xs (<= 576px)
  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

De gebruiksvorm van deze klassen is als volgt:{eigenschap}{kanten}-{grootte} gebruikt voor xs，en {eigenschap}{kanten}-{breakpoint}-{grootte} gebruikt voor sm、md、lg、xl en xxl。

eigenschap is een van het volgende:

  • m - Stel in marge
  • p - Stel in vulling

kanten is een van het volgende:

  • t - Stel in bovenmarge of bovenvulling
  • b - Stel in ondermarge of ondervulling
  • s - Stel in linkermarge of linkervulling
  • e - Stel in rechtermarge of rechtervulling
  • x - Stel tegelijkertijd in linkervulling en rechtervulling of linkermarge en rechtermarge
  • y - Stel tegelijkertijd in bovenvulling en ondervulling of bovenmarge en ondermarge
  • leeg - Stel in op alle vier kanten van het element marge of vulling

grootte is een van het volgende:

  • 0 - Zet marge of vulling Instellen op 0
  • 1 - Zet marge of vulling Instellen op .25rem
  • 2 - Zet marge of vulling Instellen op .5rem
  • 3 - Zet marge of vulling Instellen op 1rem
  • 4 - Zet marge of vulling Instellen op 1.5rem
  • 5 - Zet marge of vulling Instellen op 3rem
  • auto - Zet marge Instellen op auto

Voorbeelden

<div class="pt-4 bg-warning">Ik heb alleen een bovenmarge (1.5rem)</div>
<div class="p-5 bg-success">Ik heb een inwendige marge (3rem) aan alle kanten</div>
<div class="m-5 pb-5 bg-info">Ik heb een buitengemarge (3rem) en ondermarge (3rem) aan alle kanten</div>

Probeer het zelf

Meer voorbeelden van afstanden

.m-# / m-*-# Buitengemarge aan alle kanten Probeer het uit
.mt-# / mt-*-# Bovenbuitengemarge Probeer het uit
.mb-# / mb-*-# Onderbuitengemarge Probeer het uit
.ms-# / ms-*-# Linkerbuitengemarge Probeer het uit
.me-# / me-*-# Rechterbuitengemarge Probeer het uit
.mx-# / mx-*-# Linksonder en rechterondermarge Probeer het uit
.my-# / my-*-# Boven en onder buitengemarge Probeer het uit
.p-# / p-*-# Marge aan alle kanten (vulling) Probeer het uit
.pt-# / pt-*-# Bovenmarge Probeer het uit
.pb-# / pb-*-# Ondermarge Probeer het uit
.ps-# / ps-*-# Linksondermarge Probeer het uit
.pe-# / pe-*-# Rechterondermarge Probeer het uit
.py-# / py-*-# Boven en ondermarge Probeer het uit
.px-# / px-*-# Linksonder en rechterondermarge Probeer het uit

U kunt meer vinden in onze CSS Maatstaven Handboek Lees meer over rem en andere maatstaven in het artikel.

Schaduw

Gebruik shadow- Klasse voegt schaduw toe aan elementen:

Voorbeelden

<div class="shadow-none p-4 mb-4 bg-light">Geen schaduw</div>
<div class="shadow-sm p-4 mb-4 bg-white">Kleine schaduw</div>
<div class="shadow p-4 mb-4 bg-white">Standaard schaduw</div>
<div class="shadow-lg p-4 mb-4 bg-white">Grote schaduw</div>

Probeer het zelf

Verticale uitlijning

Gebruik align- Klassen wijzigen de uitlijning van elementen (alleen van toepassing op inline, inline-block, inline-table en tabelcel-elementen):

Voorbeelden

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

Probeer het zelf

Aspect ratio

Maak responsieve video's of diavoorstellingen op basis van de breedte van de ouder:

Voeg toe .ratio Klassen zijn afgestemd op de gekozen aspect ratio .aspect-ratio-* Voeg toe aan de ouder-elementen en voeg inbedding toe (video of iframe):

Voorbeelden

<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

Probeer het zelf

Zichtbaarheid

Gebruik .visible of .invisible Klassen kunnen de zichtbaarheid van elementen beheersen:

Opmerking:Deze klassen wijzigen de CSS display-waarde niet. Ze voegen enkel toe visibility:visible of visibility:hidden.

Voorbeelden

<div class="visible">Ik ben zichtbaar.</div>
<div class="invisible">Ik ben onzichtbaar.</div>

Probeer het zelf

Sluit pictogram

Gebruik .btn-close Klassen kunnen het stijl van het sluit pictogram instellen. Meestal gebruikt in waarschuwingsoorten en modaal.

Voorbeelden

<button type="button" class="btn-close"></button>

Probeer het zelf

Schermlezers

Gebruik .visually-hidden Klassen kunnen elementen op alle apparaten verbergen, behalve voor schermlezers:

Voorbeelden

<span class="visually-hidden">Ik zal op alle schermen verborgen zijn, behalve voor schermlezers.</span>

Probeer het zelf

Kleuren

Zoals beschreven in het hoofdstuk "Kleuren", hieronder wordt een lijst van alle tekst- en achtergrondkleurklassen weergegeven:

De klassen voor tekstkleuren zijn:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body（Standaard body-kleur/meestal zwart）
  • .text-light

Voorbeelden

Probeer het zelf

Contextuele tekstklassen kunnen ook worden gebruikt voor links:

Voorbeelden

Probeer het zelf

Je kunt ook de klassen .text-black-50 of .text-white-50 gebruiken om 50% ondoorzichtigheid aan zwart of witte tekst toe te voegen:

Voorbeelden

Probeer het zelf

Achtergrondkleur

De klassen voor achtergrondkleuren zijn:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Let op, de achtergrondkleur stelt de tekstkleur niet in, dus in bepaalde gevallen moet je ze combineren met .text-* Klassen kunnen samen worden gebruikt.

Voorbeelden

Probeer het zelf