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.
Ambisi kanggo nulis naskah. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. Ing 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>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-breakset overflow-wrap: break-word(lan word-break: break-wordkanggo kompatibilitas IE & Edge).
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>