Preset Bootstrap 4 Beta Untuk Laravel 5.5

Boostrap 4 memang belum secara resmi dirilis, namun versi Beta-nya sudah tersedia cukup lama. Dengan semakin matangnya versi beta dari Bootstrap 4 ini, Laravel News mengembangkan sebuah preset frontend Bootstrap baru. Di dalam preset ini sudah tersedia file-file SCSS, plugin JavaScript Bootstrap 4, jQuery dan Popper.js. Versi jQuery yang dipakai masih menggunakan jQuery bawaan Laravel meskipun dokumentasi Bootstrap sendiri menyatakan untuk lebih baik menggunakan versi slim saja.

Preset bootstrap 4 ini mirip dengan Bootstrap 3 yang saat ini sudah ada dengan Laravel dengan memanfaatkan variabel dan markup Bootstrap 4 yang baru. Saat nanti Bootstrap 4 sudah mencapai versi final, kita dapat meng-update project dengan relatif lebih mudah.

Cara Kerja Preset

Laravel 5.5 datang dengan perintah preset yang memungkinkan kita mengubah kode scaffolding untuk frontend atau malah menghapusnya. Dari paket laravel-twbs4 terdapat dua preset yaitu bootstrap4 dan bootstrap4-auth, untuk mempermudah developer yang ingin menggunakan preset sendiri untuk view auth.

Saat perintah preset Bootstrap 4, ia akan menghapus modul bootstrap-sass dan menambah modul bootstrap serta popper.js. Preset bootstrap.js sama dengan bawaan Laravel kecuali untuk impor Popper.js secara global yang menjadi dependensi baru untuk beberapa plugin JavaScript Bootstrap 4.

File app.scss tetap menggunakan font Raleway dari Google dan mengimpor file _variables.scss untuk memberikan bekal awal custom CSS kita.

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

Memasang Preset Frontend Bootstrap 4

Berikut kode untuk memasang preset Bootstrap 4.

composer require laravelnews/laravel-twbs4
php artisan preset bootstrap4-auth
yarn && yarn dev

Jika tidak memerlukan view untuk auth, kita bisa menjalankan perintah di bawah:

composer require laravelnews/laravel-twbs4
php artisan preset bootstrap4
yarn && yarn dev

Lebih Lanjut

Kunjungi repositori resmi preset ini jika menemui masalah atau ada sesuatu yang kurang. Jangan sungkan untuk membuka issue baru atau memberikan pull request.

Preset ini menggunakan Bootstrap 4 Beta 2 dan beberapa perubahan baru akan datang bersama versi Beta 3. Lalu setelah versi Beta 3 keluar, versi selanjutnya adalah versi final dari Bootstrap 4.

Sumber berita dan gambar sampul: laravel-news