Cara Menggunakan Bootstrap Di Laravel 9

4 min read Jul 26, 2024

Cara Menggunakan Bootstrap di Laravel 9

Bootstrap adalah framework CSS dan JavaScript yang populer yang digunakan untuk membangun situs web responsif dan modern. Laravel adalah framework PHP yang populer untuk membangun aplikasi web.

Dalam artikel ini, kita akan membahas cara mengintegrasikan Bootstrap ke dalam proyek Laravel 9.

1. Instalasi Bootstrap

Ada beberapa cara untuk menginstal Bootstrap di Laravel:

Menggunakan CDN: Cara termudah adalah dengan menggunakan CDN (Content Delivery Network) dari Bootstrap. Tambahkan tag link berikut ke dalam file resources/views/layouts/app.blade.php:
Menggunakan Package Manager: Anda juga dapat menginstal Bootstrap menggunakan package manager seperti npm atau yarn. Pertama, pastikan Anda memiliki Node.js dan npm yang terinstal di komputer Anda. Jalankan perintah berikut di terminal:
```
npm install bootstrap
```
Kemudian, Anda perlu mengimpor file CSS Bootstrap ke dalam file resources/css/app.css:
```
@import '~bootstrap/scss/bootstrap';
```
Menggunakan Laravel Mix: Jika Anda menggunakan Laravel Mix, Anda dapat menginstal Bootstrap dengan menjalankan perintah berikut:
```
npm install bootstrap
```
Kemudian, tambahkan kode berikut ke dalam file resources/js/app.js:
```
require('bootstrap');
```

2. Menggunakan Bootstrap dalam View

Setelah Bootstrap diinstal, Anda dapat menggunakan kelas Bootstrap di dalam view Laravel Anda untuk mengatur tata letak dan gaya halaman web.

Contoh penggunaan kelas Bootstrap dalam view:


  
    
      Judul
      Konten halaman

Kode di atas menggunakan kelas container, row, col-md-6, img-fluid dari Bootstrap untuk mengatur tata letak halaman.

3. Mengatur Konfigurasi (Opsional)

Anda dapat mengedit file resources/css/app.css untuk menyesuaikan konfigurasi Bootstrap. Misalnya, Anda dapat mengganti warna default atau menambahkan custom styles.

4. Menjalankan Aplikasi

Setelah Bootstrap diinstal dan dikonfigurasi, jalankan aplikasi Laravel Anda dengan perintah php artisan serve.

Kesimpulan

Itulah cara mengintegrasikan Bootstrap ke dalam proyek Laravel 9. Dengan menggunakan Bootstrap, Anda dapat membangun halaman web yang responsif dan menarik dengan mudah.

Anda dapat menemukan dokumentasi lengkap Bootstrap di dan dokumentasi Laravel di .

Cara Menggunakan Bootstrap Di Laravel 9