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.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Hindre tekst fra å pakkes sammen med en .text-nowrapklasse.
<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.
<!-- 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.
<a href="#" class="text-decoration-none">Non-underlined link</a>