Tutorial Bootstrap 4 #6 : Text Bootstrap 4


text bootstrap 4

Text Bootstrap 4 – Di tutorial bootstrap 4 bagian ke 6 ini kita akan belajar tentang class-class yang disediakan pada bootstrap 4 untuk diterapkan pada text.

Diwajibkan untuk membaca tutorial sebelumnya tentang cara penggunaan bootstrap jika teman-teman belum membacanya. dan disarankan kepada teman-teman yang belum mengikuti tutorial bootstrap 4 ini dari awal (bagian 1), sebaiknya membaca tutorial sebelumnya dulu.

Agar materi belajar bootstrap 4 nya lebih terarah dan terstruktur.

Text Bootstrap 4

Ada beberapa komponen yang akan di bahas pada Tutorial Bootstrap 4 #6 : Text Bootstrap 4 ini, di antaranya adalah tulisdan dalam bentuk paragraf, kemudian tulisan dalam bentuk quote.

Paragaf

Berikut contoh tampilan paragraf jika sudah terhubung dengan bootstrap.

dan coba jalankan.

text bootstrap 4

text bootstrap 4

Sebenarnya untuk membuat paragraf seperti ini kita tidak harus menggunakan bootstrap. tapi di sini kita hanya ingin melihat bahwa jika menggunakan bootstrap, tampilan tulisan nya menjadi lebih bersih, karena secara default bootstrap sudah menggunakan jenis font yang berbeda (bukan Arial seperti default nya).

Tampilan text yang terhubung dengan bootstrap lebih rapi dibanding tampilan text yang halamnnya tidak terhubung dengan bootstrap.

 

Text Untuk Quote

Bootstrap 4 juga sudah menyediakan class-class untuk membuat tampilan text yang khusus seperti kutipan quote. perhatikan contoh berikut.

Untuk membuat tulisan quote, kita bisa menggunakan class blockquote. dan untuk tulisan keterangan nama pemilik quote nya kita bisa gunakan class blockquote-footer. seperti pada contoh di atas.

quote.html

Kita lihat hasilnya.

quote bootstrap 4

quote bootstrap 4

Gambar di atas adalah tampilan hasil dari contoh penggunaan class blockquote tadi.

Kita juga bisa mengubah posisi nya, jika teman-teman ingin tulisan nya ke tengah atau rata kanan bisa perhatikan contoh berikut.

teman-teman tinggal menambahkan class text-center jika ingin tulisannya ke tengah, atau class text-right juga teman-teman ingin tulisannya rata kanan.

text quote bootstrap 4

text quote bootstrap 4

Oke selesai.

Dokumentasi Typography Bootstrap 4

Silahkan teman-teman bereksperimen agar lebih paham tentang penggunaan class bootstrap untuk membuat penulisan text dengan bentuk quote ini.

Pada tutorial bootstrap 4 selanjutnya kita akan masuk ke cara membuat list menggunakan bootstrap 4.

DEMO & Source Code

 



Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

TUTORIAL MENARIK LAINNYA

jumbotron bootstrap
dropdown bootstrap 4
Diskusi
Tidak Ada Komentar