How to Add Bootstrap in Laravel-based Application

By Posted on

Introduction

This is an article where the content is focusing on how to add bootstrap framework to a Laravel-based application. After adding the bootstrap framework to the Laraval-based application, there will be a major changes to the display appearance. That major changes will show up if the correct configuration for importing the necessary file to the Laravel-based application exist in the source code.

Add Bootstrap in Laravel-based Application

The step for adding bootstrap framework to a Laravel-based application is easy. The following are steps to achieve it :

  1. First of all, it is important to have a Laravel-based application. Just read the article with the title of ‘How to Create a Laravel Project using Composer in Microsoft Windows’ in this link.

  2. Next, download the bootstrap compressed js and cs file. Just search it using Google search engine with the keyword of ‘bootstrap compressed js and cs download’. One of the search result will point out the page with this link.

  3. Access the page and download the file.

  4. After successfully downloading the file, just extract it. In this case, the file name is ‘bootstrap-5.0.2-dist.zip’. The following is the content within that directory : 

    C:\programming\bootstrap\bootstrap-5.0.2-dist\bootstrap-5.0.2-dist>dir
Volume in drive C is Windows
Volume Serial Number is E003-3593
Directory of C:\programming\bootstrap\bootstrap-5.0.2-dist\bootstrap-5.0.2-dist
06/23/2021 01:25 AM <DIR> .
06/23/2021 01:25 AM <DIR> ..
06/23/2021 01:25 AM <DIR> css
06/23/2021 01:25 AM <DIR> js
0 File(s) 0 bytes
4 Dir(s) 3,171,057,664 bytes free
C:\programming\bootstrap\bootstrap-5.0.2-dist\bootstrap-5.0.2-dist>

  5. Soon after, just put the folder with the name of ‘css’ and ‘js’ inside the public directory exist in the root folder of Laravel-based project or application. For an example, if the Laravel-based project or application exist in ‘C:\programming\php\laravel\crud’, copy all the entire css and folder js exist in the bootstrap extracted folder to the public folder in it. So, the target folder will be in ‘C:\programming\php\laravel\crud\public’. So, the following is the content of ‘C:\programming\php\laravel\crud\public’ before the copy process : 

    C:\programming\php\laravel\crud\public>dir
Volume in drive C is Windows
Volume Serial Number is E003-3593
Directory of C:\programming\php\laravel\crud\public
08/02/2021 08:41 PM <DIR> .
08/02/2021 08:41 PM <DIR> ..
07/13/2021 09:12 PM 603 .htaccess
07/13/2021 09:12 PM 0 favicon.ico
07/13/2021 09:12 PM 1,735 index.php
07/13/2021 09:12 PM 24 robots.txt
07/13/2021 09:12 PM 1,183 web.config
5 File(s) 3,545 bytes
4 Dir(s) 3,166,326,784 bytes free
C:\programming\php\laravel\crud\public>

  6. After copying the bootstrap source code folder of js and css to the public folder, the content will be available as follows : 

    C:\programming\php\laravel\crud\public>dir
Volume in drive C is Windows
Volume Serial Number is E003-3593
Directory of C:\programming\php\laravel\crud\public
08/02/2021 08:41 PM <DIR> .
08/02/2021 08:41 PM <DIR> ..
07/13/2021 09:12 PM 603 .htaccess
08/02/2021 08:58 PM <DIR> css
07/13/2021 09:12 PM 0 favicon.ico
07/13/2021 09:12 PM 1,735 index.php
08/02/2021 08:58 PM <DIR> js
07/13/2021 09:12 PM 24 robots.txt
07/13/2021 09:12 PM 1,183 web.config
5 File(s) 3,545 bytes
4 Dir(s) 3,166,326,784 bytes free
C:\programming\php\laravel\crud\public>

  7. After that, add the following line to the view file of the Laravel-based application. For adding line definition on importing css file, just add the following line inside the ‘head’ tag. 

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

    Furthermore, add the following line to the view file of the Laravel-based application for importing js file. Just add the following line in the last line inside the ‘body’ tag. 

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

  8. So, add it into the main view file which is normally a blade format file. In this example, it is a blade file with the name of ‘index.blade.php’ exist in the views folder. Specifically, pointing out from the root folder of the Laravel-based framework, it exist in ‘C:\programming\php\laravel\crud\views’. Overall, the following is part of the content of it with the line configuration for adding bootstrap framework : 

    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Laravel Tutorial</title>
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css')}}" />
</head>
<body>
    <script src="{{ asset('js/bootstrap.min.js') }}" />
</body>

 

Leave a Reply