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:
- @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.
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.
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.
