Laravel Projesine Bootstrap 5 Ekleme Basit Yöntem

Composer ile Bootstrap 5 css çatısını projeye dahil ediyoruz. Proje klasörü içindeyken aşağıdaki composer komutunu yazıyoruz.

composer require twbs/bootstrap

son sürüm bootstrapı yükler farklı sürüm isteniyorsa örnek 5.0.0 bu kodu yazabilirsin.

composer require twbs/bootstrap:5.0.0

Bootstrap son sürümü Vendor klasörünün altında twbs klasörüne yüklendi. Buradan bootstrap css ve js klasörlerini laravel public klasörünün içine kopyalıyoruz. Aşağıdaki komutla yapabilirsin. -r parametresi klasörü(dizini) kopyalamayı sağlar

cp -r vendor/twbs/bootstrap/dist/css public/css

cp -r vendor/twbs/bootstrap/dist/js public/js

Son olarak bootstrap 5 kullanacağımız view dosyalarına aşağıdaki kodları ekleyelim. CSS kodu head etiketlerinin arasına eklenmeli. Buradaki asset yöntemi laravelde otomatik olarak public klasörünün yolunu alır.

<!-- CSS -->
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">

<!-- JavaScript -->
<script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>

Node Js Npm İle Yükleme Bootstrap 5 Yükle

npm install bootstrap@5

Bootstrap son sürümü Vendor klasörünün altında bootstrap klasörüne yüklendi. Buradan sonra yukarıdaki cp komutlarıyla aynı işlemi yapabilirsin.

Vite destekli otomatik derlenen Laravel 10 bootstrap 5 kurulumu için tıklayınız