Teks
Dokumentasi lan conto kanggo keperluan teks umum kanggo ngontrol keselarasan, bungkus, bobot, lan liya-liyane.
alignment teks
Gampang nyelarasake teks menyang komponen kanthi kelas keselarasan teks.
Sawetara teks placeholder kanggo nduduhake keselarasan teks sing bener. Apa sampeyan bakal nindakake sing padha kanggo aku? Wektu kanggo ngadhepi musik aku dudu muse sampeyan. Krungu iku ayu, dadi hakim lan bocah-bocah wadon bakal njupuk voting. Aku bisa ngrasakake phoenix ing njero aku. Swarga cemburu marang katresnan kita, malaekat nangis saka ndhuwur. Ya, sampeyan nggawa aku menyang 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>Kanggo alignment kiwa, tengen, lan tengah, kasedhiya kelas responsif sing nggunakake breakpoints jembar viewport padha karo sistem kothak.
Teks sejajar kiwa ing kabeh ukuran viewport.
Teks selaras tengah ing kabeh ukuran viewport.
Teks sejajar tengen ing kabeh ukuran viewport.
Teks sejajar kiwa ing viewports ukuran SM (cilik) utawa luwih amba.
Teks sejajar kiwa ing viewports ukuran MD (sedheng) utawa luwih amba.
Teks sejajar kiwa ing viewport ukuran LG (gedhe) utawa luwih amba.
Teks sejajar kiwa ing viewports ukuran XL (ekstra-gedhe) utawa luwih amba.
<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>Pambungkus teks lan kebanjiran
Bungkus teks karo .text-wrapkelas.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Nyegah teks saka mbungkus karo .text-nowrapkelas.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Kanggo isi luwih dawa, sampeyan bisa nambah .text-truncatekelas kanggo truncate teks karo elipsis. Mbutuhake display: inline-blockutawa 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>Pecah tembung
Nyegah strings teks sing dawa supaya ora ngrusak tata letak komponen kanthi nggunakake .text-breaknyetel word-wrap: break-wordlan word-break: break-word. Kita nggunakake word-wraptinimbang sing luwih umum overflow-wrapkanggo dhukungan browser sing luwih akeh, lan nambah sing ora digunakake word-break: break-wordkanggo ngindhari masalah karo wadhah fleksibel.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Transformasi teks
Ngowahi teks dadi komponen kanthi kelas kapitalisasi teks.
Aksara cilik.
Tulisan gedhe.
Teks kapital.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Elinga carane .text-capitalizemung ngganti huruf pisanan saben tembung, ninggalake cilik huruf liyane ora kena pengaruh.
Bobot huruf lan miring
Cepet ngganti bobot (kandel) teks utawa miring teks.
Teks kandel.
Teks bobot luwih kandel (relatif karo unsur induk).
Teks bobot normal.
Teks entheng.
Teks bobot entheng (relatif karo unsur 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
Ganti pilihan menyang tumpukan font monospace kita nganggo .text-monospace.
Iki ing monospace
<p class="text-monospace">This is in monospace</p>Reset werna
Reset warna teks utawa link nganggo .text-reset, supaya warna kasebut diwenehi warisan saka wong tuwa.
Teks bisu kanthi link reset .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Dekorasi teks
Mbusak hiasan teks karo .text-decoration-nonekelas.
<a href="#" class="text-decoration-none">Non-underlined link</a>