Tekst

Dokumentasjon og eksempler for vanlige tekstverktøy for å kontrollere justering, innpakning, vekt og mer.

Tekstjustering

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

For venstre-, høyre- og senterjustering er responsive klasser tilgjengelige som bruker samme visningsportbreddebrytepunkter som rutenettsystemet.

Venstrejustert tekst på alle visningsportstørrelser.

Sentrert tekst på alle visningsportstørrelser.

Høyrejustert tekst på alle visningsportstørrelser.

Venstrejustert tekst på visningsporter i størrelse SM (liten) eller bredere.

Venstrejustert tekst på visningsporter med størrelse MD (medium) eller bredere.

Venstrejustert tekst på visningsporter med størrelse LG (stor) eller bredere.

Venstrejustert tekst på visningsporter 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>

Tekstbryting og overløp

Hindre tekst fra å pakkes sammen med en .text-nowrapklasse.

Denne teksten skal flyte over forelderen.

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

For lengre innhold kan du legge til en .text-truncateklasse for å avkorte teksten med en ellipse. Krever 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>

Tekstforvandling

Transformer tekst i komponenter med tekstklasser for store bokstaver.

Små bokstaver.

Tekst med store bokstaver.

Kapitalisert tekst.

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

Legg merke til hvordan text-capitalizebare den første bokstaven i hvert ord endres, slik at alle andre bokstaver ikke påvirkes.

Skriftvekt og kursiv

Endre raskt vekten (fethet) på tekst eller kursiv tekst.

Fet tekst.

Normal vekt tekst.

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