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.
Beberapa teks placeholder untuk menunjukkan perataan teks yang dibenarkan. Apakah Anda akan melakukan hal yang sama untuk saya? Saatnya menghadapi musik Aku bukan lagi inspirasimu. Mendengar itu indah, jadilah hakim dan gadis-gadisku akan memberikan suara. Aku bisa merasakan phoenix di dalam diriku. Surga cemburu dengan cinta kita, malaikat menangis dari atas. Ya, Anda membawa saya ke 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>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 dan luapan teks
Bungkus teks dengan .text-wrapkelas.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Cegah teks agar tidak dibungkus dengan .text-nowrapkelas.
<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.
<!-- 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>Istirahat kata
Cegah string teks yang panjang agar tidak merusak tata letak komponen Anda dengan menggunakan .text-breakto set word-wrap: break-worddan word-break: break-word. Kami menggunakan word-wrapalih-alih yang lebih umum overflow-wrapuntuk dukungan browser yang lebih luas, dan menambahkan yang tidak digunakan lagi word-break: break-worduntuk menghindari masalah dengan wadah fleksibel.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>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 dengan bobot lebih tebal (relatif terhadap elemen induk).
Teks berat normal.
Teks ringan.
Teks dengan bobot lebih ringan (relatif terhadap elemen induk).
Teks 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
Ubah pilihan ke tumpukan font monospace kami dengan .text-monospace.
Ini di monospace
<p class="text-monospace">This is in monospace</p>Setel ulang warna
Setel ulang teks atau warna tautan dengan .text-reset, sehingga mewarisi warna dari induknya.
Teks yang dibisukan dengan tautan setel ulang .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Dekorasi teks
Hapus dekorasi teks dengan .text-decoration-nonekelas.
<a href="#" class="text-decoration-none">Non-underlined link</a>