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

Vefja texta með .text-wrapbekk.

Þessi texti ætti að umlykjast.

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

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>

Orðabrot

Komdu í veg fyrir að langir textastrengir brjóti uppsetningu íhluta þinna með því að nota .text-breaktil að stilla overflow-wrap: break-word(og word-break: break-wordfyrir IE og Edge samhæfni).

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

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.

Djarfari texti (miðað við móðurþáttinn).

Texti með eðlilegri þyngd.

Léttur texti.

Léttari texti (miðað við móðurþáttinn).

Skáletraður texti.

<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

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

Þetta er í monospace

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

Endurstilla lit

Endurstilltu lit texta eða tengils með .text-reset, þannig að hann erfi litinn frá foreldri sínu.

Þaggaður texti með endurstillingartengli .

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

Textaskreyting

Fjarlægðu textaskreytingu með .text-decoration-nonebekknum.

Óundirstrikaður hlekkur

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