Learn How To Integrate Bootstrap 4 With Laravel

In this article, we are integrating bootstrap with laravel by using blade the templating engine.To initate this project, follow these steps:-

Step 1) To start the laravel bootstrap project, you need to install XAMPP from https://www.apachefriends.org/index.html on to your system and start Apache & MySql services.

Step 2) download and install getcomposer from
https://getcomposer.org/download/

Step 3) Use cmder, a software package that is used for Windows. You can download cmder using the link below:
http://cmder.net/

Step 4) Atom is text editor. To download Atom use the link below:
https://atom.io/

Step 5) We are also using the Album example from bootstrap from below link
https://getbootstrap.com/docs/4.0/examples/album/

Step 6) go to the C:\xampp\apache\conf\extra location and open file httpd-vhosts.conf and add the code given below:

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/album/public"
    ServerName album.dev
</VirtualHost>

Also, open notepad as administrator and open the C:\Windows\System32\drivers\etc location, in the folder and add the given code and save it.

127.0.0.1       localhost
127.0.0.1  album.dev

Once download completes install laravel snippet as shown in the below image

Go to the browser and type http://album.dev to run the laravel project

Create a laravel project:
To create laravel project open cmder and go to xampp C:\xampp\htdocs location and run the given command below. Your Laravel project with a name album will be created.

Let’s start project with bootstrap 4. In this project, we are going to use the bootstrap album theme. In view, create the layout folder and in the layout folder
create a sub folder named test folder. This test folder is created to contain the main layout and also to view files present in it. You can use the bootstrap theme source code.

Create mainlayout.blade.php file inside the layout folder as given below

In the above file, we have used the blade template methods like @include and @yield. The use of @include method is to include content of the specified file in the HTML at a desired location and @yield is used to put content of the file

Next, we will create a folder with a name test inside the layout folder that contains partition files such as a header, footer, head, nav, etc. You can see the partitions files and content given below.

Create a header.blade.php file inside the test folder and add the below code which is used for bootstrap page of visible header

Now, we are creating the head.blade.php file inside the test folder which includes the head section content of html webpage followed by CSS of bootstrap file, meta tags etc.

Let’s create a nav.blade.php file inside the test folder, this includes the bootstrap navigation code

Create the footer.blade.php file inside the test folder which includes footer part of websites

Create footer.script.blade.php file inside the test folder; this contains the footer scripting part

Go to the Route folder and add the code given below and save it.

Let’s create the demo.blade.php file used to extend the layout file.

In the above file we have used @extends method and @section(‘content’) method for extending the multiple layouts file which were used in layout folder

Go to browser and type http://album.dev/demo you will see bootstrap 4 with laravel in the action.