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.

Teks iki kudu dibungkus.

<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Nyegah teks saka mbungkus karo .text-nowrapkelas.

Teks iki kudu ngluwihi wong tuwa.

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

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

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.

Link non-garis ngisor

<a href="#" class="text-decoration-none">Non-underlined link</a>