Tekst
Dokumintaasje en foarbylden foar mienskiplike teksthulpprogramma's om ôfstimming, ynpakke, gewicht en mear te kontrolearjen.
Tekst alignment
Meitsje tekst maklik opnij oan komponinten mei tekstôfstimmingsklassen.
Guon plakhâldertekst om rjochtfeardige tekstôfstimming te demonstrearjen. Sille jo itselde foar my dwaan? It is tiid om de muzyk te ûndersiikjen Ik bin net mear dyn muze. Hearde dat it moai is, wês de rjochter en myn famkes sille in stim nimme. Ik kin in feniks yn my fiele. De himel is jaloersk op ús leafde, de ingels skrieme fan boppen. Ja, jo bringe my nei utopia.
<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>Foar lofts, rjochts, en sintrum ôfstimming, responsive klassen binne beskikber dy't brûke deselde viewport breedte brekpunten as it raster systeem.
Links rjochte tekst op alle viewportgrutte.
Sintrum rjochte tekst op alle viewportgrutte.
Rjochts ôfstimd tekst op alle viewport maten.
Links rjochte tekst op viewports grutte SM (lyts) of breder.
Links rjochte tekst op viewports grutte MD (medium) of breder.
Links rjochte tekst op viewports grutte LG (grut) of breder.
Links rjochte tekst op viewports grutte XL (ekstra grut) 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>Tekstomwikkeling en oerstreaming
Wrap tekst mei in .text-wrapklasse.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Foarkom dat tekst mei in .text-nowrapklasse omslacht.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Foar langere ynhâld kinne jo in .text-truncateklasse tafoegje om de tekst mei in ellips te trunken. Fereasket 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>Wurd break
Foarkom dat lange tekststringen de yndieling fan jo komponinten brekke troch te brûken .text-breakom yn te stellen word-wrap: break-worden word-break: break-word. Wy brûke word-wrapynstee fan 'e meast foarkommende overflow-wrapfoar bredere browserstipe, en foegje de ferâldere word-break: break-wordta om problemen mei flexkonteners te foarkommen.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Tekst transformaasje
Transformearje tekst yn komponinten mei tekstkapitalisaasjeklassen.
Tekst mei lytse letters.
Tekst mei haadletters.
CapiTalized tekst.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Tink derom hoe't .text-capitalizeallinich de earste letter fan elk wurd feroaret, wêrtroch it gefal fan alle oare letters net beynfloede wurdt.
Lettertypegewicht en kursyf
Feroarje fluch it gewicht (fettigens) fan tekst of kursyf tekst.
Fet tekst.
Bolder gewicht tekst (relatyf oan it âlder elemint).
Normaal gewicht tekst.
Lichtgewicht tekst.
Lichter gewicht tekst (relatyf oan it âlder elemint).
Kursive 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
Feroarje in seleksje nei ús monospace lettertypestapel mei .text-monospace.
Dit is yn monospace
<p class="text-monospace">This is in monospace</p>Kleur weromsette
Stel de kleur fan in tekst of keppeling werom mei .text-reset, sadat it de kleur fan syn âlder erft.
Muted tekst mei in reset keppeling .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Tekstdekoraasje
Fuortsmite in tekst fersiering mei in .text-decoration-noneklasse.
<a href="#" class="text-decoration-none">Non-underlined link</a>