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
Ombryd tekst med en .text-wrapklasse.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Forhindre tekst i at ombryde med en .text-nowrapklasse.
<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.
<!-- 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.
<a href="#" class="text-decoration-none">Non-underlined link</a>