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.

Noget pladsholdertekst for at demonstrere berettiget tekstjustering. Vil du gøre det samme for mig? Det er tid til at se musikken i øjnene. Jeg er ikke længere din muse. Hørt det er smukt, vær dommeren og mine piger vil stemme. Jeg kan mærke en føniks indeni mig. Himlen er jaloux på vores kærlighed, engle græder fra oven. Ja, du tager mig til utopien.

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

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

Ombryd tekst med en .text-wrapklasse.

Denne tekst skal ombrydes.

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

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

Denne tekst bør flyde over forælderen.

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

Ordbrud

Forhindr lange tekststrenge i at bryde dine komponenters layout ved at bruge .text-breaktil at indstille word-wrap: break-wordog word-break: break-word. Vi bruger word-wrapi stedet for det mere almindelige overflow-wraptil bredere browserunderstøttelse og tilføjer de forældede word-break: break-wordfor at undgå problemer med flex-containere.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

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.

Fed tekst (i forhold til det overordnede element).

Normal vægt tekst.

Letvægts tekst.

Lettere tekst (i forhold til det overordnede element).

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

Skift et valg til vores monospace skrifttypestak med .text-monospace.

Dette er i monospace

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

Nulstil farve

Nulstil farven på en tekst eller et link med .text-reset, så det arver farven fra sin overordnede.

Lydløs tekst med et nulstillingslink .

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

Tekst dekoration

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

Ikke-understreget link

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