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

Bryt tekst med en .text-wrapklasse.

Denne teksten skal pakkes inn.

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

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

Denne teksten skal flyte over forelderen.

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

Ordbrudd

Hindre lange tekststrenger fra å bryte komponentenes layout ved å bruke .text-breaktil å sette overflow-wrap: break-word(og word-break: break-wordfor IE og Edge-kompatibilitet).

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

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.

Sterkere tekst (i forhold til det overordnede elementet).

Normal vekt tekst.

Lett tekst.

Lettere tekst (i forhold til det overordnede elementet).

Kursiv 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

Endre et utvalg til vår monospace fontstabel med .text-monospace.

Dette er i monospace

<p class="text-monospace">This is in monospace</p>

Tilbakestill farge

Tilbakestill fargen på en tekst eller kobling med .text-reset, slik at den arver fargen fra den overordnede.

Dempet tekst med en tilbakestillingskobling .

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Tekstdekorasjon

Fjern en tekstdekorasjon med en .text-decoration-noneklasse.

Ikke-understreket lenke

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