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 :
- 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="assets/css/bootstrap.css"> <title>Tutorial Heading Bootstrap 4 - www.malasngoding.com</title> </head> <body> <div class="container"> <h1>Heading 1 - Malas Ngoding</h1> <h2>Heading 2 - Malas Ngoding</h2> <h3>Heading 3 - Malas Ngoding</h3> <h4>Heading 4 - Malas Ngoding</h4> <h5>Heading 5 - Malas Ngoding</h5> <h6>Heading 6 - Malas Ngoding</h6> <hr> <p class="h1">Paragraf menggunakan class .h1</p> <p class="h2">Paragraf menggunakan class .h2</p> <p class="h3">Paragraf menggunakan class .h3</p> <p class="h4">Paragraf menggunakan class .h4</p> <p class="h5">Paragraf menggunakan class .h5</p> <p class="h6">Paragraf menggunakan class .h6</p> </div> <script src="assets/js/jquery.js"></script> <script src="assets/js/popper.js"></script> <script src="assets/js/bootstrap.js"></script> </body> </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
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="assets/css/bootstrap.css"> <title>Tutorial Heading Bootstrap 4 - www.malasngoding.com</title> </head> <body> <div class="container"> <h3> Tutorial Bootstrap 4 <small class="text-muted">Tutorial Bootstrap 4 www.malasngoding.com</small> </h3> </div> <script src="assets/js/jquery.js"></script> <script src="assets/js/popper.js"></script> <script src="assets/js/bootstrap.js"></script> </body> </html> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="assets/css/bootstrap.css"> <title>Tutorial Heading Bootstrap 4 - www.malasngoding.com</title> </head> <body> <div class="container"> <h3> Tutorial Bootstrap 4 <small class="text-muted">Tutorial Bootstrap 4 www.malasngoding.com</small> </h3> <hr> <p>Tutorial bootstrap 4 lengkap dari dasar sampai mahir. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio incidunt eius iure inventore eaque facilis, et repellat tempora praesentium. Nemo iste vero delectus eius numquam, atque itaque maxime libero nostrum.</p> <p>Tutorial bootstrap 4 lengkap dari dasar sampai mahir. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio incidunt eius iure inventore eaque facilis, et repellat tempora praesentium. Nemo iste vero delectus eius numquam, atque itaque maxime libero nostrum.</p> </div> <script src="assets/js/jquery.js"></script> <script src="assets/js/popper.js"></script> <script src="assets/js/bootstrap.js"></script> </body> </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.
Tutorial Menarik Lainnya
Tutorial Bootstrap 4 #35 : Border Bootstrap 4
Tutorial Bootstrap 4 #34 : Tooltips Bootstrap 4
Tutorial Bootstrap 4 #33 : Toasts Bootstrap 4
Tutorial Bootstrap 4 #32 : Spinners Bootstrap 4
[…] bisa diterapkan pada berbagai elemen HTML, bisa dibuat dalam element heading, tombol, table dan […]