Mengenal Bootstrap Typography pada HTML dan Bootstrap 4

Mengenal Bootstrap Typografi pada Bootstrap 4 – Pasa kesempatan kali ini saya masih akan membahas tentang bootstrap. Sebenarnya harusnya ini saya posting di awal tapi karena sudah terlanjur jadi tidak apa-apa daripada tidak sama sekali. Kali ini saya akan membahas tentang typhografi yag ada pada bootstrap. Ada banyak macamnya oleh sebab itu kita akan bahas satu persatu.

Seperti yang sudah-sudah saya selalu jelaskan diawal pasti kita perlu librari css dari bootstrap. Pada postingan ini saya contohkan dengan menambahkan baris dibawah pada tag <head>

Saya menggunakan css online karena hanya keperluan demo saja. Jika sobat ingin menggunakan untuk keperluan development maka sobat harus mendownloadnya terlebih dahulu atau sobat bisa mendownloadnya pada akhir postingan ini bersama dengan project yang dibuat pada postingan ini.

1. Heading

Kita bisa membuat heading menggunakan elemen HTML seperti dibawah

Atau kita bisa membuatnya pada elemen paragraph dan menambahkan class heading seperti dibawah

hasilnya akan sama saja seperti dibawah

Jika sobat ingin membuat heading super besar maka sobat bisa menambahkan class .display seperti contoh dibawah

Hasilnya adalah sebagai berikut

Sobat juga bisa menambahkan tulisan kecil dengan tulisan abu-abu pada tag heading, cara penulisannya adalah sebagai berikut

Tampilannya

 

2. Elemen teks

Ada banyak elemen teks yang bisa digunakan, seperti dalam word yaitu kita bisa membuatnya menjadi bols, italic, underline, highlight , dll. Contoh penggunaannya adalah sebagai berikut

Tampilannya :

 

3. Text Aligment

Sama seperti word yang memiliki text aligment, pada bootstrap juga ada textalignment jadi sobat jika sudah menggunakan bootstrap tidak perlu lagi ya bikin cssnya sendiri karena tinggal pakai saja. Cara pemakaiannya adalah sebagai berikut

Hasil :

4. Text wrapping and overflow

Jika sobat ingin memotong tulisan secara otomatis bootstrap juga sudah menyediakan text wrapping dan memotong kata yang terlalu panjang, cara penggunaannya adalah sebagai berikut

Tampilannya :

5. Text Case

Jika sobat ingin memaksa teks yang ingin ditampilkan pada website itu harus kecil semua, besar semua atau bisa capitalize seperti firut yang ada pada Microsoft Word maka sobat bisa menggunakan kode dibawah

Hasilnya :

6. Warna Teks

Jika sobat ingin mengganti warna teks, bootstrap sudah menyediakannya jadi sobat bisa langsung menggunakannya saja dengan memanggil classnya. Jadi sobat tidak perllu membuat css sendiri kecuali memang warna yang sobat inginkan tidak ada dalam list dibawah. Penulisannya adalah sebagai berikut

Hasil :

7. Backgrond color

Selain mengganti warna teks sobat juga bisa mengganti warna latarnya atau background color, caranya adalah sebagai berikut

Hasil :

 

8. Blockquote

Penulisan Blockquote dalam bootstrap sangat mudah dan bisa juga dipadukan dengan text aligment, caranya yaitu

Hasil

9. Unstyled Lists

Bootsrtrap juga menyediakan class .list-unstyled, jika sobat ingin membuat list tapi tanpa simbol dot atau yang lainnya, cara penggunaanya adalah sebagai berikut

 

10. Inline Lists

Inline list ini biasa digunakan saat sobat membuat navigation menu. Jadi bentuknya list namun tetap dalam satu baris dan tentunya ini bisa digabungkan dengan apa saja sesuai kreasi sobat. Cara penggunaannya adalah sebagai berikut

Hasil :

11. Description list alignment

List bentuk ini sangat berguna sekal ketimbang sobat membuatnya menggunakan tabel karena memang banyak programmer yang mengakalinya dengan table no border untuk membuat list ini, cara penggunaannya adalah sebagai berikut

Hasil :

 

Dari contoh-contoh diatas tentunya bisa digabung-gabungkan sesuai kreasi sobat. Atau bisa juga digabungkan dengan fitu lainnya pada bootstrap.

Artikel Tentang Bootstrap Lainnya :

Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah

Macam-macam Form Input pada HTML dan Bootstrap

Cara Membuat SweetAlert dan Macam-Macamnya pada PHP

Membuat Bootstrap Modal dan Animasinya pada PHP

Membuat Badges Menggunakan Bootstrap 4

Membuat Alert pada HTML menggunakan Bootstrap 4

Menggunakan Popover pada Elemen HTML dan Bootstrap 4

Menggunakan Tooltip pada HTML dan Bootstrap 4

 

Sekian postingan saya tentang Mengenal Bootstrap Typography pada HTML dan Bootstrap 4. Apabila ada kesalahan saya mohon maaf dan jika ada pertanyaan bisa tinggalkan pada kolom komentar dibawah. Sampai ketemu lagi pada postingan selanjutnya.

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

6 thoughts on “Mengenal Bootstrap Typography pada HTML dan Bootstrap 4

Leave a Reply

Your email address will not be published. Required fields are marked *

one × three =