Sejak versi 8, Laravel menggunakan Tailwind CSS sebagai framework CSS utamanya. Meskipun merupakan framework CSS terbaik, menggunakan Tailwind CSS dalam pengembangan aplikasi web membutuhkan banyak pekerjaan karena Anda harus mengembangkan sendiri setiap komponen yang dapat digunakan kembali dari awal.

Di masa lalu banyak pengembang, seperti saya, menggunakan Bootstrap. Laravel telah menghentikan dukungan Bootstrap sejak versi 8. Cara termudah untuk tetap menggunakan Bootstrap di Laravel 8 adalah dengan membuat proyek Laravel baru dan kemudian menggunakan dua perintah:

composer require laravel/ui
php artisan ui bootstrap --auth

Perintah Ini akan menginstal Bootstrap versi 4.6.x dan menambahkan beberapa scaffolding jika Anda menggunakan opsi – – auth.

Bagi kita yang ingin tetap menggunakan Bootstrap, ada cara sederhana untuk membuat proyek Laravel baru menggunakan framework Bootstrap 5 terbaru.

Berikut Tahapannya :

Mulailah dengan membuat proyek Laravel baru:

composer create-project laravel/laravel nama-project-anda

Kemudian cd ke folder proyek yang baru dibuat dan instal paket Laravel UI :

cd nama-project-anda

composer require laravel/ui

Generate Bootstrap scaffolding (login & register):

php artisan ui bootstrap --auth

Kemudian install Bootstrap 5 dan Bootstrap Icon :

npm install bootstrap@latest bootstrap-icons @popperjs/core --save-dev

Sekarang buka proyek Anda di editor kode favorit Anda. Saya menggunakan Visual Studio Code.

Periksa dan sesuaikan semua pengaturan (.env), terutama koneksi database dan pengaturan email.

Di dalam proyek Anda, buka file resources\sass\app.scss dan tambahkan:

@import '~bootstrap-icons/font/bootstrap-icons';

Di dalam proyek Anda, ganti file scaffolding Bootstrap 4 dengan yang dapat Anda unduh di sini https://fahram.dev/storage/files/fahram/laravel-8-bootstrap-5-views.zip.

Jadi, ganti konten folder proyek /resources/views/ Anda dengan folder di arsip ZIP yang diunduh.

Jalankan perintah migration :

php artisan migrate

Terakhir jalankan :

npm install && npm run dev

Tag: Bootstrap