Heading Bootstrap 4 – Setelah sebelumnya teman-teman belajar tentang pengertian bootstrap, cara menghubungkan bootstrap dan juga sudah dijelaskan tentang perbedaan bootstrap versi 4 dengan bootstrap versi sebelumnya.

Baca :

• Tutorial Bootstrap 4 #1 : Pengenalan Bootstrap 4
• Tutorial Bootstrap 4 #2 : Cara Menggunakan Bootstrap 4
• Tutorial Bootstrap 4 #3 : Containers Bootstrap 4

Maka Pada tutorial Bootstrap bagian 5 ini kita akan belajar tentang pengaturan heading pada bootstrap 4.

Heading Bootstrap 4

Pasti teman-teman sudah tahu apa itu heading pada element website. karena pasti sudah sering teman-teman gunakan pada saat membuat website ataupun aplikasi berbasis website.

Heading HTML juga sudah pernah di bahas pada tutorial sebelumnya yaitu di Tutorial Heading Pada HTML.

Heading Bootstrap

Di tutorial ini kita akan belajar bagaimana menggunakan heading pada bootstrap.

Seperti yang sudah kita ketahui, heading merupakan element website untuk membuat judul pada website. heading terdiri dari h1 sampai h6.

heading.html

Perhatikan contoh di atas, bootstrap sudah menyediakan class untuk membuat heading, tanpa menggunakan tag heading ( <h1> … <h6> ).

Yaitu kita bisa menggunakan class h1, h2, h3, h4, h5 dan h6 seperti pada contoh di atas. kita lihat hasilnya.

Referensi source code untuk belajar

Source Code Sistem Informasi Penjualan Kasir Point Of Sales (POS) PHP MySQLi & Ajax

heading bootstrap 4

Seperti yang terlihat pada gambar di atas, hasil dari menggunakan class .h1 sama dengan hasil menggunakan tag <h1>..</h1>. begitu juga sampai class h6. walaupun kita menggunakan tag paragraf seperti pada contoh di atas.

Intinya jika ingin membuat tulisan yang berukuran seperti ukuran heading, kita bisa menggunakan class heading seperti pada contoh di atas.

Membuat Kustom Heading

Kita juga bisa membuat kustomisasi dengan menambahkan element lain, agar tampilan heading website menjadi lebih menarik.

Jadi pada saat kita membuat halaman website kita bisa sealigus membuat deskripsi halaman website tersebut. perhatikan contoh berikut ini.

Pada contoh di atas kita membuat heading 3 dengan text “Tutorial Bootstrap 4”. dan di dalamnya kita buat semacam tulisan deskripsinya. dengan menggunakan class text-muted.

class text-muted adalah class untuk membuat text berwarba abu-abu.

Kita lihat hasil nya.

heading pada bootstrap 4

Contoh lainnya.

heading_muted.html

Oke sekian tutorial tentang heading pada bootstrap. selanjutnya kita akan membahas class-class untuk membuat komponen-komponen lain yang sudah disediakan oleh bootstrap.

Untuk demo nya bisa teman-teman lihat di link berikut.

DEMO

Download Source Code