Pada bootstrap4 terdapat macam-macam class yang bisa kita manfaatkan dalam pembuatan website. Nah salah satunya adalah class text yang akan saya bahas dalam artikel tentang Cara Memanfaatkan Class Text Pada Bootstrap4 Part1. Dimana class text pada boostrap ada beberapa macam, yaitu Text alignment, Text wrapping and overflow, Text transform, Font Weight & italic dan monospace.

Cara Memanfaatkan Class Text Pada Bootstrap4 Part1 yang pertama akan dibahas adalah tentang Text Alignment, dimana class text alignment ini berfungsi untuk mengatur text rata kanan dengan memberikan .text-right , rata tengah yaitu .text-center, rata kiri yaitu dengan memberikan .text-left dan rata kiri-kanan yaitu .text-justify. Dan berikut ini contoh penulisan classnya.

Pembahasan selanjutnya kita akan membahas tentang text wrapping dan overflow. Dimana pada class ini berfungsi untuk mengatur panjang dari text dan menyembunyikan beberapa kata dari text tersebut dengan mengatur lebar yang kita tentukan.

Berikut ini contoh dari text wrapping dengan menggunakan .text-nowrap. Dimana meskipun saya memberikan lebar terhadap pembungkusnya dia akan tetap menampilkan seluruh textnya.

Dan jika saya buka di browser, maka hasilnya akan tampak seperti pada gambar di bawah ini.

Cara Memanfaatkan Class Text Pada Bootstrap4 Part1

Berikut ini contoh dari overflow dengan memberikan . text-truncate, dimana pembungkusnya akan diberikan lebar tertentu dan otomatis panjang text yang akan muncul sesuai lebar yang di tentukan oleh bootstrapnya dan diakhir kalimat akan ada titik-titik yang menandakan sisa textnya disembunyikan.

Jika dilihat di browser maka tampilannya seperti pada gambar di bawah ini.

Cara Memanfaatkan Class Text Pada Bootstrap4 Part1

Dan Pembahasan selanjutnya saya akan membahas tentang Text Transform pada bootstrap. Dimana class ini berfungsi untuk membuat huruf kecil dan huruf capital pada sebuah text atau kalimat. Dan berikut ini jeni-jenis class text transform yang disediakan oleh bootstrap4.

Maka hasil yang akan muncul seperti pada gambar di bawah ini.

Cara Memanfaatkan Class Text Pada Bootstrap4 Part1

Demikian artikel tentang Cara Memanfaatkan Class Text Pada Bootstrap4 Part1. Sampai jumpa di pembahasan selanjutnya yaitu bagian kedua .