Pengertian Bootstrap

Apa Sih bootstrap itu? Bootstrap adalah sebuah framework CSS yang bersifat free dan open source. Bootstrap 5 ini menyediakan class-class CSS dan beberapa fungsi Javascript untuk mempermudah dalam pembuatan web.

Versi dari bootstrap ada banyak, namun kali ini kita akan mempelajari bootstrap 5 karena versi tersebut adalah yang terbaru yang dirilis secara resmi pada 5 Mei 2021. Perubahan yang ada pada bootstrap 5 sendiri adalah menghilangkan jQuery dan menggantikannya dengan penggunaan Vanilla JS. Hal ini mampu membuat website menjadi lebih ringan dan mempercepat loading website.

Keunggulan dalam penggunaan bootstrap 5 adalah:

1. Lebih mudah dalam membaca dokumentasi.
2. Ringan dan cepat dengan Vanilla JS.
3. Desain yang responsif yang mengusung mobile-first.
4. Desain yang konsisten.
5. Support modern browsers.

Cara Menggunakan Bootstrap 5

Ada banyak cara untuk menggunakan bootstrap 5, namun kali ini kita akan meng-import bootstrap 5 ini ke dalam file index.html.

Dalam menggunakan bootstrap 5, kita perlu meng-import path css dan js ke dalam file html. Hati-hati dalam penulisannya karena jika salah, maka bootstrap 5 tidak akan terpanggil. Untuk mempermudah dalam penulisan path nya, kita bisa menyalin dari dokumentasi yang ada di web resmi dari bootstrap 5.

Bootstrap 5 Component

Salah satu fitur utama dari Bootstrap 5 adalah adanya komponen-komponen siap pakai yang dapat digunakan untuk mempercepat pengembangan tampilan web. Berikut adalah beberapa komponen Bootstrap 5 yang umum digunakan:

1. Navbar

Komponen Navbar pada Bootstrap 5 digunakan untuk membuat navigasi yang responsif dan mudah digunakan pada tampilan web. Navbar dapat menampilkan logo, menu, dan tombol responsif untuk tampilan pada perangkat mobile.

2. Card

Komponen Card pada Bootstrap 5 digunakan untuk menampilkan konten pada tampilan web dengan tampilan yang menarik. Card dapat menampilkan gambar, judul, dan teks pada sebuah kotak yang dapat dikustomisasi.

3. Button

Komponen ini digunakan untuk menambahkan tombol pada tampilan web. Bootstrap 5 menyediakan berbagai macam jenis tombol seperti tombol outline, tombol primary, tombol secondary, tombol success, tombol danger, tombol warning, tombol info, dan tombol light.

4. Carousel

Komponen ini digunakan untuk menampilkan gambar secara otomatis dengan animasi yang menarik pada tampilan web. Carousel dapat dikustomisasi dengan menambahkan caption pada gambar dan navigasi untuk mengontrol carousel.

5. Alert

Komponen ini digunakan untuk menampilkan pesan yang penting pada tampilan web. Alert dapat menampilkan pesan seperti informasi, peringatan, kesalahan, dan sebagainya.

Diatas adalah contoh dari beberapa komponen bootstrap 5. Masih banyak lagi komponen-komponen siap pakai yang dapat digunakan ketika kita menggunakan bootstrap 5 untuk mempercepat pengembangan tampilan web yang responsif.

Bootstrap 5 Form

Bootstrap 5 memiliki beberapa komponen yang berguna untuk membangun form seperti form control. Form control digunakan untuk membuat form input seperti text, password, email, number, dan lainnya. Dalam Bootstrap 5, form control dapat diatur ukurannya dan diberi feedback validasi. Kali ini kita akan mencoba membuat Login Page menggunakan bantuan bootstrap 5.

1. Buat folder dengan nama bebas dan buka visual studio codenya.
2. Buat file bernama index.html dan style.css untuk kita memprogram nantinya.
3. Didalam index.html kita buat struktur html dan import bootstrap 5 nya.

 

4. Kemudian kita buat judul berupa login page, form untuk email, password, checkbox, dan kemudian tambahkan input berupa submit.

 

Program diatas merupakan struktur awal sebelum kita hias dengan css dan bootstrap 5.

5. Hias struktur html tersebut menggunakan css yang diimportkan ke head index.html

 

6. Buat class pada setiap struktur body html untuk menambahkan bootstrap 5

 

Class pada Bootstrap 5 adalah kumpulan aturan CSS yang diterapkan pada suatu elemen HTML tertentu. Class digunakan untuk mengatur tampilan atau styling dari elemen HTML. Dalam Bootstrap 5, terdapat banyak class yang telah disediakan, seperti class untuk warna, ukuran font, layout, dan masih banyak lagi.

Pada program membuat form login dengan validasi pada email dan password diatas. Pada form terdapat class need-validation yang berfungsi untuk membuat form menerapkan fungsi validasi. Kemudian didalam form terdapat class was-validated yang berfungsi untuk membuat validasi ketika input sudah mempunyai isian. Class invalid-feedback berfungsi ketika isian dari input salah atau tidak terisi. Kemudian pada button terdapat class btn-success dan w-100 yang berfungsi untuk memberikan warna pada button dan lebar 100.

 

 

Tugas:

Buatlah register page menggunakan framework bootstrap 5. Tuliskan email address dan password kalian pada button seperti contoh. Kumpulkan hasilnya dalam bentuk pdf yang berisi hasil screenshot.

 

 

 

Referensi

Bootstrap 5 : Fitur Terbaru, Keunggulan & Cara Menggunakannya (niagahoster.co.id)

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula (petanikode.com)

(1) Responsive Login Form using Bootstrap 5 - YouTube