Learn How To Integrate Bootstrap 4 With Laravel

0
241
Integrate Bootstrap 4

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:

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.

Once download completes install laravel snippet as shown in the below image
Install Laravel
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.
create laravel project
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
mainlayout
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
header-blade
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.
head-blade
Let’s create a nav.blade.php file inside the test folder, this includes the bootstrap navigation code
nav-blade
Create the footer.blade.php file inside the test folder which includes footer part of websites
footer-blade
Create footer.script.blade.php file inside the test folder; this contains the footer scripting part
footer-script-blade
Go to the Route folder and add the code given below and save it.
Route folder
Let’s create the demo.blade.php file used to extend the layout file.
demo-blade
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.
Album demo

LEAVE A REPLY

Please enter your comment!
Please enter your name here