Tekst

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

Tekstjustering

Juster enkelt tekst til komponenter med tekstjusteringsklasser.

Noe plassholdertekst for å demonstrere justert tekstjustering. Vil du gjøre det samme for meg? Det er på tide å møte musikken. Jeg er ikke lenger musen din. Hørt det er vakkert, vær dommeren og jentene mine skal stemme. Jeg kan kjenne en føniks inni meg. Himmelen er sjalu på vår kjærlighet, engler gråter ovenfra. Ja, du tar meg til utopia.

<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</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

Forhindre at lange tekststrenger bryter komponentenes layout ved å bruke .text-breaktil å angi word-wrap: break-wordog word-break: break-word. Vi bruker word-wrapi stedet for det mer vanlige overflow-wrapfor bredere nettleserstøtte, og legger til de utdaterte word-break: break-wordfor å unngå problemer med fleksible beholdere.

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>