Key Takeaways
- Laravel Blade layouts use
@extendsand@yieldto separate page structure from page content. @includepulls in reusable partials like headers, footers, and nav components without repeating code.- Each child view extends one master layout and fills named sections with
@sectionand@endsection. - Dynamic data is passed from routes or controllers to Blade views as an array and accessed with
{{ $variable }}.
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:
- @yield() – These are placeholders waiting to be filled
- Default content (optional) – Shown if a section isn’t provided
- 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
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
Visit http://127.0.0.1:8000 in your browser. You should see the 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');
});
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:
- layouts → this will hold our main template
- includes → this will store reusable parts like header, footer, and meta tags
- pages → this will hold each individual page like home and contact
So go into resources/views/ and create these three 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>
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:
- Visit http://127.0.0.1:8000/ → You should see your custom home page with the header and footer.
- Visit http://127.0.0.1:8000/contact → You’ll see the contact page, again wrapped in the same layout.
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']);
});
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!
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.
Q. What is Laravel Blade?
A. Blade is Laravel’s built-in templating engine. It lets you build dynamic HTML views using simple directives like @extends, @yield, @section, and @include, compiled to efficient PHP behind the scenes. All Blade files use the .blade.php extension.
Q. What is the Difference Between @yield and @section in Blade?
A. @yield is placed in the master layout and defines a named placeholder. @section is placed in a child view and fills that placeholder with content. The names in @yield and @section must match for the content to appear in the right location.
Q. What Does @extends Do in Laravel Blade?
A. @extends tells a child view which master layout it inherits. When Blade renders the view, it wraps the child’s section content inside the master layout structure, including all headers, footers, and shared elements.
Q. What is @include Used For in Blade?
A. @include pulls an external Blade partial file into the current template at the point where it appears. It is used to insert reusable components like headers, footers, navigation bars, and form elements without duplicating code.
Q. Can I Extend Multiple Blade Layouts in One View?
A. No. A Blade view can only extend one master layout using @extends. However, you can include as many partial files as needed using @include within both the master layout and child views.
Q. How Do I Pass Data From a Controller to a Blade View?
A. Return the view from your controller using return view('view.name', ['key' => $value]) or return view('view.name', compact('variable')). The array keys become variables available in the Blade template using {{ $key }} syntax.
Q. What is the @yield Default Value in Blade?
A. You can provide a default value as the second argument to @yield: @yield('section_name', 'Default content here'). This default content displays if no child view fills that section.
Q. How Do I Create a Custom Blade Directive in Laravel?
A. Register custom directives in your AppServiceProvider boot method using Blade::directive('name', function ($expression) { return "<?php /* your PHP code */ ?>"; }). Custom directives are useful for wrapping frequently used logic into clean, readable template tags.
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.
