Sudah banyak pengguna yang mempelajari lebih dalam Bootstrap 4, sudah banyak juga kontributor yang mengkaji kekurangan dan kelebihan Bootstrap 4, tapi mungkin masih ada juga beberapa orang yang belum mengetahui perbedaan antara Bootstrap 3 dan Bootstrap 4. Mari kita pelajari bersama di halaman ini.
Sejak peluncurannya mulai dari v4 Alpha 1, v4 Alpha 2, dst. sampai akhirnya di rilis Bootstrap v4, ini menandai bahwa Bootstrap masih terus memperbaiki sistemnya sampai benar-benar selesai untuk versi 4 nya. Dilihat dari pembaruannya yang begitu banyak, tentu banyak class, komponen, dan fitur baru didalamnya termasuk pembaruan style dari versi sebelumnya menjadi lebih compatible.
Meski demikian, banyak para kontributor yang kurang senang dengan pembaruannya terutama ketika pertama kali launching. Makanya sampai Bootstrap 4 rilis, ada beberapa fitur baru yang sempat di keluarkan tapi dicabut kembali (dihapus) karena dianggap kurang sesuai. Sampai akhirnya rilis Bootstrap v4, sepertinya tidak akan ada lagi fitur Bootstrap v4 yang dihapus di update berikutnya.
Pembaruan ke versi 4 ini lebih banyak melakukan pembaruan di bagian tema seperti tampilan warna, penggayaan, fonts, dsb. Jika harus disebutkan, banyak sekali perubahan dan penambahan dari versi sebelumnya ke versi 4. Tapi berikut ini perubahan-perubahan signifikan atau perubahan-perubahan besar seperti yang di kutip oleh quackit dan blog getbootstrap:
Baca Juga:
Perbedaan Bootstrap 3 & Bootstrap 4
#1 Global
Terdapat beberapa perubahan di Bootstrap secara global, yaitu:
#1.1 Source CSS Files (LESS to SASS)
Bootstrap mengganti sumber file CSS nya, Bootstrap 3 menggunakan LESS, sedangkan Bootstrap 4 menggunakan SASS. Untuk beberapa pengguna di Indonesia mungkin kurang menyenangi ini termasuk saya, karena menurut saya SASS agak sulit dipahami dibanding LESS. Tapi banyak juga yang menggunakan SASS, seperti yang kita tau hampir semua tema menggunakan SASS karena lebih powerful (kaya fitur) dibanding LESS.
#1.2 Ukuran Font (Global)
Bootstrap merubah ukuran font default (global), Bootstrap 3 menggunakan 14px sedangkan Bootstrap 4 menggunakan 16px. Jadi, ketika membuat tulisan (misalnya postingan) akan terlihat lebih besar dari sebelumnya. Perlu sesuaikan lagi px nya jika ingin diperkecil.
#1.3 CSS Unit (Utama)
Unit CSS yang utama atau yang primary sekarang menggunakan rem, sedangkan di Bootstrap 3 menggunakan px. Jika bergelut di dunia web desain tentu pasti memahami apa itu rem, jadi sekarang jika melakukan perubahan font (px) harus dilihat rem pada komponen bersangkutan (pembungkusnya) terlebih dahulu.
#1.4 Font Bawaan
Default font Bootstrap 3 adalah Heltvetica Neue, Helvetica, Arial, dan Sans-Serif, sedangkan di Bootstrap 4 defaul font-nya akan menggunakan font sistem dari pengguna dengan fallback Helvetica Neue, Arial, dan Sans-Serif. Jadi, jika Bootstrap tidak berhasil membaca font sistem pengguna, ia akan menggunakan font fallback tersebut.
#2 Grid Sistem
Ada 2 perubahan untuk sistem grid Bootstrap, yaitu:
#2.1 Membatasi Kolom
Sebelumnya di Bootstrap 3 harus menggunakan class “col-md-offset-3″ (contoh) untuk membatasi kolom, tapi di Bootstrap 4 sudah tidak memerlukan col- lagi, cukup gunakan offset-md-3 saja.
#2.2 Grid Tiers
Di Bootstrap 3 tersedia 4 sistem grid yaitu col-xs, col-sm, col-md, dan col-lg, sedangkan Bootstrap 4 memiliki 5 sistem grid yaitu col-sm, col-md, col-lg, col-xl, dan col-*. Bootstrap menghilangkan col-xs untuk perangkat super kecil (extra small) karena sebetulnya sudah bisa di wakilkan oleh col-sm, atau bisa juga menggunakan col-* sebagai definisi dari “semua perangkat” tanpa harus menentukan ukurannya.
#3 Form
Bootstrap juga melakukan pembaruan / perubahan pada sistem dan tampilan form, yaitu:
#3.1 Ukuran Form Control
Pada Bootstrap 3 hanya perlu memasukkan class “input-lg” (contoh) untuk menentukan ukuran bidang form, tapi di Bootstrap 4 perlu menulisnya lengkap langsung bersama class from control, menjadi “.form-control-sm” (contoh).
#3.2 Custom Form
Bootstrap 3 tidak mendukung custom forms, tapi Bootstrap 4 menyediakan custom forms yang dapat dibuat sesuai keinginan dan dapat menimpa bawaan browser.
#3.3 Validasi
Sebelumnya di Bootstrap 3 bisa menggunakan feedback ikon yang disedikan oleh Bootstrap (glyphicons) misalnya .has-success (contoh untuk validasi berhasil berwarna hijau) dengan ikon “glyphicons glyphicons-envelope” (ikon amplop), tapi di Bootstrap 3 validasi / feedback ini ditiadakan. Perlu custom forms jika ingin menggunakan validasi.
#3.4 Horizontal Forms
Bootstrap 3 dapat menampilkan horizontal form dengan menggunakan .form-horizontal, Bootstrap 4 tidak dapat menampilkan horizontal form (.form-horizontal dihilangkan dari sistem). Jika ingin menampilkan horizontal form di Bootstrap 4, mungkin bisa dibantu dengan menggunakan grid layout untuk form tersebut dan form label.
Catatan: Bootstrap 3 .control-label diganti menjadi .col-form-label pada Bootstrap 4.
#3.5 Help Text
Bootstrap 3 dapat menampilkan teks bantuan pada form (help text) dengan menggunakan class “help-block“, class tersebut dihilangkan di Bootstrap 4 (mungkin class “form-text” bisa menjadi penggantinya).
#3.6 Legends
Bootstrap 3 tidak memiliki class untuk menampilkan legend didalam form, Bootstrap 4 menyediakan .col-form-legend untuk menampilkan legend didalam form. Tapi saat ini masih perlu menggunakan class tersebut didalam tag <legend> agar terlihat benar-benar seperti label.
#3.7 Kotak Centang & Tombol Radio
Sebelumnya di Bootstrap 3 untuk menampilkan tombol radio menggunakan .radio / .radio-inline, dan menggunakan .checkbox / .checkbox-inline untuk menggunakan kotak centak. Ada sedikit perubahan di Bootstrap 4, .form-check / .form-check-label untuk radio dan .form-check-input / .form-check-inline untuk kotak centang.
#4 Table
Bootstrap juga melakukan beberapa perubahan untuk table, diantaranya:
#4.1 Table Head
Bootstrap 3 belum mendukung gaya untuk kepala / judul table (table head), tapi di Bootstrap 4 kita bisa menentukan apakah warna table head ini ingin terang (gunakan .thead-light) atau gelap (gunakan .thead-dark).
#4.2 Responsive Table
Membuat table responsive pada Bootstrap 3 perlu menambahkan .table-responsive di pembungkus dari table-nya (<div>), sedangkan di Bootstrap 4 perlu menambahkan .table-responsive nya di langsung di tag <table> nya.
#4.3 Table Cepat
Bootstrap 3 perlu menggunakan .table-condensed, sedangkan di Bootstrap 4 cukup gunakan .table-lg (contoh).
#4.4 Table Warna Gelap
Bootstrap 3 tidak mendukung fitur ini, di Bootstrap 4 bisa menentukan warna table menjadi gelap dengan menggunakan .table-dark.
#4.5 Kontekstual / Prefix
Pada Bootstrap 3 tidak memiliki prefix untuk table, misalnya cukup memasukkan .active / .success / .info / .warning, tapi di Bootstrap 4 perlu menggunakan prefix table- misalnya .table-active / .table-warning.
#5 Objek Media
Ada 1 perubahan pada media object di Bootstrap 4, yaitu:
#5.1 class
Bootstrap 3 dapat menggunakan banyak class untuk media object misalnya .media, .media-body, .media-right, tapi di Bootstrap 4 cukup masukkan .media saja dan letakkan di posisi yang diperlukan (flexbox aktif di Bootsrap 4).
#6 Navigasi
Ada beberapa perubahan juga pada nav dan navbar, yaitu:
#6.1 Nav Inline
Bootstrap 3 tidak mendukung .nav-inline, Bootstrap 4 mendukung .nav-inline untuk menampilkan navigasi secara inline.
#6.2 Fixed Navbar
Sebelumnya di Bootstrap 3 perlu menggunakan .navbar-fixed-top / .navbar-fixed-bottom untuk membuat bar navigasi menetap di atas / di bawah, sedangkan di Bootstrap 4 cukup gunakan .fixed-top / .fixed-bottom saja.
#6.3 Warna / Preset
Bootstrap 3 hanya memiliki preset warna bawaan (terang) dan preset warna gelap (.navbar-dark), di Bootstrap 4 tidak hanya .navbar-dark dan .navbar-light saja tapi juga diperbolehkan hanya warna background navbar saja misalnya .bg-dark.
#6.4 Navbar Form
Bootstrap 3 bisa menampilkan form didalam navbar dengan menggunakan .navbar-form, tapi ini dihilangkan di Bootstrap 4 karena dianggap tidak perlu. Mungkin harus membuat sendiri jika ingin menampilkan form di navbar.
#6.5 Penjajaran Navbar
Bootstrap 3 hanya mendukung .navbar-right dan .navbar-left, Bootstrap 4 memungkinkan pengguna menggunakan utilities flexbox dan utiliti spasi untuk penjajaran navbar.
#7 Tombol & Grup
Tidak hanya itu, Bootstrap juga melakukan pembaruan pada tombol dan tombol grup:
#7.1 Style
Bootstrap 3 tidak mendukung .btn-secondary melainkan hanya .btn-default, .btn-info, dan lainnya, Bootstrap 4 mendukung .btn-secondary, .btn-light, .btn-dark, dan menghilangkan .btn-default.
#7.2 Ukuran Tombol
Sebelumnya di Bootstrap 3 terdapat ukuran .btn-xs, .btn-sm, .btn-lg, tapi di Bootstrap 4 hanya ada .btn-sm, dan .btn-lg saja (.btn-xs dihilangkan).
#7.3 Garis Luar
Bootstrap 3 tidak mendukung warna outline pada tombol, Bootstrap 4 memberikan leluasa untuk berkarya di bagian tombol dengan memberikan warna outline (contoh: .btn-outline-primary / .btn-outline-info).
#7.4 xs Tombol Grup
Bootstrap 3 support button groups ukuran super kecil alias extra small / xs (.btn-group-xs), tapi Bootstrap 4 tidak.
#7.5 Justify Tombol Grup
Bootstrap 4 tidak mendukung .btn-group-justified.
#8 Label, Jumbotron & Badge
Hanya ada 1 perubahan pada masing-masing komponen, yaitu:
#8.1 Badge (baru)
Bootstrap 4 mengganti nama .label (Bootstrap 3) menjadi .badge.
#8.2 Pill Label
Bootstrap 3 mendukung label yang berbentuk pil (.label-pill), tapi Bootstrap 4 tidak, karena label diganti dengan class badge (contoh: .badge-primary / .badge-success).
#8.3 Jumbotron Full Width
Bootstrap 4 memerlukan .jumbotron-fluid untuk jumbotron lebar penuh layar.
#9 Dropdown
Ada beberapa perubahan pada dropdown, diantaranya:
#9.1 Pembatas
Bootstrap 3 perlu memasukkan .divider pada tag <li> untuk menciptakan pembatas dropdown, Bootstrap 4 cukup tambahkan .dropdown-divider pada <div>.
#9.2 Struktur
Bootstrap 3 menggunakan struktur <ul> dan <li>, Bootstrap 4 bisa membuat dropdown dengan <ul> atau <div>. Kemudian tambahkan .dropdown-item pada <a> yang didalam <ul> atau <div> tadi, pastikan <ul> atau <div> menggunakan .dropdown-menu.
#9.3 Disable Menu Item
Bootstrap 3 menggunakan .disabled pada <li> untuk meniadakan sebuah menu, Bootstrap 4 menaruh .disabled nya di dalam <a>.
#9.4 Header Menu
Sebelumnya di Bootstrap 3 menyimpan .dropdown-header di dalam <li>, karena Bootstrap 4 sudah tidak menggunakan <li> lagi maka letakkan .dropdown-header nya didalam <h1> <h2>.
#10 Gambar
Gambar pun dilakukan sedikit pembaruan, diantaranya:
#10.1 Penjajaran Gambar
Bootstrap 3 menggunakan .pull-right, .pull-left, dan .center-block untuk penjajaran gambar, Bootstrap 4 seperti biasa menggunakan utiliti spasi lagi misalnya .mx.auto = .center-block. Bisa juga gunakan varian helper class di induk gambarnya (contoh: .pull-*-right / .pull-*-left). Bisa juga menggunakan .pull-*-none untuk gambar tanpa perataan.
#10.2 Gambar Responsive
Bootstrap 3 menggunakan .img-responsive, Bootstrap 4 menggunakan .img-fluid.
#11 Glyphicons & Non-Responsive
Ada 1 perubahan lumayan besar pada masing-masing komponen ini, yaitu:
#11.1 Glyphicons
Bootstrap 4 memutuskan untuk tidak lagi menggunakan Glyphicons.
#11.2 Penggunaan Non-Responsive
Di Bootstrap 3 bisa menggunakan layout menjadi tidak responsive, tapi Bootstrap 4 tidak mengizinkan itu.
#12 Paginasi
Ada sedikit perubahan juga pada sistem paginasi:
#12.1 Default Pagination
Bootstrap 3 hanya memerlukan .pagination pada <ul> untuk mempresentasikan daftar halaman, tapi di Bootstrap 4 harus juga memasukkan .page-item kedalam masing-masing <li> dan .page-link kedalam masing-masing <a>.
#12.2 Halaman
Bootstrap 3 menggunakan .previous / .next untuk perataan selanjutnya dan sebelumnya, Bootstrap 4 tidak lagi menggunakan itu.
#13 List Groups, Cards, Wells, Panels, & Thumbnails
Masing-masing komponen ini memiliki 1 perubahan yang lumayan juga, yaitu:
#13.1 Linked List Item / Tombol List Item
Bootstrap 3 hanya perlu menyisipkan .list-group-item didalam <a>, sedangkan Bootstrap 4 harus .list-group-item-action didalam <a>.
#13.2 Cards
Komponen baru yang mengganti fungsi Well, Panel, dan Thumbnail.
#13.3 Wells
Bootstrap 4 sudah tidak memerlukan ini, gunakan Cards,
#13.4 Panels
Bootstrap 4 sudah tidak memerlukan ini, gunakan Cards,
#13.5 Thumbnails
Bootstrap 4 sudah tidak memerlukan ini, gunakan Cards,
#14 Collapse, Carousel, Affix, dan Breadcrumbs
Bootstrap juga melakukan perubahan pada masing-masing komponen ini, diantaranya:
#14.1 Menampilkan Konten
Sebelumnya di Bootstrap 3 menggunakan .in, Bootstrap 4 menggantinya dengan .show.
#14.2 Carousel Item
Bootstrap 3 menggunakan .item untuk item carousel, sedangkan Bootstrap 4 menggunakan .carousel-item.
#14.3 Affix
Bootstrap 4 tidak mendukung affix.
#14.4 Class Breadcrumbs
Sebelumnya di Bootstrap 3 menggunakan .breadcrumb pada <ul>, Bootstrap 4 memerlukan tindakan lebih yaitu memasukkan juga .breadcrumb-item didalam semua <li> untuk membuat breadcrumb. Selain itu, breadcrumb juga dapat dibangun diluar daftar (tidak hanya <li>) dengan menyisipkan .breadcrumb-item didalam <a> yang terbungkus didalam .breadcrumb.
Akhir Kata
Itulah perubahan-perubahan yang saya dapatkan sejauh ini, jika ada perubahan baru yang belum saya bagikan diatas silahkan beritahu di kolom komentar. Jika nanti ditemukan ada perubahan baru lagi, akan ditambahkan lagi ke postingan ini. Mungkin memerlukan waktu karena saat ini saya belum terlalu lama menggunakan Bootstrap 4. Jadi, gimana menurut kalian ? Apakah versi 4 lebih melengkapi kebutuhan web development atau tidak ? Tapi, menurut saya tidak ada salahnya kita mencoba v4 untuk pengalaman baru.
Selamat mencoba !