Dear pengguna bootstrap. Ada kabar gembira yang pastinya sudah kalian ketahui. Bootstrap sudah rilis versi 4. Apa saja ya yang berubah dari versi terbaru bootstrap ini?

• Sekarang Boostrap menggunakan Sass, sebelumnya mengggunakan Less.
• Layout-nya sekarang menggunakan Flexbox.
• Penambahan komponen Cards untuk menggantikan wells, thumbnails, dan panels.
• Mem-forked Normalize.css untuk membuat modul CSS baru bernama Reboot untuk HTML reset.
• Opsi kostumisasi baru menggunakan variabel Sass.
• Menghentikan dukungan untuk versi browser jadul seperti IE8 dan IE9 serta menggunakan unit rem sebagai satuan ukuran komponen.
• Penulisan ulang plugin JavaScript menggunakan ES6 untuk memanfaatkan peningkatan yang diberikan padanya.
• Meningkatkan auto-placement untuk tooltip, popover, dan dropdown berkat pustaka bernama Popper.js.
• Tampilan Dokumentasi yang telah didesain ulang dan ditulis ulang menggunakan Markdown.
• Kotak pencarian baru.
• Build tools baru menggunakan npm.

 

Perubahan-perubahan Bootstrap v.4 beta 2 dibandingkan versi sebelumnya :

• Badges
  

  Penambahan class baru untuk variasi warna background badge, yaitu :

  • badge-primary
  • badge-secondary
  • badge-success
  • badge-info
  • badge-warning
  • badge-danger

Contoh penggunaan :
class=”badge badge-primary”

• Grid Options
  

  Perubahan pada Grid Layout, class col-xs-* di hapus dan di ganti menjadi col-*, serta penambahan grid baru yaitu col-xl-* untuk ukuran layar >=1200px. Sedangkan untuk variasi ukuran lebar tiap-tiap grid untuk resolusi layar tertentu juga terjadi perubahan, yaitu :

  • col-* (Extra Small) : <576px
  • col-sm-* (Small) : >=576px
  • col-md-* (Medium) : >=768px
  • col-lg-* (Large) : >=992px
  • col-xl-* (Extra large) : >=1200px

• Background
  

  Penambahan class background untuk menampilkan background warna, yaitu :

  • bg-primary
  • bg-secondary
  • bg-success
  • bg-info
  • bg-warning
  • bg-danger

Contoh penggunaan :

class=”bg-primary”

• Text
  

  Penambahan class warna teks untuk merubah warna pada teks, yaitu :

  • text-primary
  • text-secondary
  • text-success
  • text-info
  • text-warning
  • text-danger

Contoh penggunaan :
class=”text-primary”

• Panel

Perubahan pada class panel panel-* di ganti menjadi class card.

Contoh penggunaan :

 

• Images
  

  Perubahan penggunaan class pada elemen <img>, yaitu :

  • Class ‘img-responsive‘ menjadi ‘img-fluid‘.
  • Class ‘img-rounded‘ menjadi ‘rounded‘.
  • Class ‘img-circle‘ menjadi ‘rounded-circle’.

• Table
  

  Terdapat beberapa perubahan variabel class untuk elemen <table>, yaitu :

  • Penambahan class ‘table-responsive‘ untuk responsive table.
  • Penambahan class ‘table-inverse‘.
  • Untuk konsistensi, class ‘table-condensed‘ di ubah menjadi ‘table-sm‘.

• Forms
  

  Perubahan penggunaan class untuk elemen-elemen input di dalam form, yaitu :

  • Class ‘control-label‘ menjadi ‘col-form-label‘.
  • Class ‘input-lg‘ dan ‘input-sm‘ menjadi ‘form-control-lg‘ dan ‘form-control-sm‘.
  • Class ‘form-group-*‘ menjadi ‘form-control-*‘.
  • Class ‘help-block‘ menjadi ‘form-text‘.
  • Class ‘radio-inline‘ menjadi ‘checkbox-inline‘.
  • Class ‘checkbox‘ dan ‘radio‘ menjadi ‘form-check‘ dan penambahan class variasi ‘form-check-*‘.

• Buttons
  

  Perubahan penggunaan class untuk tombol atau button, yaitu :

  • Class ‘btn-default‘ menjadi ‘btn-secondary‘.
  • Class ‘btn-xs‘ menjadi ‘btn-sm‘.

• Hidden Element
  

  Perubahan penggunaan class untuk menyembunyikan elemen HTML, yaitu :

  • Class ‘hidden-xs‘ menjadi ‘d-none d-sm-block‘, menyembunyikan eleman HTML untuk layar dengan ukuran ‘Extra Small‘.
  • Class ‘hidden-sm‘ menjadi ‘d-sm-none d-md-block‘, menyembunyikan eleman HTML untuk layar dengan ukuran ‘Small‘.
  • Class ‘hidden-md‘ menjadi ‘d-md-none d-lg-block‘, menyembunyikan eleman HTML untuk layar dengan ukuran ‘Medium‘.
  • Class ‘hidden-lg‘ menjadi ‘d-lg-none d-xl-block‘, menyembunyikan eleman HTML untuk layar dengan ukuran ‘Large‘.
  • Class ‘d-xl-none‘, menyembunyikan eleman HTML untuk layar dengan ukuran ‘Extra Large‘.
  • Class ‘d-none d-lg-block‘, akan menyembunyikan elemen HTML untuk layar dengan ukuran ‘Extra Small‘ sampai dengan ukuran ‘Medium‘.

 

Nah, itu dia perubahan-perubahan yang Bootstrap suguhkan pada versi 4 beta 2.

Untuk kedepannya tinggal kita menunggu Bootstrap 4 versi Final keluar sehingga para Web Programmer dan Web Developer dapat lebih leluasa lagi dalam menggunakan fitur-fitur di dalam Boostrap 4.