Testua

Testu-erabilgarritasun arrunten dokumentazioa eta adibideak lerrokatzea, biltzea, pisua eta abar kontrolatzeko.

Testuaren lerrokatzea

Erraz lerrokatu testua osagaiekin testua lerrokatzeko klaseekin.

Leku-markako testu batzuk justifikatutako testuaren lerrokatzea erakusteko. Berdin egingo al didazu nigatik? Musikari aurre egiteko ordua da jada ez naiz zure musa. Entzun dut ederra dela, izan epailea eta nire neskek botoa hartuko dute. Fenix bat sentitzen dut nire barnean. Zerua gure maitasunaz jeloskor dago, aingeruak goitik negarrez. Bai, utopiara eramaten nauzu.

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

Ezkerreko, eskuineko eta erdiko lerrokatzeetarako, sare-sistemaren bista-zabalera eten-puntu berdinak erabiltzen dituzten klase sentikorrak daude eskuragarri.

Ezkerrean lerrokatuta dagoen testua bista-tamaina guztietan.

Zentratu lerrokatutako testua bista-tamaina guztietan.

Eskuinean lerrokatuta dagoen testua bista-tamaina guztietan.

Ezkerrean lerrokatuta dagoen testua SM (txikia) edo zabalagoa duten bistaratzeetan.

Ezkerrean lerrokatuta dagoen testua MD (ertaina) edo zabalagoko bistaratzeetan.

Ezkerrean lerrokatuta dagoen testua LG tamainako (handia) edo zabalagoko bisualetan.

Ezkerrean lerrokatuta dagoen testua XL tamainako (handiagoa) edo zabalagoko bisualetan.

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

Testua biltzea eta gainezkatzea

Bilatu testua .text-wrapklase batekin.

Testu honek bildu beharko luke.

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

.text-nowrapSaihestu testua klase batekin biltzea .

Testu honek gurasoak gainezka egin beharko luke.

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

Eduki luzeagoa lortzeko, .text-truncateklase bat gehi dezakezu testua elipsi batekin mozteko. edo eskatzen du .display: inline-blockdisplay: 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>

Hitz-haustea

Saihestu testu-kate luzeek zure osagaien diseinua haustea .text-breakezartzeko word-wrap: break-wordeta word-break: break-word. Arakatzaileen euskarria zabalagorako word-wrapohikoagoa denaren ordez erabiltzen dugu , eta zaharkitua gehitzen dugu flex edukiontziekin arazoak saihesteko.overflow-wrapword-break: break-word

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Testu-eraldaketa

Eraldatu testua osagaietan testu larriz idazteko klaseekin.

Testua minuskulaz.

Testua maiuskulaz.

Testu maiuskulatua.

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

Kontuan izan nola .text-capitalizehitz bakoitzaren lehen letra bakarrik aldatzen den, beste edozein hizkiren maiuskulak eragin gabe utziz.

Letraren pisua eta letra etzana

Azkar aldatu testuaren pisua (lodia) edo jarri testua etzana.

Testu lodia.

Testu lodiagoa (elementu nagusiari dagokiona).

Pisu arrunteko testua.

Testu arina.

Testu arinagoa (elementu nagusiari dagokiona).

Testu etzana.

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

Monoespazioa

Aldatu aukeraketa bat gure espazio bakarreko letra-tipo-pilara .text-monospace.

Hau monoespazioan dago

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

Berrezarri kolorea

Berrezarri testu edo estekaren kolorea rekin .text-reset, bere gurasoaren kolorea hereda dezan.

Ezkutatuta dagoen testua berrezartzeko esteka batekin .

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

Testu dekorazioa

Kendu testu-apainketa .text-decoration-noneklase batekin.

Azpimarratu gabeko esteka

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