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.
Enige tijdelijke tekst om uitlijning van gerechtvaardigde tekst te demonstreren. zul je hetzelfde doen voor mij? Het is tijd om de muziek onder ogen te zien. Ik ben niet langer je muze. Ik hoorde dat het mooi is, wees de rechter en mijn meisjes gaan stemmen. Ik voel een feniks in mij. De hemel is jaloers op onze liefde, engelen huilen van bovenaf. Ja, je neemt me mee naar utopie.
<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</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 word-wrap: break-worden word-break: break-word. We gebruiken word-wrapin plaats van de meer gebruikelijke overflow-wrapvoor bredere browserondersteuning en voegen de verouderde word-break: break-wordtoe om problemen met flexcontainers te voorkomen.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Teksttransformatie
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.
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>