Téks

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.

Ambisi ngahapus tulisan anu diurus. 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 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

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

téks ieu kedah ngabahekeun indungna.

<div class="text-nowrap" 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.

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

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

téks ringan.

Téks miring.

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>