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.

Einhver staðgengilstexti til að sýna réttmæta röðun texta. Ætlarðu að gera það sama fyrir mig? Það er kominn tími til að horfast í augu við tónlistina. Ég er ekki lengur músin þín. Heyrði að það er fallegt, vertu dómarinn og stelpurnar mínar ætla að kjósa. Ég finn fyrir fönix inni í mér. Himnaríki öfundar ást okkar, englar gráta að ofan. Já, þú ferð með mig í útópíuna.

<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</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 útlit íhluta þinna með því að nota .text-breaktil að stilla word-wrap: break-wordog word-break: break-word. Við notum word-wrapí stað þess algengara overflow-wrapfyrir víðtækari vafrastuðning og bætum við því úrelta word-break: break-wordtil að forðast vandamál með sveigjanlega ílát.

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

Óundirstrikaður hlekkur

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