Dokuméntasi sareng conto pikeun utilitas téks umum pikeun ngontrol alignment, bungkus, beurat, sareng seueur deui.

alignment téks

Gampang realign téks kana komponén kalayan kelas alignment téks.

Sababaraha téks pananda tempat pikeun nunjukkeun alignment téks anu diyakinkeun. Dupi anjeun ngalakukeun hal nu sarua pikeun kuring? Waktosna pikeun nyanghareupan musik Abdi henteu deui muse anjeun. Kadéngé éta geulis, jadi hakim jeung katresna kuring gonna nyokot sora. Abdi tiasa ngaraos phoenix di jero kuring. Sawarga cemburu cinta urang, malaikat ceurik ti luhur. Leres, anjeun nyandak kuring ka utopia.

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

Pikeun alignment kénca, katuhu, jeung tengah, kelas responsif sadia nu make breakpoints lebar viewport sarua jeung sistem grid.

Téks anu dijajarkeun kénca dina sadaya ukuran viewport.

Téks dijajarkeun tengah dina sadaya ukuran viewport.

Téks anu dijajarkeun katuhu dina sadaya ukuran viewport.

Téks dijejeran kénca dina viewports ukuran SM (leutik) atawa leuwih lega.

Téks dijajarkeun kénca dina viewports ukuranana MD (sedeng) atawa leuwih lega.

Téks dijajarkeun kénca dina viewports ukuran LG (ageung) atawa leuwih lega.

Téks dijejeran kénca dina viewports ukuran XL (ekstra-gedé) atawa leuwih lega.

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

Bungkus téks sareng ngabahekeun

Bungkus téks sareng .text-wrapkelas.

téks ieu kedah dibungkus.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Nyegah téks tina bungkus sareng .text-nowrapkelas.

téks ieu kedah ngabahekeun indungna.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

Pikeun eusi anu langkung panjang, anjeun tiasa nambihan .text-truncatekelas pikeun motong téks nganggo elipsis. Merlukeun display: inline-blockatawa display: block.

Praeterea iter est quasdam res quas ex communi.
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>

Pegat kecap

Nyegah string panjang téks ti megatkeun tata perenah komponén anjeun ku ngagunakeun .text-breakpikeun nyetél word-wrap: break-wordtur word-break: break-word. Kami nganggo word-wraptinimbang anu langkung umum overflow-wrappikeun pangrojong browser anu langkung lega, sareng tambahkeun anu dicabut word-break: break-wordpikeun ngahindarkeun masalah sareng wadah fleksibel.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Transformasi téks

Transformasi téks dina komponén kalayan kelas kapitalisasi téks.

Aksara leutik.

Tulisan hurup ageung.

téks CapiTaliZed.

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

Catet kumaha .text-capitalizengan ukur ngarobih hurup kahiji unggal kecap, sareng ngantepkeun kasus hurup sanésna henteu kapangaruhan.

Beurat font sareng miring

Gancang ngarobah beurat (boldness) téks atanapi miring téks.

téks kandel.

Tulisan beurat anu langkung kandel (relatif sareng unsur indungna).

téks beurat normal.

téks ringan.

Téks beurat torek (relatif ka unsur indungna).

Téks miring.

<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

Ganti pilihan kana tumpukan font monospace kami nganggo .text-monospace.

Ieu dina monospace

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

Reset warna

Reset téks atanapi warna link nganggo .text-reset, supados warnana warisan ti indungna.

Téks diredam kalayan tautan reset .

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

Hiasan téks

Cabut hiasan téks sareng .text-decoration-nonekelas.

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