Belajar Typography di Bootstrap 4

Bootstrap 4 menggunakan ukuran font (font-size) default nya adalah 16px dan tinggi baris (line-height) nya 1.5. Untuk jenis Font (font-family) default nya adalah "Helvetica Neue", Helvetica, Arial, sans-serif.

Selain itu, semua elemen <p> memiliki margin-top: 0 dan margin-bottom: 1rem (Secara defaultnya adalah 16px).


Heading pada Bootstrap 4

Bootstrap 4 akan membuat tampilan Heading pada HTML (<h1> sampai <h6>) dengan font (font-weight) yang tebal dan ukuran font (font-size) yang berbeda-beda. Berikut adalah contohnya:

 Heading pada Bootstrap 4
Lihat kode di Github | Lihat Live Demo

Display Heading pada Bootstrap 4

Display Heading dapat digunakan untuk membuat Heading lebih menonjol dari Heading normal (Dengan ukuran font yang lebih besar dan ketebalan font yang tipis) dan terdapat empat Class yang dapat kita gunakan antara lain: .display-1, .display-2, .display-3, dan .display- 4. Berikut adalah contohnya:

Display Heading pada Bootstrap 4
Lihat kode di Github | Lihat Live Demo

Elemen small pada Bootstrap 4

Pada Bootstrap 4, elemen HTML <small> digunakan untuk membuat teks Secondary pada Heading agar menjadi lebih kecil dan tipis. Berikut adalah contohnya:

Elemen small pada Bootstrap 4
Lihat kode di Github | Lihat Live Demo

Elemen mark pada Bootstrap 4

Pada Bootstrap 4, elemen HTML <mark> dapat ditampilkan dengan warna Background kuning dan beberapa Padding. Berikut adalah contohnya:

Elemen mark pada Bootstrap 4
Lihat kode di Github | Lihat Live Demo

Elemen abbr pada Bootstrap 4

Pada Bootstrap 4, elemen HTML <abbr> dapat ditampilkan dengan warna garis bawah titik-titik (Dotted). Berikut adalah contohnya:

Elemen abbr pada Bootstrap 4
Lihat kode di Github | Lihat Live Demo

Elemen blockquote pada Bootstrap 4

Kita dapat menggunakan Class .blockquote kedalam elemen <blockquote> ketika ingin membuat konten Block Quote dari sumber lain. Berikut adalah contohnya:

Elemen blockquote pada Bootstrap 4
Lihat kode di Github | Lihat Live Demo

Elemen dl pada Bootstrap 4

Pada Bootstrap 4, elemen HTML <dl> dapat ditampilkan seperti berikut:

Elemen dl pada Bootstrap 4
Lihat kode di Github | Lihat Live Demo

Elemen code pada Bootstrap 4

Pada Bootstrap 4, elemen HTML <code> dapat ditampilkan seperti berikut:

Elemen code pada Bootstrap 4
Lihat kode di Github | Lihat Live Demo

Elemen kbd pada Bootstrap 4

Pada Bootstrap 4, elemen HTML <kbd> dapat ditampilkan seperti berikut:

Elemen kbd pada Bootstrap 4
Lihat kode di Github | Lihat Live Demo

Elemen pre pada Bootstrap 4

Pada Bootstrap 4, elemen HTML <pre> dapat ditampilkan seperti berikut:

Elemen pre pada Bootstrap 4
Lihat kode di Github | Lihat Live Demo

Catatan: Kalian dapat melihat daftar Class untuk Typography lainnya pada bagian yang akan datang.

0 Komentar