CODEWITHSUNDEEP
laravelbootstrap-4laravel-5.5
hamzaerdem
hamzaerdem

Reputation: 23

Installing Bootstrap-4 to Laravel 5.5 using composer

I created a Laravel project using 

composer create-project --prefer-dist laravel/laravel myProject

Then I installed Bootstrap-4 using

composer require twbs/bootstrap:4.0.0-beta.3

My bootstrap dist directory is 

vendor/twbs/bootstrap/dist

I copied bootstrap-min.css to public/css directory. Then I added this line in my head tags 

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

But Bootstrap-4 is not working on my page. Which file has to be changed now?

Upvotes: 1

Views: 10269

Answers (2)

Rob Fonseca
Rob Fonseca

Reputation: 3819

Copying composer files directly into your public folder is generally bad practice. Not only is the public/css folder in the .gitignore file so it will break when you port over to production, any downloaded updates will not be applied if you update the package.

Laravel News has made a front end preset for Bootstrap 4. Laravel 5.6 will have Bootstrap 4 as a preset option baked in, but for now, this is the way to go https://laravel-news.com/bootstrap-4-laravel-preset/

You could also just use Bootstrap straight from the CDN

Upvotes: 1

dbrumann
dbrumann

Reputation: 17166

When you install bootstrap via composer it's put in the vendor/ folder, which is not accessible by your webserver. You have to copy or symlink the css and js into your public/ directory:

cp vendor/twbs/bootstrap/css/bootstrap.min.css public/css/bootstrap.min.css
cp vendor/twbs/bootstrap/js/bootstrap.min.js public/js/bootstrap.min.js

Since bootstrap is a frontend dependency I would instead use gulp or maybe Symfony's Webpack Encore for managing this: https://symfony.com/doc/current/frontend/encore/bootstrap.html

Webpack Encore is a standalone component that should not require any modifications in your laravel appand does not rely on any other Symfony component as far as I know. If that is a concern you have.

Upvotes: 1

Related Questions