Tekst

Dokumentation og eksempler på almindelige tekstværktøjer til at kontrollere justering, ombrydning, vægt og mere.

Tekstjustering

Juster nemt tekst til komponenter med tekstjusteringsklasser.

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

Til venstre-, højre- og centerjustering er responsive klasser tilgængelige, der bruger de samme visningsportbreddebrudpunkter som gittersystemet.

Venstrejusteret tekst på alle visningsportstørrelser.

Centreret tekst på alle visningsportstørrelser.

Højrejusteret tekst på alle visningsportstørrelser.

Venstrejusteret tekst på visningsporte i størrelsen SM (lille) eller bredere.

Venstrejusteret tekst på visningsporte i størrelsen MD (medium) eller bredere.

Venstrejusteret tekst på visningsporte i størrelsen LG (stor) eller bredere.

Venstrejusteret tekst på visningsporte i størrelse XL (ekstra stor) eller bredere.

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

Tekstombrydning og overløb

Forhindre tekst i at ombryde med en .text-nowrapklasse.

Denne tekst bør flyde over forælderen.

<div class="text-nowrap" style="width: 8rem;">
  This text should overflow the parent.
</div>

For længere indhold kan du tilføje en .text-truncateklasse for at afkorte teksten med en ellipse. Kræver display: inline-blockeller 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 transformation

Transform tekst i komponenter med tekstklasser med store bogstaver.

Tekst med små bogstaver.

Tekst med store bogstaver.

Kapitaliseret tekst.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Bemærk, hvordan text-capitalizekun det første bogstav i hvert ord ændres, så der ikke påvirkes store og små bogstaver i andre bogstaver.

Skriftvægt og kursiv

Skift hurtigt vægten (fed skrift) af tekst eller kursiv tekst.

Fed tekst.

Normal vægt tekst.

Letvægts tekst.

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