Teks

Dokumentasi dan contoh untuk utiliti teks biasa untuk mengawal penjajaran, pembalut, berat dan banyak lagi.

Penjajaran teks

Selaraskan semula teks dengan mudah kepada komponen dengan kelas penjajaran teks.

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. 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 penjajaran kiri, kanan dan tengah, kelas responsif tersedia yang menggunakan titik putus lebar port pandang yang sama seperti sistem grid.

Teks dijajar ke kiri pada semua saiz port pandangan.

Teks yang dijajarkan ke tengah pada semua saiz port pandangan.

Teks dijajar ke kanan pada semua saiz viewport.

Teks dijajar ke kiri pada viewport bersaiz SM (kecil) atau lebih luas.

Teks dijajar ke kiri pada viewport bersaiz MD (sederhana) atau lebih luas.

Teks dijajar ke kiri pada port pandangan bersaiz LG (besar) atau lebih luas.

Teks dijajar ke kiri pada viewport bersaiz XL (lebih besar) atau lebih luas.

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

Pembalut dan limpahan teks

Elakkan teks daripada dibalut dengan .text-nowrapkelas.

Teks ini sepatutnya melimpahi induk.

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

Untuk kandungan yang lebih panjang, anda boleh menambah .text-truncatekelas untuk memotong teks dengan elipsis. Memerlukan 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

Ubah teks dalam komponen dengan kelas huruf besar teks.

Teks berhuruf kecil.

Teks 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 menukar huruf pertama setiap perkataan, meninggalkan kes mana-mana huruf lain tidak terjejas.

Berat fon dan huruf condong

Tukar berat (keberanian) teks dengan cepat atau condongkan teks.

Teks tebal.

Teks berat biasa.

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>