Texti

Skjöl og dæmi fyrir algeng textaforrit til að stjórna röðun, umbúðir, þyngd og fleira.

Textajöfnun

Auðveldlega endurstilltu texta við hluti með textajöfnunarflokkum.

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

Fyrir vinstri, hægri og miðja röðun eru móttækilegir flokkar fáanlegir sem nota sömu brotpunkta breiddar útsýnisgáttar og ristkerfið.

Vinstrijafnaður texti á öllum útsýnisstærðum.

Miðjastilltur texti á öllum stærðum útsýnisgátta.

Hægrijafnaður texti á öllum útsýnisstærðum.

Vinstrijafnaður texti á útsýnisgluggum í stærð SM (lítil) eða breiðari.

Vinstrijafnaður texti á útsýnisgluggum í stærð MD (miðlungs) eða breiðari.

Vinstrijafnaður texti á útsýnisgluggum stærð LG (stór) eða breiðari.

Vinstrijafnaður texti á útsýnisgluggum í stærð XL (extra stór) eða breiðari.

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

Textaumbúðir og yfirfall

Koma í veg fyrir að texti sé umbúðir með .text-nowrapbekknum.

Þessi texti ætti að flæða yfir foreldrið.

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

Fyrir lengra efni geturðu bætt við .text-truncateflokki til að stytta textann með sporbaug. Krefst display: inline-blockeða 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>

Textabreyting

Umbreyttu texta í hluti með hástöfum í texta.

Lítill texti.

Hástafur texti.

Stórstafaður texti.

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

Athugaðu hvernig text-capitalizebreytir aðeins fyrsta staf hvers orðs, þannig að há- og hástöfum annarra stafa óbreytt.

Leturþyngd og skáletrun

Breyttu fljótt þyngd (feitrun) texta eða skáletraðu texta.

Feitletraður texti.

Texti með eðlilegri þyngd.

Léttur texti.

Skáletraður texti.

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

Monospace

Breyttu vali í monospace leturstaflann okkar með .text-monospace.

Þetta er í monospace

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