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

Foarkom dat tekst mei in .text-nowrapklasse omslacht.

Dizze tekst moat de âlder oerrinne.

<div class="text-nowrap" 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.

<!-- 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>

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.

Normaal gewicht tekst.

Lichtgewicht tekst.

Kursive 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>