Mengenal Komponen-komponen Dalam Bootstrap 4 (part 1)

Dengan HTML saja tidak akan cukup membuat website yang sempurna dan kaya akan fitur. Kamu membutuhkan satu style yang dapat membawa website menjadi lebih hidup. Bootstrap 4 menawarkan cukup banyak class dan style yang bisa kamu kostum sesuai dengan yang kamu mau.

Dalam artikel ini, kita akan mengenal dan membahas beberapa komponen pada Bootstrap 4, seperti typography, tables, list-groups, jumbotron dan sebagainya yang umum ditemukan dalam website. Melalui class-class ini, Bootstrap menolong kita menambahkan banyak fitur untuk website kita dengan mudah dan cepat.

Ada banyak komponen yang disediakan oleh Bootstrap 4, seperti:

• Typography
• Lists Groups
• Tables
• Jumbotron
• Breadcrumbs
• Pagination
• Labels
• Buttons
• Images
• Alerts
• Cards

Typography

Untuk tipografi, Bootstrap 4 menggunakan Helvetica Neue, Helvetica, Arial dan Sans-serif untuk jenis font bawaan. Ini semua adalah standar font dan juga sebagai bawaan dalam semua komputer.

Semua body text memiliki font size yang ditetapkan sebesar 1rem atau 16 pixel dan line height 1.5.

Heading

Semua 6 tag heading mempunyai style dalam Bootstrap 4 dengan font weight sebesar 500, line height sebesar 1.1 dan berikut adalah urutan sizenya:

• h1 - 2.25rem atau 36px
• h2 - 1.87rem atau 30px
• h3 - 1.5rem atau 24px
• h4 - 1.1rem atau 18px
• h5 - 0.87rem atau 14px
• h6 - 0.75rem atau 12px

Bagaimana menggunakannya, lihat dibawah ini.

Dengan kode di atas, kamu akan mendapatkan hasil seperti gambar di bawah ini.

Kamu dapat juga menggunakan heading sebagai class untuk tag HTML apapun. Lihat kode di bawah.

Hal lainnya yang kamu dapat lakukan dengan heading adalah menggunakan 4 display class untuk mengatur ukuran setiap heading. Bootsrap 4 memiliki 4 class yakni:

• display-1 - 3.5rem atau 49px
• display-2 - 4.5rem atau 63px
• display-3 - 5.5rem atau 77px
• display-4 - 6.rem atau 84px

Mari kita lihat bagaimana ini bekerja.

Lihat hasil pada gambar di bawah ini.

List Groups

Bootstrap 4 menawarkan dukungan dan style untuk tiga jenis list: ordered “ol”, unordered “ul” dan definition list “dl”. Di bawah adalah daftar class yang kamu dapat pakai untuk list:

• List-unstyled class - menghapus list-style dan margin-left setiap list.
• List-inline class - menampilkan list dalam sebuah pola inline dan menambahkan beberapa padding.
• Dl-horizontal class - menampilkan dl secara horizontal.

Mari lihat contohnya.

Maka kamu akan mendapatkan hasil seperti ini.

Tables

Bootstrap 4 menangani table layout dalam cara yang lebih baik dari versi sebelumnya.

Ada lima opsi table class yang kita dapat tambahkan untuk merubah tampilan sesuai dengan keinginan.

• Table-striped - selang-seling warna background pada setiap baris.
• table-bordered - menambahkan border abu-abu disekeliling table.
• Table-hover - menambahkan background hover pada setiap baris.
• Table-sm - mengurangi nilai padding setiap baris.
• table-inverse - membalikan warna backround pada table menjadi gelap.

Berikut adalah cara menggunakannya.

Table Striped

Cara menggunakannya adalah dengan memasukan nama class .table-striped di samping class .table di dalam attribute yang sama.

Berikut adalah hasilnya.

Table-bordered

Cara menggunakannya adalah dengan memasukan nama class .table-bordered di samping class .table di dalam attribute yang sama.

Berikut adalah hasilnya.

Table-hover

Cara menggunakannya adalah dengan memasukan nama class .table-hover di samping class .table di dalam attribute yang sama.

Berikut adalah hasilnya.