Teks

Dokumentasi dan contoh untuk utilitas teks umum untuk mengontrol perataan, pembungkusan, bobot, dan lainnya.

Perataan teks

Sejajarkan kembali teks dengan mudah ke komponen dengan kelas perataan teks.

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Selesaikan odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. Pada 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>

Untuk perataan kiri, kanan, dan tengah, tersedia kelas responsif yang menggunakan titik putus lebar area pandang yang sama dengan sistem kisi.

Teks rata kiri pada semua ukuran viewport.

Teks rata tengah pada semua ukuran viewport.

Teks rata kanan pada semua ukuran viewport.

Teks rata kiri pada area pandang berukuran SM (kecil) atau lebih lebar.

Teks rata kiri pada area pandang berukuran MD (sedang) atau lebih lebar.

Teks rata kiri pada area pandang berukuran LG (besar) atau lebih lebar.

Teks rata kiri pada area pandang berukuran XL (ekstra besar) atau lebih lebar.

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

Pembungkus teks dan luapan

Cegah teks agar tidak dibungkus dengan .text-nowrapkelas.

Teks ini harus melebihi induknya.

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

Untuk konten yang lebih panjang, Anda dapat menambahkan .text-truncatekelas untuk memotong teks dengan elipsis. Membutuhkan display: inline-blockatau 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 teks

Transformasi teks dalam komponen dengan kelas kapitalisasi teks.

Teks dengan huruf kecil.

Teks dengan huruf besar.

Teks CapiTaliZed.

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

Perhatikan bagaimana text-capitalizehanya mengubah huruf pertama dari setiap kata, membiarkan huruf besar dari huruf lain tidak terpengaruh.

Berat font dan miring

Ubah bobot (tebal) teks dengan cepat atau miringkan teks.

Teks tebal.

Teks berat normal.

Teks ringan.

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

Monospace

Ubah pilihan ke tumpukan font monospace kami dengan .text-monospace.

Ini di monospace

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