Source

Téks

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

alignment téks

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

Ambisi ngahapus tulisan 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>

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 dijajarkeun 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 cara maké .text-breakset overflow-wrap: break-word(jeung word-break: break-wordpikeun IE & Edge kasaluyuan).

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.

Téks beurat kandel (relatif ka 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>