How to use Bootstrap in Laravel Framework

This is an article where the main purpose of it is to explain on how to use Bootstrap grid framework system in Laravel framework. It is based on the following image :

The above image display is actually in not an arranged display or not in a well-formed position. It is because the library used for Bootstrap grid framework system responsible in arranging the position of all elements exist in the page is not properly functioning.

One of the cause which is might be the reason for this to be happened is because the .js and .css file needed to execute so that Bootstrap can properly performs its function is nowhere to be found.

There is a specific way to define how to import all those files needed in blade view template file. Below is how to correctly import those files :

First of all, check the content of the folder named ‘public’ :

user@hostname:/var/www/html/testing/laravel-project/public# ls -al
total 28
drwxrwxr-x  4 www-data www-data 4096 Aug 23  2016 .
drwxrwxr-x 13 www-data www-data 4096 Apr 25 14:03 ..
drwxrwxr-x  2 www-data www-data 4096 Apr 25 15:14 css
-rwxrwxr-x  1 www-data www-data    0 Aug 23  2016 favicon.ico
-rwxrwxr-x  1 www-data www-data  553 Aug 23  2016 .htaccess
-rwxrwxr-x  1 www-data www-data 1782 Aug 23  2016 index.php
drwxrwxr-x  2 www-data www-data 4096 Apr 25 15:14 js
-rwxrwxr-x  1 www-data www-data   24 Aug 23  2016 robots.txt
user@hostname:/var/www/html/testing/laravel-project/public#

After creating a folder named ‘css’, copy files needed not only for js but also for css to enable Bootstrap grid framework. It can be done and it can be shown as follows :

user@hostname:~# cp bootstrap.min.js /var/www/html/testing/laravel-project/public/js
user@hostname:~# cp bootstrap.min.css /var/www/html/testing/laravel-project/public/css

So, after copying all of the files needed such as ‘bootstrap.min.js’ or ‘bootstrap.min.css’ don’t forget to activate on importing those files in the source files as follows :

The first step is about importing CSS files it is represented with the following snippet code and it can be defined as follows :

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

The next step is also important where importing Javascript file through the following snippet code and it is defined as follows :

<script src="{{ URL::asset('js/bootstrap.min.js') }}"></script>

After adding the above snippet code, the presentation displayed can be shown as follows :