{"id":12473,"date":"2020-03-25T07:10:17","date_gmt":"2020-03-25T07:10:17","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=12473"},"modified":"2021-11-12T06:22:27","modified_gmt":"2021-11-12T06:22:27","slug":"bootstrap-4-upgrade-in-laravel-5-5","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/bootstrap-4-upgrade-in-laravel-5-5\/","title":{"rendered":"Bootstrap 4 upgrade in laravel 5.5"},"content":{"rendered":"\n

Introduction<\/strong><\/p>\n\n\n\n

Hello Friends,<\/strong>
In this article I will describe how to create a Laravel 5.5 application from scratch and also I am going to describe how you can upgrade from default Bootstrap 3 to Bootstrap 4.<\/p>\n\n\n\n

I. Creating a Laravel 5.5 application from scratch <\/strong><\/p>\n\n\n\n

Step 1:<\/strong> Let’s create a new Laravel 5.5 App from scratch using command:
composer create-project laravel\/laravel5.5app \"5.5.*\" --prefer-dist<\/strong><\/code><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

As we can see It has created a laravel5.5app<\/strong><\/code> directory and installed all the Laravel specific dependencies. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Go to directory path using command cd laravel5.5app<\/strong><\/code><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 2:<\/strong> run command composer install<\/strong><\/code> to create a composer folder under \\laravel5.5app\\vendor<\/strong><\/code> with all required dependencies <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 3:<\/strong> Creating node module with all required node dependencies using command npm install<\/strong><\/code><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

As we can see there is not any node_module<\/strong><\/code> folder in my project directory. Once we run npm install<\/strong> <\/code>it will create node module folder with all required node packages.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

All node packages has been installed successfully. Now check your project directory whether node_module<\/strong><\/code> folder created or not.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Yeh, its created Right…….!<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 4:<\/strong> Now our project is ready to run over server. Use command php artisan serve<\/strong><\/code> to run the project and hit Enter button.<\/p>\n\n\n\n

Boom.. Guys our laravel5.5app<\/strong><\/code> project is up and running on localhost:8000<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 5:<\/strong> Open your browser and hit url http:\/\/localhost:8000\/<\/strong><\/code><\/a> and your application is ready.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

II. Steps to upgrade from default Bootstrap 3 to Bootstrap 4. <\/strong><\/p>\n\n\n\n

Step 1:<\/strong> Open Code editor and import the created laravel5.5app<\/strong><\/code> project directory into it. (Here i am using visual studio IDE)<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

As we know laravel application uses public folder to use css and javascript. So open public\/css\/app.css<\/strong><\/code> to check the default version of Bootstrap. Here it shows v3.3.7<\/code><\/strong>. Now our target is to upgrade it to latest version which is 4.4.1<\/strong><\/code><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 2:<\/strong> To download latest version of bootstrap package in node_module folder in project directory run npm install bootstrap@4.4.1<\/strong><\/code> or npm i bootstrap@4.4.1<\/strong> <\/code><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

we can see a bootstrap package with version 4<\/code><\/strong> in laravel5.5app\/node_module<\/strong><\/code> has been created.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 3:<\/strong> Open resources\/assets\/sass\/app.scss<\/strong><\/code> <\/p>\n\n\n\n

replace the import of older path with new path of bootstrap.scss<\/code><\/strong> as: @import \"~bootstrap\/scss\/bootstrap.scss\";<\/strong><\/code> I have commented line no. 9 and wrote line no. 10 with latest import of bootstrap 4.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n