Cara Menggunakan Bootstrap Di Laravel

5 min read Jul 29, 2024

Cara Menggunakan Bootstrap di Laravel

Bootstrap adalah framework CSS yang populer yang menyediakan berbagai komponen desain responsif dan komponen siap pakai untuk membangun situs web. Laravel, framework PHP yang populer, dapat dengan mudah diintegrasikan dengan Bootstrap untuk menciptakan situs web yang menarik dan modern.

Berikut adalah panduan langkah demi langkah tentang cara menggunakan Bootstrap di Laravel:

1. Instalasi Bootstrap

Anda dapat menginstal Bootstrap dengan beberapa cara:

Melalui CDN:
Cara termudah adalah dengan menyertakan Bootstrap dari Content Delivery Network (CDN). Anda dapat melakukannya dengan menambahkan tag <link> berikut ke dalam file layouts/app.blade.php:
Melalui Package Manager: Anda juga dapat menginstal Bootstrap melalui package manager seperti npm atau yarn. Buka terminal Anda dan jalankan perintah berikut:
```
npm install bootstrap 
```
Kemudian, import Bootstrap ke dalam file CSS Anda dengan menggunakan tag <link> yang mengarah ke file Bootstrap yang diunduh:

2. Konfigurasi Laravel Mix

Laravel Mix adalah tool yang memudahkan Anda untuk mengelola aset seperti CSS dan JavaScript di Laravel. Jika Anda memilih untuk menginstal Bootstrap melalui npm atau yarn, Anda perlu mengonfigurasi Laravel Mix agar dapat mengkompilasi Bootstrap.

Buka file webpack.mix.js dan tambahkan baris berikut:

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .copyDirectory('node_modules/bootstrap/dist/js', 'public/js/bootstrap');

Baris mix.copyDirectory(...) akan menyalin folder Bootstrap ke direktori public/js/bootstrap sehingga Anda dapat mengakses file Bootstrap dalam proyek Anda.

3. Menggunakan Komponen Bootstrap

Setelah Bootstrap terinstal, Anda dapat menggunakan berbagai komponen Bootstrap dalam template Laravel Anda.

Contoh penggunaan Grid System:

Contoh penggunaan Button:

Contoh penggunaan Navbar:


  My Website
  
  
    
      
        Home (current)
      
      
        About
      
      
        Contact

4. Mengatur Bootstrap

Anda dapat menyesuaikan tampilan Bootstrap dengan menggunakan variabel CSS. Anda dapat menambahkan file CSS khusus untuk mengatur kelas, warna, tipografi, dan elemen Bootstrap lainnya.

Anda dapat membuat file CSS baru di folder resources/sass/app.scss dan menambahkan kode berikut:

body {
    background-color: #f8f9fa;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
}

Kemudian, Anda dapat mengkompilasi file CSS baru dengan menggunakan perintah npm run watch di terminal Anda.

Kesimpulan

Dengan menginstal dan mengkonfigurasi Bootstrap di Laravel, Anda dapat membangun situs web yang modern dan responsif dengan mudah. Bootstrap menyediakan berbagai komponen siap pakai yang dapat Anda gunakan untuk membuat tata letak, navigasi, formulir, dan elemen desain lainnya.

Cara Menggunakan Bootstrap Di Laravel