Tekst
Documentatie en voorbeelden voor veelgebruikte teksthulpprogramma's om uitlijning, terugloop, gewicht en meer te regelen.
Tekstuitlijning
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>Tekstterugloop en overloop
Wikkel tekst in met een .text-wrapklasse.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>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>Woordbreuk
Voorkom dat lange tekstreeksen de lay-out van uw componenten verbreken door te gebruiken .text-breakom in te stellen overflow-wrap: break-word(en word-break: break-wordvoor IE & Edge-compatibiliteit).
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Teksttransformatie
Transformeer tekst in componenten met hoofdletterklassen.
Tekst in kleine letters.
Tekst in hoofdletters.
Hoofdletters 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.
Lettergewicht en cursief
Verander snel het gewicht (vet) van tekst of cursiveer tekst.
Vetgedrukte tekst.
Vetgedrukte tekst (ten opzichte van het bovenliggende element).
Tekst met normaal gewicht.
Lichtgewicht tekst.
Lichtere tekst (ten opzichte van het bovenliggende element).
Cursieve tekst.
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>Monospace
Wijzig een selectie in onze monospace-lettertypestapel met .text-monospace.
Dit is in monospace
<p class="text-monospace">This is in monospace</p>Kleur resetten
Stel de kleur van een tekst of link opnieuw in met .text-reset, zodat deze de kleur van de bovenliggende kleur overneemt.
Gedempte tekst met een reset-link .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Tekst decoratie
Verwijder een tekstdecoratie met een .text-decoration-noneklasse.
<a href="#" class="text-decoration-none">Non-underlined link</a>