Bootstrap 5.2 / Utilities
Randen
Gebruik border-utilities om de rand en border-radius van een element snel op te maken. Ideaal voor afbeeldingen, knoppen of elk ander element.
Border
Gebruik border-utilities om de randen van een element toe te voegen of te verwijderen. Kies alle randen tegelijk of één voor één.
Toevoegend
Voeg randen toe aan eigen elementen:
HTML
<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>Verwijderend
Of verwijder randen:
HTML
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>Kleur
Wijzig de randkleur met utilities die op onze themakleuren zijn gebaseerd.
HTML
<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>Of pas de standaard-border-color van een component aan:
HTML
<div class="mb-4">
<label for="exampleFormControlInput1" class="form-label">E-mailadres</label>
<input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="naam@voorbeeld.nl">
</div>
<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
Gevaarlijke kop
</div>
<div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
Randkleur en -breedte wijzigen
</div>Dekking
Nieuw in v5.2.0
De border-{color}-utilities van Bootstrap worden met Sass gegenereerd via CSS-variabelen. Dat maakt kleurwijzigingen in realtime mogelijk zonder compilatie, plus dynamische aanpassingen van de alfatransparantie.
Hoe het werkt
Neem onze standaard .border-success-utility.
CSS
.border-success {
--bs-border-opacity: 1;
border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}We gebruiken een RGB-versie van onze CSS-variabele --bs-success (met de waarde 25, 135, 84) en koppelen daar een tweede CSS-variabele aan, --bs-border-opacity, voor de alfatransparantie (met standaardwaarde 1 dankzij een lokale CSS-variabele). Dat betekent dat wanneer je nu .border-success gebruikt, je berekende color-waarde rgba(25, 135, 84, 1) is. De lokale CSS-variabele binnen elke .border-*-klasse voorkomt overervingsproblemen, zodat geneste instanties van de utilities niet automatisch een aangepaste alfatransparantie krijgen.
Voorbeeld
Om die dekking te wijzigen, overschrijf je --bs-border-opacity via eigen stijlen of inline stijlen.
HTML
<div class="border border-success p-2 mb-2">Dit is de standaard success-rand</div>
<div class="border border-success p-2" style="--bs-border-opacity: .5;">Dit is een success-rand met 50% dekking</div>Of kies een van de .border-opacity-utilities:
HTML
<div class="border border-success p-2 mb-2">Dit is de standaard success-rand</div>
<div class="border border-success p-2 mb-2 border-opacity-75">Dit is een success-rand met 75% dekking</div>
<div class="border border-success p-2 mb-2 border-opacity-50">Dit is een success-rand met 50% dekking</div>
<div class="border border-success p-2 mb-2 border-opacity-25">Dit is een success-rand met 25% dekking</div>
<div class="border border-success p-2 border-opacity-10">Dit is een success-rand met 10% dekking</div>Breedte
HTML
<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>Radius
Voeg klassen aan een element toe om de hoeken eenvoudig af te ronden.
HTML
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2075%2075%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%2275x75%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3E75x75%3C%2Ftext%3E%3C%2Fsvg%3E" width="75" height="75" class="rounded" alt="75x75">
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2075%2075%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%2275x75%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3E75x75%3C%2Ftext%3E%3C%2Fsvg%3E" width="75" height="75" class="rounded-top" alt="75x75">
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2075%2075%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%2275x75%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3E75x75%3C%2Ftext%3E%3C%2Fsvg%3E" width="75" height="75" class="rounded-end" alt="75x75">
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2075%2075%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%2275x75%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3E75x75%3C%2Ftext%3E%3C%2Fsvg%3E" width="75" height="75" class="rounded-bottom" alt="75x75">
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2075%2075%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%2275x75%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3E75x75%3C%2Ftext%3E%3C%2Fsvg%3E" width="75" height="75" class="rounded-start" alt="75x75">
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2075%2075%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%2275x75%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3E75x75%3C%2Ftext%3E%3C%2Fsvg%3E" width="75" height="75" class="rounded-circle" alt="75x75">
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20150%2075%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22150x75%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2218%22%3E150x75%3C%2Ftext%3E%3C%2Fsvg%3E" width="150" height="75" class="rounded-pill" alt="150x75">Formaten
Gebruik de schaalklassen voor grotere of kleinere afgeronde hoeken. De formaten lopen van 0 tot en met 5 en kunnen worden geconfigureerd door de utilities-API aan te passen.
HTML
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2075%2075%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%2275x75%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3E75x75%3C%2Ftext%3E%3C%2Fsvg%3E" width="75" height="75" class="rounded-0" alt="75x75">
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2075%2075%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%2275x75%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3E75x75%3C%2Ftext%3E%3C%2Fsvg%3E" width="75" height="75" class="rounded-1" alt="75x75">
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2075%2075%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%2275x75%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3E75x75%3C%2Ftext%3E%3C%2Fsvg%3E" width="75" height="75" class="rounded-2" alt="75x75">
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2075%2075%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%2275x75%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3E75x75%3C%2Ftext%3E%3C%2Fsvg%3E" width="75" height="75" class="rounded-3" alt="75x75">
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2075%2075%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%2275x75%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3E75x75%3C%2Ftext%3E%3C%2Fsvg%3E" width="75" height="75" class="rounded-4" alt="75x75">
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2075%2075%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%2275x75%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3E75x75%3C%2Ftext%3E%3C%2Fsvg%3E" width="75" height="75" class="rounded-5" alt="75x75">CSS
Variabelen
Nieuw in v5.2.0
Standaardwaarden: zie scss/_root.scss in de Bootstrap-broncode.
Sass-variabelen
Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.
Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.
Sass-mixins
Standaardwaarden: zie scss/mixins/_border-radius.scss in de Bootstrap-broncode.
Utilities-API
Border-utilities worden gedeclareerd in onze utilities-API in scss/_utilities.scss. Leer hoe je de utilities-API gebruikt.
Standaardwaarden: zie scss/_utilities.scss in de Bootstrap-broncode.
Standaardwaarden: zie scss/_utilities.scss in de Bootstrap-broncode.