Text

Dokumentation och exempel för vanliga textverktyg för att styra justering, lindning, vikt och mer.

Textjustering

Justera enkelt text till komponenter med textjusteringsklasser.

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

För vänster-, höger- och mittjustering finns responsiva klasser tillgängliga som använder samma brytpunkter för visningsportbredden som rutnätssystemet.

Vänsterjusterad text på alla visningsportstorlekar.

Centrerad text på alla visningsportstorlekar.

Högerjusterad text på alla visningsportstorlekar.

Vänsterjusterad text på visningsportar i storleken SM (liten) eller bredare.

Vänsterjusterad text på visningsportar i storleken MD (medium) eller bredare.

Vänsterjusterad text på visningsportar i storleken LG (stor) eller bredare.

Vänsterjusterad text på visningsportar i storlek XL (extra-large) eller bredare.

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

Textomslutning och översvämning

Slå in text med en .text-wrapklass.

Denna text bör omslutas.

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

Förhindra text från att radbrytas med en .text-nowrapklass.

Denna text bör svämma över föräldern.

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

För längre innehåll kan du lägga till en .text-truncateklass för att trunkera texten med en ellips. 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>

Ordbrytning

Förhindra långa textsträngar från att bryta dina komponenters layout genom att använda .text-breakför att ställa in word-wrap: break-wordoch word-break: break-word. Vi använder word-wrapistället för det vanligare overflow-wrapför bredare webbläsarstöd, och lägger till de föråldrade word-break: break-wordför att undvika problem med flexbehållare.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Textförvandling

Omvandla text i komponenter med textklasser för versaler.

Text med små bokstäver.

Text med versaler.

Kapitaliserad text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Notera hur .text-capitalizeendast den första bokstaven i varje ord ändras, så att alla andra bokstäver inte påverkas av versaler.

Teckensnittsvikt och kursiv stil

Ändra snabbt textens vikt (fethet) eller kursivera text.

Fettext.

Djärvare text (i förhållande till det överordnade elementet).

Normal vikt text.

Lättviktig text.

Lättare text (i förhållande till det överordnade elementet).

Kursiv text.

<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

Ändra ett urval till vår monospace-fontstack med .text-monospace.

Det här är i monospace

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

Återställ färg

Återställ en text eller länks färg med .text-reset, så att den ärver färgen från sin överordnade.

Avstängd text med en återställningslänk .

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

Text dekoration

Ta bort en textdekoration med en .text-decoration-noneklass.

Ej understruken länk

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