Perbedaan Bootstrap 4 dan 5

Diposting Pada : 15 Maret 2021

Bootstrap merupakan open source yang dikembangkan dari akhir 2011 yang digunakan untuk merancang situs web responsif, yakni supaya tampilan web pada seluler lebih menarik dan adatif tersedia untuk HTML, CSS, dan JS. Menurut bahasa sisi server seperti PHP, Node, dll, bootstrap membantu merancang frontend.

Di pertengahan Juni 2020, bootstrap melaunching bootstrap versi 5 alpha-1. Pada versi ini, bootstrap menghilangkan beberapa class nya, yakni :

  • form – row
  • form – inline
  • list – inline
  • card – deck

Sedangkan fitur terbaru yang dimiliki bootstrap, yakni :

  • gx-* (class yang berfungsi untuk mengatur lebar horizontal/column gutter)
  • gy-* (class yang berfungsi untuk mengatur lebar vertical/row gutter)
  • g-* (class yang berfungsi untuk mengatur lebar horizontal & vertical gutter)
  • rows-cols-auto

Bootstrap 5 tidak mendukung jquery, tetapi menggunakan vanilla js untuk support plugin. Bila Anda menggunakan Internet Explorer 10 dan 11, bootstrap versi terbaru ini belum support. Ada penambahan kelas pada grid system, yakni support kolom xxl yakni support untuk lebar layar ≥1400px. Berikut ini saya rangkum perbedaan antara bootstrap 4 dengan bootstrap 5 versi alpha-1.

BASISBOOTSTRAP 4BOOTSTRAP 5
Grid SystemMemiliki 5 class (xs, sm, md, lg, xl).Memiliki 6 class (xs, sm, md, lg, xl, xxl).
WarnaMemiliki warna yang terbatasMemiliki extra warna dengan palet yang lebih baik
JqueryMemiliki jquery dan semua plugin terkaitJquery dihilangkan dan digantikan dengan vanilla JS dengan plugin yang sesuai
Internet ExplorerBootstrap 4 memiliki support IE 10 dan 11.Bootstrap 5 tidak support IE 10 dan 11.
Form elementsRadio buttons, checkboxes memiliki tampilan berbeda di beberapa OS dan browserTidak ada perubahan tampilan di beberapa OS maupun browser
Utilities APIKita tidak dapam memodifikasi utilities in bootstrap 4Kita diberi kebebasan untuk memodifikasi
GutterMenggunakan class .glutter dengan fontsize dalam pxMenggunakan class .g* dengan fontsize dalam satuan rem
Vertical ClassesKolom dapat diposisikan relatifKolom tidak dapat diposisikan relatif
Bootstrap IconsTidak memiliki icon sendiri, biasanya menggunakan font awesomeSudah memiliki icon sendiri
JumbotronSupportTidak support jumbotron
Card deckCard deck berguna untuk membuat cards dengan tinggi dan lebar yang samaCard deck dihilangkan
NavbarMemiliki properti inline-block dan warna dropdown putih sebagai default untuk kelas dropdown-menu-dark.Tidak memiliki inline-block dan warna dropdown hitam sebagai default untuk kelas dropdown-menu-dark.
Static Site GeneratorBootstrap 4 menggunakan Jekyll software.Bootstrap 5 menggunakan Hugo software.

Apakah Anda sudah siap untuk migrasi ke bootstrap 5? Bila penasaran, langsung saja kunjungi web resmi bootstrap di sini https://getbootstrap.com/docs/5.0/getting-started/introduction/ . Selamat berdesign ria.

More Post

project image
Menampilkan Gambar Google Drive via HTML

14 Maret 2021 - Bagi kamu yang memiliki web atau blog mungkin pernah terkendala karena storage penuh, atau tidak...
Read More

project image
Push Notification React Js Menggunakan One Signal

18 Maret 2021 - OneSignal adalah layanan push notification yang paling banyak digunakan untuk pen...
Read More

project image
Menampilkan Bilangan Prima Dengan Kotlin Android

11 Maret 2021 - Bilangan prima adalah bilangan asli yang bernilai lebih dari 1 dan mempunyai 2 faktor pemba...
Read More

project image
Format Rupiah Menggunakan Beberapa Bahasa Pemrograman

12 Maret 2021 - Hai sobat idev, kali ini saya akan berbagi cara membuat format rupiah menggunakan javascript. Ha...
Read More