Laravel is a very powerful framework in PHP. Laravel provides a lot of libraries to create complex functionality in an easy manner. I’ll let you know to create a layout using blade and bootstrap.
The blade is one of the powerful templating engines with Laravel, which will generate a theme layout in HTML format. All blade files use .blade.php file extension and stored in resources/views(laravel 9) directory.
The Blade engines provide fast views without any overhead due to cached views until they are modified. Blade engines using template inheritance and sections.
In this post we will learn how to convert a simple HTML Bootstrap theme into laravel layout. I am converting the 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,
css,js and images folder and files.We will separate single HTML template into partial HTML template like below,
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.
<script type="text/javascript" src="{{{ URL::asset('js/jquery.2.1.1.min.js')}}}"></script>
<script src="{{{ URL::asset('js/bootstrap.min.js')}}}"></script>
<script src="{{{ URL::asset('js/theme.min.js')}}}"></script>
@include('partials.header')
<div id="main-container" class="main-container">@include('partials.sidebar')
<div class="main-content">
<div class="main-content-inner">
<div id="breadcrumbs" class="breadcrumbs"> </div>
@yield('content')</div>
</div>
@include('partials.footer')</div> You can see here, I am using two directives:
@include: This directive is used to include a partial file.
@yield: This directive is used to set content into sections.
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 a 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.
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,
@extends('layouts.master')
@section('content')
<div class="page-content">this is my home page</div>
@stop 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.
This post help to understand Laravel5 Theme file structure. You have learned about simple layouts 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
This tutorial helps integrate a PHP SDK with Laravel. We'll install aws-php-sdk into laravel application and access all aws services… Read More
in this quick PHP tutorial, We'll discuss php_eol with examples. PHP_EOL is a predefined constant in PHP and represents an… Read More
This Laravel tutorial helps to understand table Relationships using Elequonte ORM. We'll explore laravel table Relationships usage and best practices… Read More
We'll explore different join methods of Laravel eloquent with examples. The join helps to fetch the data from multiple database… Read More
in this Laravel tutorial, We'll explore valet, which is a development environment for macOS minimalists. It's a lightweight Laravel development… Read More
I'll go through how to use soft delete in Laravel 10 in this post. The soft deletes are a method… Read More
View Comments
Hello! Thanks for sharing
where can I find the header, sidebar and footer codes to put on the partial folder/files?
you can find header,footer etc html code from ur theme file.
Thanks for your excellent explained article. It is very usefull.
header footer html file no longer exist or i cannot find it
Step 5: Created new views/partials/header.blade.php file and paste Ace Admin theme header html code.