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

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

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.

Normal vikt text.

Lättviktig text.

Kursiv text.

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>