Tekst
Documentatie en voorbeelden voor veelgebruikte teksthulpprogramma's om uitlijning, terugloop, gewicht en meer te regelen.
Lijn tekst eenvoudig opnieuw uit op componenten met tekstuitlijningsklassen.
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. Bij nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>Voor uitlijning links, rechts en in het midden zijn responsieve klassen beschikbaar die dezelfde breekpunten voor de viewport-breedte gebruiken als het rastersysteem.
Links uitgelijnde tekst op alle viewportformaten.
Gecentreerde tekst op alle viewportformaten.
Rechts uitgelijnde tekst op alle viewportformaten.
Links uitgelijnde tekst op viewports met de grootte SM (klein) of breder.
Links uitgelijnde tekst op viewports met het formaat MD (medium) of breder.
Links uitgelijnde tekst op viewports van LG (groot) of breder.
Links uitgelijnde tekst op viewports van formaat XL (extra groot) of breder.
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>Voorkom dat tekst omloopt met een .text-nowrapklasse.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Voor langere inhoud kunt u een .text-truncateklasse toevoegen om de tekst af te kappen met een weglatingsteken. Vereist display: inline-blockof display: block.
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>Transformeer tekst in componenten met hoofdletterklassen.
Tekst in kleine letters.
Tekst in hoofdletters.
Gecapitaliseerde tekst.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Merk op hoe text-capitalizealleen de eerste letter van elk woord verandert, waarbij het geval van andere letters ongewijzigd blijft.
Verander snel het gewicht (vet) van tekst of cursiveer tekst.
Vetgedrukte tekst.
Tekst met normaal gewicht.
Lichtgewicht tekst.
Cursieve tekst.
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>Wijzig een selectie in onze monospace-lettertypestapel met .text-monospace.
Dit is in monospace
<p class="text-monospace">This is in monospace</p>