Tutorial Bootstrap 4 #5 : Heading Bootstrap 4


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 :

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.

heading bootstrap 4

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.

Class Deskripsi
h1 Class .h1 bisa digunakan untuk membuat text berukuran element heading 1
h2 Class .h2 bisa digunakan untuk membuat text berukuran element heading 2
h3 Class .h3 bisa digunakan untuk membuat text berukuran element heading 3
h4 Class .h4 bisa digunakan untuk membuat text berukuran element heading 4
h5 Class .h5 bisa digunakan untuk membuat text berukuran element heading 5
h6 Class .h6 bisa digunakan untuk membuat text berukuran element heading 6

 

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

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

 



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
1 Komentar
  • Tutorial Bootstrap 4 #12 : Badge Pada Bootstrap 4 – Malas Ngoding 3 weeks ago

    […] bisa diterapkan pada berbagai elemen HTML, bisa dibuat dalam element heading, tombol, table dan […]