Tekst
Documentatie en voorbeelden voor gangbare tekst-utilities om uitlijning, omslaan, gewicht en meer te bepalen.
Tekstuitlijning
Lijn tekst eenvoudig opnieuw uit binnen componenten met tekstuitlijningsklassen. Voor start-, end- en centeruitlijning zijn responsieve klassen beschikbaar die dezelfde viewportbreedte-breakpoints als het grid-systeem gebruiken.
<p class="text-start">Op start uitgelijnde tekst op alle viewportformaten.</p>
<p class="text-center">Gecentreerde tekst op alle viewportformaten.</p>
<p class="text-end">Op end uitgelijnde tekst op alle viewportformaten.</p>
<p class="text-sm-start">Op start uitgelijnde tekst op viewports van formaat SM (small) of breder.</p>
<p class="text-md-start">Op start uitgelijnde tekst op viewports van formaat MD (medium) of breder.</p>
<p class="text-lg-start">Op start uitgelijnde tekst op viewports van formaat LG (large) of breder.</p>
<p class="text-xl-start">Op start uitgelijnde tekst op viewports van formaat XL (extra-large) of breder.</p>Let op: we bieden geen utility-klassen voor uitgevulde tekst. Esthetisch gezien ziet uitgevulde tekst er misschien aantrekkelijker uit, maar de woordspatiëring wordt er willekeuriger door en daarmee lastiger leesbaar.
Tekst omslaan en overflow
Laat tekst omslaan met een .text-wrap-klasse.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
Deze tekst hoort om te slaan.
</div>Voorkom dat tekst omslaat met een .text-nowrap-klasse.
<div class="text-nowrap bg-light border" style="width: 8rem;">
Deze tekst hoort buiten het bovenliggende element te treden.
</div>Woordafbreking
Voorkom dat lange stukken tekst de layout van je componenten breken door .text-break te gebruiken, wat word-wrap: break-word en word-break: break-word instelt. We gebruiken word-wrap in plaats van het gangbaardere overflow-wrap voor bredere browserondersteuning, en voegen het verouderde word-break: break-word toe om problemen met flex-containers te vermijden.
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Let op: woorden afbreken is niet mogelijk in het Arabisch, de meestgebruikte RTL-taal. Daarom is .text-break uit onze gecompileerde RTL-CSS verwijderd.
Teksttransformatie
Transformeer tekst in componenten met klassen voor hoofdlettergebruik.
<p class="text-lowercase">Tekst in kleine letters.</p>
<p class="text-uppercase">Tekst in hoofdletters.</p>
<p class="text-capitalize">TeKst mET hooFdletters.</p>Merk op dat .text-capitalize alleen de eerste letter van elk woord wijzigt en het hoofdlettergebruik van de overige letters ongemoeid laat.
Lettergrootte
Wijzig snel de font-size van tekst. Waar onze kopklassen (bijv. .h1–.h6) font-size, font-weight en line-height toepassen, passen deze utilities alleen font-size toe. De afmetingen van deze utilities komen overeen met de kop-elementen van HTML, dus naarmate het nummer stijgt, wordt de grootte kleiner.
<p class="fs-1">.fs-1-tekst</p>
<p class="fs-2">.fs-2-tekst</p>
<p class="fs-3">.fs-3-tekst</p>
<p class="fs-4">.fs-4-tekst</p>
<p class="fs-5">.fs-5-tekst</p>
<p class="fs-6">.fs-6-tekst</p>Pas je beschikbare font-sizes aan door de Sass-map $font-sizes te wijzigen.
Lettergewicht en cursief
Wijzig snel de font-weight of font-style van tekst met deze utilities. font-style-utilities worden afgekort als .fst-* en font-weight-utilities als .fw-*.
<p class="fw-bold">Vetgedrukte tekst.</p>
<p class="fw-bolder">Tekst met vetter gewicht (ten opzichte van het bovenliggende element).</p>
<p class="fw-semibold">Tekst met halfvet gewicht.</p>
<p class="fw-normal">Tekst met normaal gewicht.</p>
<p class="fw-light">Tekst met licht gewicht.</p>
<p class="fw-lighter">Tekst met lichter gewicht (ten opzichte van het bovenliggende element).</p>
<p class="fst-italic">Cursieve tekst.</p>
<p class="fst-normal">Tekst met een normale letterstijl</p>Regelhoogte
Wijzig de regelhoogte met .lh-*-utilities.
<p class="lh-1">Dit is een lange alinea die laat zien hoe de line-height van een element door onze utilities wordt beïnvloed. Klassen worden op het element zelf toegepast, of soms op het bovenliggende element. Deze klassen kunnen naar behoefte met onze utility-API worden aangepast.</p>
<p class="lh-sm">Dit is een lange alinea die laat zien hoe de line-height van een element door onze utilities wordt beïnvloed. Klassen worden op het element zelf toegepast, of soms op het bovenliggende element. Deze klassen kunnen naar behoefte met onze utility-API worden aangepast.</p>
<p class="lh-base">Dit is een lange alinea die laat zien hoe de line-height van een element door onze utilities wordt beïnvloed. Klassen worden op het element zelf toegepast, of soms op het bovenliggende element. Deze klassen kunnen naar behoefte met onze utility-API worden aangepast.</p>
<p class="lh-lg">Dit is een lange alinea die laat zien hoe de line-height van een element door onze utilities wordt beïnvloed. Klassen worden op het element zelf toegepast, of soms op het bovenliggende element. Deze klassen kunnen naar behoefte met onze utility-API worden aangepast.</p>Monospace
Zet een selectie om naar onze monospace font stack met .font-monospace.
<p class="font-monospace">Dit is in monospace</p>Kleur resetten
Reset de kleur van tekst of een link met .text-reset, zodat de kleur van het bovenliggende element wordt geërfd.
<p class="text-muted">
Gedempte tekst met een <a href="#" class="text-reset">gereset link</a>.
</p>Tekstdecoratie
Decoreer tekst in componenten met tekstdecoratieklassen.
<p class="text-decoration-underline">Deze tekst heeft een lijn eronder.</p>
<p class="text-decoration-line-through">Deze tekst heeft een lijn erdoorheen.</p>
<a href="#" class="text-decoration-none">Bij deze link is de tekstdecoratie verwijderd</a>Sass
Variabelen
Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.
Maps
Font-size-utilities worden uit deze map gegenereerd, in combinatie met onze utilities-API.
Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.
Utilities-API
Font- en tekst-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.