Source

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.

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. By 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>

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.

Dizze tekst moat ynpakke. 
<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Foarkom dat tekst mei in .text-nowrapklasse omslacht.

Dizze tekst moat de âlder oerrinne. 
<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.

Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi. 
<!-- 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-breakyn te stellen overflow-wrap: break-word(en word-break: break-wordfoar IE & Edge-kompatibiliteit).

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.

Net ûnderstreke keppeling 
<a href="#" class="text-decoration-none">Non-underlined link</a>