Simple Laravel Layouts using Blade Template and Bootstrap Theme

Laravel is very powerful framework in PHP.Laravel provides a lot of library to create complex functionality in easy manner.Blade is one of them powerful templating engine with Laravel, which will generate theme layout in HTML format.All blade files uses .blade.php file extension and stored in resources/views(laravel 5) directory.Blade engines provides fast views without any overhead due to cached views until they are modified.Blade engine are using template inheritance and sections.

In this post we will learn how to convert simple HTML Bootstrap theme into laravel layout.I am converting Bootstrap HTML template into laravel layout using partial layout functionality.i am using Ace Admin theme.

Ace Admin is a free to use Bootstrap admin template. This template uses the default Bootstrap 3 styles along with a variety of powerful jQuery plugins and tools to create a powerful framework for creating admin panels or back-end dashboards.

You can also check other recommended tutorials of Lumen/Laravel,


Laravel 5 application structure for layout

  • public : This folder will contain css,js and images folder and files.
  • resources/views : This folder will contain all views file.
  • resources/views/layouts : This folder will contain all layout files .
  • resources/views/partials : This folder will contain all layout partial files like header,footer and sidebar etc.

We will separate single HTML template into partial HTML template like below,

Laravel layout files structure

  • header.blade.php : This file will contains html template header part.
  • sidebar.blade.php : This file will contains html template sidebar part.
  • footer.blade.php : This file will contains html template footer part.
  • master.blade.php : This file will use to include above partial files and create master layout template which will render on each laravel request.

Simple steps to convert Bootstrap Theme into laravel template layout

Step 1: Download Ace Admin theme.
Step 2: Move all theme js,css,images and fonts folder and files into laravel5 /public folder.
Step 3: Created new views/layouts/master.blade.php file and put below codes into this file.

You can see here, i am using two directives,
@include : This directive used to include partial file.
@yield : This directive used to set content into section.

Now we have created master layout which will generate dynamic template using partial view files, We have divided theme page into partial pages and included into master layout file.

Step 5: Created new views/partials/header.blade.php file and paste Ace Admin theme header html code.
Step 6: Created new views/partials/sidebar.blade.php file and paste Ace Admin theme sidebar html code.
Step 7: Created new views/partials/footer.blade.php file and paste Ace Admin theme footer html code.

We have create master layout which will have all theme partial sections except content area, because content will change based on request but header, footer and sidebar will not change.

How to use layout in laravel

on each blade view you need to define layout name otherwise it will take default laravel layout.We can use master layout in view like below,

Now define routes and call above view,you can get Ace Admin type page theme and in content section you will get ‘this is my home page’ message.

Conclusion :

This post help to understand Laravel5 Theme file structure.You have learn’t about simple layout in laravel using Blade template engine.I used bootstrap theme to convert into laravel5 layout.I separated sections in header,sidebar and footer and include into laravel master layout.You can get more info about laravel layout and blade on official laravel website

5 thoughts on “Simple Laravel Layouts using Blade Template and Bootstrap Theme

  1. Hello! Thanks for sharing
    where can I find the header, sidebar and footer codes to put on the partial folder/files?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.