This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

📣 The Agency Advantage Summit is Here. Join 2,000+ digital pros for 2 days of AI-powered strategies. Register for Free →

Create Layouts Using Laravel Blade Templating Engine (Step-by-Step for Beginners)

Updated on June 6, 2025

8 Min Read

Key Takeaways

  • Blade layouts let you reuse a master template across multiple pages.
  • Use @extends, @section, and @yield to manage page content cleanly.
  • @include helps you break layouts into reusable components.
  • Pass dynamic data into views for personalized content.
  • A structured Blade layout keeps your Laravel app scalable and organized.

Layouts are often the starting point of many web development projects.

If you’re new to Laravel, Blade is the easiest way to create and manage your website’s HTML layout to produce sleek designs and themes. Instead of writing the same code (like headers and footers) on every page, Blade helps you reuse them—saving time and keeping things organized.

In this guide, we’ll cover:

  • Creating a master layout (to avoid repeating code)
  • Breaking pages into components (headers, footers, etc.)
  • Extending layouts in different views
  • Rendering views with basic routes

By the end, you’ll know how to structure a Laravel app’s frontend using Blade. This is ideal for Laravel beginners who want to understand how real-world web pages are structured in Laravel.

Let’s get started…

What a Basic Blade Template Structure Looks Like

Think of Blade templates like building with Lego blocks. You start with a base plate (your layout file) that holds everything together, then add different pieces (your views) on top.

The Foundation (layout.blade.php):

<!DOCTYPE html>

<html>

<head>

<title>@yield('page_title', 'Default Title')</title>

<!-- Common CSS/JS files go here -->

</head>

<body>

<header>@yield('header_content')</header>

<main>

@yield('main_content')

</main>

<footer>@yield('footer_content', 'Default footer text')</footer>

</body>

</html>

Key Parts:

  1. @yield() – These are placeholders waiting to be filled
  2. Default content (optional) – Shown if a section isn’t provided
  3. Common elements – Like CSS/JS files used across all pages

Prerequisites

Before we dive in, make sure you have PHP 8.2+ and Composer installed:

1. Install Laravel Project

If you haven’t already, you can create a new Laravel project by running:

composer create-project laravel/laravel laravel-blade-layouts

laravel-blade-layouts

Then navigate into your project directory:

cd laravel-blade-layouts

2. Start the Local Development Server

Once your project is set up, you can start Laravel’s built-in development server:

php artisan serve

php artisan serve

Visit http://127.0.0.1:8000 in your browser. You should see the Laravel welcome screen.

Laravel welcome screen.

Step 1: Set Up Your Routes

Let’s define the pages we want to create: a Home page and a Contact page. By default, Laravel probably has a default route like this:

Route::get('/', function () {

return view('welcome');

});

Let’s change that.

Open the routes/web.php file and replace its contents with the following:

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {

return view('pages.home');

});

Route::get('/contact', function () {

return view('pages.contact');

});

contents with the following

Fascades route

These routes tell Laravel to load resources/views/pages/home.blade.php when someone visits the homepage (/) and resources/views/pages/contact.blade.php when they go to /contact.

But before these work, we need to actually make those views—and the layout they’ll use.

Step 2: Create the Views Directory Structure

Let’s make sure our views are organized in a way that makes sense.

Inside the resources/views/ directory, we’ll create three folders:

  1. layouts → this will hold our main template
  2. includes → this will store reusable parts like header, footer, and meta tags
  3. pages → this will hold each individual page like home and contact

So go into resources/views/ and create these three folders:

Views folder

3 Folders

Now let’s start filling these folders with the files we need.

Step 3: Create Blade Includes

Blade includes help break your layout into reusable pieces. This is super helpful because it keeps your code clean and DRY (Don’t Repeat Yourself). Think of it like building with Legos—these are the blocks.

Let’s create a head section, a header bar, and a footer.

A) Create the <head> section

This will include metadata, a title, and a CSS link. In resources/views/includes, create a file called head.blade.php and paste this:

<title>Laravel Blade Layout</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

body {

font-family: sans-serif;

margin: 0;

padding: 0;

}

header, footer {

background-color: #f4f4f4;

padding: 1em;

text-align: center;

}

main {

padding: 2em;

}

</style>

This is the standard code that goes in the <head> section of every webpage. It does important things like:

  • Sets the page’s character encoding (so letters display correctly)
  • Makes the page look good on phones and computers
  • Adds a title that shows in the browser tab
  • Optionally adds Bootstrap CSS for styling

B) Create the Header (Navbar)

Now in the same includes/ folder, create header.blade.php and paste the code mentioned below:

<h2>My Site Header</h2>

<nav>

<a href="/">Home</a> |

<a href="/contact">Contact</a>

</nav>

Now we’ve got a simple Bootstrap navigation bar that links to our Home and Contact pages.

C) Create the Footer

Still in includes/, create footer.blade.php and paste the code mentioned below:

<p>© 2025 Laravel Blade Example</p>

paste the code mentioned below

Step 4: Create the Master Layout File

Now let’s bring those includes together in one main layout file. Think of this file as the skeleton of every page—common structure that we don’t want to repeat.

In the layouts/ folder, create a file called default.blade.php:

<!DOCTYPE html>

<html>

<head>

@include('includes.head')

</head>

<body>

<header>

@include('includes.header')

</header>

<main>

@yield('content')

</main>

<footer>

@include('includes.footer')

</footer>

</body>

</html>

Let me explain:

  • @include() is how we pull in partial files like the header, footer, and head section.
  • @yield(‘content’) is a placeholder. Each individual page will inject its unique content here using @section(‘content’).

Now let’s make some pages that use this layout.

Step 5: Create the Home and Contact Pages

In the pages/ folder, create home.blade.php:

@extends('layouts.default')

@section('content')

<h1>Welcome to the Home Page</h1>

<p>This content is unique to the home page.</p>

@endsection

And now create contact.blade.php:

@extends('layouts.default')

@section('content')

<h1>This is the Contact Page</h1>

@stop

Notice how both pages use @extends(‘layouts.default’)? That’s how Blade knows to use the layout we made.

Then the content inside @section(‘content’) is what gets slotted into the @yield(‘content’) placeholder in the layout.

Step 6: View Your Pages in the Browser

Now go back to your browser and refresh the homepage. Make sure your development server is running:

php artisan serve

Then:

Welcome to homepage

Contact page

Advanced Blade Layout Techniques

Once you’ve got the basic layout up and running, you’re probably wondering: “Okay, this is neat… but how do I actually make it feel like a real site with real content?”

Good question.

Let’s now explore passing dynamic data to Blade views (because real sites don’t just echo “Welcome to the Home Page” forever)

Ready to take your Laravel projects live?

Set up Blade layouts and prepare your Laravel app for high-performance hosting.

Pass Data to Your Blade Views

You don’t always want your templates to spit out the same text. Maybe you want to greet a user by name, show today’s date, or load data from a database. That’s where view data comes in.

Let’s say you want to personalize the homepage with a name.

Open up your routes/web.php file and update your homepage route like this:

// routes/web.php

Route::get('/', function () {

return view('pages.home', ['name' => 'Abdul Rehman']);

});

Blog Code

Now update home.blade.php to use that data:

@extends('layouts.default')

@section('content')

<h1>Welcome, {{ $name }}!</h1>

<p>This content is unique to the home page.</p>

@endsection

Refresh the page in your browser and boom—you’ll see:

Welcome, Abdul Rehman!

Welcome rehman

This is useful when you want to personalize the user experience or populate pages with real data.

Want to test this further?

Try changing Abdul Rehman to ‘Zara’ or ‘David’ and refresh the page again. This proves your view is responding to dynamic input.

Why this matters:

Passing data into views is the foundation of making your app feel alive. Even though this example is hardcoded, the same technique works when pulling data from a database or API later on.

Conclusion

This wraps up our guide on using Laravel Blade to build clean, reusable layouts. Laravel Blade allows you to separate your site’s structure from its content, making it easy to manage headers, footers, and other shared elements without repeating yourself on every page.

Here’s what we looked at in this blog:

  • We started with the basics: creating a master layout using @yield, breaking the page into includes like the header, footer, and head, and extending layouts in individual views with @extends and @section.
  • In the advanced part, we explored how to pass dynamic data into Blade views, making your pages feel more personalized and real-world ready.

With these fundamentals in place, you now have a solid starting point for structuring Laravel frontend code the right way.

Frequently Asked Questions

Q) What is a Blade in Laravel?

A) Blade is Laravel’s templating engine that helps separate PHP code from HTML, making views dynamic and reusable. It simplifies template inheritance and component reuse.

Q) What is the purpose of using Blade layouts in Laravel?

A) Blade layouts structure your Laravel views by separating content from design, ensuring code reusability and easy maintenance.

Q) Are there predefined Blade layouts in Laravel?

A) Yes, Laravel includes a default layout, app.blade.php, in resources/views/layouts/, and you can create custom templates for better project organization.

Q) How do I define and include reusable sections in a Blade layout?

A) Use @yield to define sections and @include to insert reusable components into Blade templates, making them modular and maintainable.

Q) Can I extend multiple Blade layouts in Laravel?

A) No, you can extend only one Blade layout using @extends, but you can include multiple templates using @include for reusable components.

Q) How do I create a Blade file in Laravel?

A) To create a Blade template, add a .blade.php file inside resources/views/ and structure your dynamic content using Blade directives.

Q) What is the @yield directive in Laravel?

A) The @yield directive defines sections in a Blade layout that child views can fill, allowing flexible content injection in templates.

Q) How do I create a custom Blade directive in Laravel?

A) Register a custom directive in AppServiceProvider using Blade::directive(), then use it in views for cleaner and reusable code logic.

Q) How do I create a Laravel 9 Blade layout?

A) Install Laravel, set up a controller, define routes, create a layouts folder, add partials, structure your Blade files, and use @extends and @section to manage content.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Abdul Rehman

Abdul is a tech-savvy, coffee-fueled, and creatively driven marketer who loves keeping up with the latest software updates and tech gadgets. He's also a skilled technical writer who can explain complex concepts simply for a broad audience. Abdul enjoys sharing his knowledge of the Cloud industry through user manuals, documentation, and blog posts.

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour