Integrate Bootstrap Template with Laravel 5.5

by Saquib Rizwan  January 31, 2018

Creating the layout is an important part of any project. Realizing this, Laravel comes with Blade templating engine which generates HTML based sleek designs and templates. All Laravel views built using Blade are located in resources/views.

laravel bootstrap template integration

Bootstrap is well known in the development circles for impressive design options. Laravel makes it incredibly easy to use Bootstrap templates in project’s views. In this tutorial, I will demonstrate how Bootstrap templates could be used within Laravel Blade engine.

Integrating Bootstrap template with Laravel is a simple process. All you need to do is cut your HTML Bootstrap into tiny Blade template contents, and then use, extend and/or include the templates in the main Blade file. To demonstrate the process, I will use  Album Example For Bootstrap

A simple prerequisite is a fresh installation of Laravel 5.5.

Create Layout File

Before creating the layout file, you need to understand the Laravel file structure. For this, I recommend reading my article on creating Laravel layouts using Blade templating engine.

Now let’s take a look at the code of the template page and identify the different parts of the page. Keep these parts in separate files for easy management.

Now as you can see the code of your template. It consists of different parts and I will create a layout in which I’ll keep all the partial parts of the layout separate.

Go to resources/view folder and create a new folder with the name, layouts. This folder will contain the main layout (and other files that will be included in the layout).

Now, create another folder and name it partials. This folder will contain partial files such as header and footer that will be used by the layout file.

Go to the layout folder and create a file named mainlayout.blade.php. Add the following code to it:

This code creates a layout file that will include (@include) all the contents of the specified file at the desired location inside the HTML file. @yield will put the specified content of the file which is extending this layout.

Create Partial Files

Next, create partial files that are included in the main layout file. Go to the partials folder and create a file named head.blade.php. This file will contain the content that goes into the head section of the page.

Create a file nav.blade.php . This file will contain the code related to creating the navigation of the bootstrap page

Next, create the file header.blade.php. This file will contain the visible header of the Bootstrap page.

The next step is to create the file for a footer. For this, create a file named footer.blade.php.

Now create a file named footer-scripts.blade.php that contains the JS files that should be included in the bottom of the page.

After creating all the views files, the views folder should look something like this:

That’s it, The sample Bootstrap template Album Bootstrap is now integrated with Laravel.

Testing the Integration

Let’s create a view file that extends this layout file, so that you can see the Bootstrap layout integration with Laravel Blade template in action.

Create a file demo.blade.php in the views folder and add the following content to the file:

 

Create the Routes

Now that the view is created, the next step is the creation of a route to access the view. For this, go to routes/web.php and paste the following routes.

Now run the application using the staging URL. You will see the Album Bootstrap template integrated with your application.

To Sum Up

In this tutorial, I have demonstrated an easy way of integrating any Bootstrap template in a Laravel application. If you have any questions kindly comment below. Also, follow me on Twitter and get connected.

Create Laravel apps without the worry of server management.

Deploy your app on optimized PHP hosting servers for Laravel.

About Saquib Rizwan

Saquib is a PHP Community Expert at Cloudways – A Managed PHP Hosting Cloud Platform. He is well versed in PHP and regularly contributes to open source projects. For fun, he enjoys gaming, movies and hanging out with friends. You can email him at saquib.rizwan@cloudways.com

Stay Connected:

You Might Also Like...