Hello guys! Bootstrap merupakan salah satu Framework CSS yang paling terkenal dan sering digunakan. Kali ini kita akan membahas tentang Penggunaan Teks dalam Bootstrap.
Sumber : Getbootstrap.com
Dokumentasi dan contoh untuk utilitas teks umum untuk mengontrol perataan, pembungkusan, ketebalan, dan banyak lagi.
1. Perataan Teks
Sejajarkan ulang teks dengan mudah ke komponen dengan kelas perataan teks. Untuk perataan awal, akhir, dan tengah, tersedia kelas responsif yang menggunakan titik henti lebar viewport yang sama dengan sistem grid.
<p class="text-start">Start aligned text on all viewport sizes.</p><p class="text-center">Center aligned text on all viewport sizes.</p><p class="text-end">End aligned text on all viewport sizes.</p><p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p><p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p><p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p><p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>
Catatan :
Perlu diketahui bahwa di Bootstrap, tidak menyediakan kelas utilitas untuk teks yang diratakan. Meskipun secara estetika, teks yang diratakan mungkin terlihat lebih menarik, hal ini membuat spasi antar kata menjadi lebih acak dan karenanya lebih sulit dibaca.
2. Pembungkusan Teks dan Overflow
Bungkus teks dengan kelas .text-wrap.
<div class="badge bg-primary text-wrap" style="width: 6rem;">This text should wrap.</div>
Cegah teks terbungkus dengan kelas .text-nowrap.
<div class="text-nowrap bd-highlight" style="width: 8rem;">This text should overflow the parent.</div>
3. Pemenggalan Kata (Word Break)
Cegah string teks yang panjang merusak tata letak komponen Anda dengan menggunakan .text-break untuk mengatur word-wrap: break-word dan word-break: break-word. Kami menggunakan word-wrap, bukan overflow-wrap yang lebih umum, untuk dukungan browser yang lebih luas, dan menambahkan word-break: break-word yang sudah tidak digunakan lagi untuk menghindari masalah dengan kontainer fleksibel.
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
Catatan :
Perlu diketahui bahwa pemisahan kata tidak dimungkinkan dalam bahasa Arab, yang merupakan bahasa RTL yang paling banyak digunakan. Oleh karena itu, .text-break dihapus dari CSS terkompilasi RTL kami.
4. Transformasi Teks
Mengubah teks dalam komponen dengan kelas kapitalisasi teks.
<p class="text-lowercase">Lowercased text.</p><p class="text-uppercase">Uppercased text.</p><p class="text-capitalize">CapiTaliZed text.</p>
Perhatikan bagaimana .text-capitalize hanya mengubah huruf pertama setiap kata, dan tidak mengubah huruf besar/kecil pada huruf lainnya.
5. Ukuran Font
Ubah ukuran font teks dengan cepat. Meskipun kelas heading kami (misalnya, .h1–.h6) menerapkan ukuran font, bobot font, dan tinggi baris, utilitas ini hanya menerapkan ukuran font. Ukuran untuk utilitas ini sesuai dengan elemen heading HTML, sehingga semakin banyak jumlahnya, semakin kecil ukurannya.
<p class="fs-1">.fs-1 text</p><p class="fs-2">.fs-2 text</p><p class="fs-3">.fs-3 text</p><p class="fs-4">.fs-4 text</p><p class="fs-5">.fs-5 text</p><p class="fs-6">.fs-6 text</p>
Sesuaikan ukuran font yang tersedia dengan memodifikasi peta Sass $font-sizes.
6. Berat Font dan Miring (Font Weight and Italics)
Ubah bobot font atau gaya font teks dengan cepat menggunakan utilitas ini. Utilitas gaya font disingkat sebagai .fst-* dan utilitas bobot font disingkat sebagai .fw-*.
<p class="fw-bold">Bold text.</p><p class="fw-bolder">Bolder weight text (relative to the parent element).</p><p class="fw-normal">Normal weight text.</p><p class="fw-light">Light weight text.</p><p class="fw-lighter">Lighter weight text (relative to the parent element).</p><p class="fst-italic">Italic text.</p><p class="fst-normal">Text with normal font style</p>
7. Tinggi Baris (Line Height)
Ubah tinggi baris dengan utilitas .lh-*.
<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p><p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p><p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p><p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
8. Monospace
Ubah pilihan ke tumpukan font monospace kami dengan .font-monospace.
<p class="font-monospace">This is in monospace</p>
9. Atur Ulang Warna (Reset Color)
Atur ulang warna teks atau tautan dengan .text-reset, sehingga mewarisi warna dari induknya.
<p class="text-muted">Muted text with a <a href="#" class="text-reset">reset link</a>.</p>
10. Dekorasi Teks
Hiasi teks dalam komponen dengan kelas dekorasi teks.
<p class="text-decoration-underline">This text has a line underneath it.</p><p class="text-decoration-line-through">This text has a line going through it.</p><a href="#" class="text-decoration-none">This link has its text decoration removed</a>
Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.
Terima Kasih 😀😊😘👌👍 :)