Bootstrap 4 Vs Bootstrap 5 Apa Bedanya, Ada Yang Baru?

Asslamualaikum, wr. wb. Apakah teman-teman sudah tahu kalau saat ini Bootstrap sedang melakukan migrasi dari versi 4 ke versi 5. Saat artikel ini dibuat, Bootstrap sudah memasuki versi 5 Alpha, yang artinya masih belum stabil atau masih akan ada perubahan kedepannya. 

Ada beberpa perubahan dan peningkatan dari versi sebelumnya, dimana versi ke-5 ini Bootstrap tidak lagi bergantung pada jQuery dan mereka sudah memberhentikan dukungan untuk Browser Internet Explorer. Untuk lebih jelasnya mari kita bahas, apa saja perubahan yang terjadi.

1. Desain Dan Tampilan Baru

Bootstrap 5 mengubah desain logonya menjadi lebih fresh, serta desain web dokumentasinya. Berikut tampilan perbedaannya bisa kalian lihat pada gambar berikut:

Tampilan Bootstrap Versi 5

Tampilan Bootstrap Versi 4

Untuk lebih detailnya kalian bisa lihat disini https://v5.getbootstrap.com/ untuk versi 5 dan disini https://getbootstrap.com/ untuk versi 4. Di versi 5 ini dokumentasinya lebih enak digunakan baik dari segi User Interface maupun User Experience. Jika kalian ingin lihat penjelasan secara videonya saya sarankan cek di channel youtube nya Programmer UNPAS.

2. Tidak Lagi Menggunakan jQuery

Bootstrap 5 sudah tidak akan menggunakan jQuery, melainkan menggunakan javascript. Hal ini pasti akan menjadikan projek kita lebih ringan. Apalagi javascript saat ini sudah sangat modern. Penyempurnaan penggunaan javascript ini berfokus pada kualitas kode dan menjempatani jesenjangan antara versi 4 dan 5.

Sekarang kita lihat dokumentasi bagian component Modal. Berikut perbedaannya saat di versi 4 dan versi 5 yang sudah tidak lagi menggunakan jQuery.

Pada versi 4 masih menggunakan jQuery

Pada versi 5 sudah murni Javascript

3. Peningkatan Pada Fitur Customization

Pada Bootstrap 5 telah menyediakan menu khusus untuk Kustomisasi yang sebelumnya belum ada di Bootstrap 4. Dengan penyajian yang jelas dan lebih detail dapat kalian lihat seperti gambar berikut:

Kita akan ambil contoh pada bagian Color, dimana pada versi 4 sangat terbatas, namun di versi 5 ini pilihannya lebih banyak. Jadi banyak pilihan untuk mengkustomisasi desain kita.

4. Perubahan Pada Desain Form

Terdapat beberapa perubahan desain komponen pada form, langsung saja kita cek bagian menu Forms > Checks dan lihat perbedaan nya seperti berikut:

Checklist dan Radio Button pada Bootstrap 4

Checklist dan Radio Button pada Bootstrap 5

Dan yang Baru di Bootstrap 5 Adalah

5. Sistem Grid Yang Ditingkatkan

Terdapat beberapa tambahan sistem grid di Bootstrap 5 yang disebabkan penggunaan layar yang semakin lebar, maka di versi 5 ini menghadirkan grid option xxl (Extra Extra Large) untuk layar ukuran >= 1400px.

Kemudian kelas .gutter diganti dengan .g* dimana kita dapat menambahkan option setalah kelas g tersebut.

Oke, Sekian dulu, penjelasan mengenai perbedaan atau perubahan dari Bootstrap 4 ke Bootstrap 5. Lebih detailnya kalian bisa cek di blognya Bootstrap Disini. Silahkan tambahkan jika ada yang kurang di kolom komentar, Sekian penjelasan kali ini, jika ada salah kata saya mohon maaf, Wassalamualaikum, wr. wb.