Table of contents

Laravel Blade Layout

Many companies prefer using Laravel because it is a powerful framework that able us to build web applications of any complexity. And so many tools and packages that support by small groups of developers.


Laravel also offers a Blade templating engine that is fast in rendering views that are produced HTML based.


So if you're new to this framework and want to learn with Laravel 9 Blade Layout Templating then this might can help you.


To start with this tutorial we need a fresh installation of Laravel.


Step 1: Laravel Installation

To install the new Laravel project kindly run the following command:

composer create-project laravel/laravel blade-templating

cd blade-templating


Step 2: Create Controller

In this step, we need to create our controller first. To make the new controller run the following command below:


php artisan make:controller PagesController


For this tutorial, I name our controller PagesController once done let's create our routes in the next step.


NOTE: Before running the command above don't forget to point it in your Laravel project in this case we should point in blade-templating because that is our project name for this tutorial.


Step 3: Create Pages Routes

Now, let's create our page route so that we can access our pages. Open routes/web.php and add the following lines below:


Route::group(['namespace' => 'App\Http\Controllers'], function()
    Route::get('/', 'PagesController@index')->name('pages.index');
    Route::get('/about', 'PagesController@about')->name('pages.about');


Step 4: Laravel Blade Templating Structure

In this step, I will show you what is our Views on structuring the following folders and files.


- resources

-- views

--- layouts

----- master.blade.php

--- home.blade.php

--- about.blade.php

--- partials

----- header.blade.php

----- styles.blade.php

----- scripts.blade.php

----- footer.blade.php


Step 5: Create Partials Folder and Files

In this step let's create our resources/views/partials folder and then create files with the following header.blade.php, styles.blade.php, scripts.blade.php, and footer.blade.php.


NOTE: We are using Bootstrap 5 in this tutorial.




  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="{{ route('pages.index') }}">Brand Name</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="{{ route('pages.index') }}">Home</a>
          <li class="nav-item">
            <a class="nav-link" href="{{ route('pages.about') }}">About</a>




<!-- Bootstrap core CSS -->
<link href="" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">




<footer class="pt-5 my-5 text-muted">
  Created by <a href="">Code And Deploy</a> &middot; &copy; {{ date('Y') }}




<!-- Bootstrap core Javascript -->
<script src="" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<!-- Your Javascript Below -->


Step 6: Create the Layout

In this step let's create resources/views/layouts folder then create master.blade.php file. As you can see below we @include our partials file to complete our layout then we use @yield to inject the content into the layout.




<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <title>How To Create a Laravel 9 Blade Layout Templating</title>


<main class="container mt-5">




Step 7: Pages Views

In this step let's create the pages view home.blade.php and about.blade.php inside resources/views folder.





   This is home page





   This is about page


As you can see we have @extends above because it will able us to use the layout we created above. And the @section will help us to create a section using the layout we created and injected into the @yield to display the content of the section.


Step 8: Let's create methods in Controller

Now let's create our index(), and about() methods in our PagesController. See the following code below:



namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PagesController extends Controller
    public function index() 
        return view('home');

    public function about() 
        return view('about');


Now, you have the basic Laravel 9 Blade Layout Templating. I hope it helps. Just run the php artisan serve below to view it.