Learn how to use Blade layouts and sections to create a DRY, consistent UI for your Laravel application. Stop repeating code and master template inheritance.
Previously in this course, we explored introduction to blade templating to output dynamic data. While that taught us the basics, you likely noticed that copying your HTML boilerplate into every new view is inefficient and error-prone. In this lesson, we solve that by using layouts and sections to build a consistent, maintainable structure for your Task Manager.
If you have five different pages in your application—like a dashboard, a task list, and a profile page—each one probably shares the same HTML head, navigation bar, and footer. Without layouts, you’d have to update every single file just to change a link in your header.
Laravel’s Blade templating engine provides a powerful feature called template inheritance. This allows you to define a "master" skeleton and only swap out the specific content for each page.
A layout is simply a standard Blade file that acts as a wrapper. Instead of writing the full <html> structure in every view, you define it once in resources/views/layouts/app.blade.php.
Within this file, you use the @yield directive to create "holes" where your child views can inject their unique content.
HTML<!-- resources/views/layouts/app.blade.php --> <!DOCTYPE html> style="color:#808080"><style="color:#4EC9B0">html lang="en"> style="color:#808080"><style="color:#4EC9B0">head> style="color:#808080"><style="color:#4EC9B0">title>Task Manager | @yield('title')style="color:#808080"></style="color:#4EC9B0">title> style="color:#808080"></style="color:#4EC9B0">head> style="color:#808080"><style="color:#4EC9B0">body> style="color:#808080"><style="color:#4EC9B0">nav>...style="color:#808080"></style="color:#4EC9B0">nav> style="color:#808080"><style="color:#4EC9B0">main> @yield('content') style="color:#808080"></style="color:#4EC9B0">main> style="color:#808080"><style="color:#4EC9B0">footer>...style="color:#808080"></style="color:#4EC9B0">footer> style="color:#808080"></style="color:#4EC9B0">body> style="color:#808080"></style="color:#4EC9B0">html>
The @yield('title') and @yield('content') directives tell Blade: "This is a placeholder. If a child view provides content for this specific name, render it here."
Now that you have a master skeleton, you can "extend" it in your specific views. This is where sections come into play.
Let's say you are building your task index page. Instead of writing the full HTML boilerplate, you use the @extends directive at the top of your file to point to the layout, and then use @section to fill the placeholders you defined earlier.
HTML<!-- resources/views/tasks/index.blade.php --> @extends('layouts.app') @section('title', 'My Tasks') @section('content') style="color:#808080"><style="color:#4EC9B0">h1>Task Liststyle="color:#808080"></style="color:#4EC9B0">h1> style="color:#808080"><style="color:#4EC9B0">p>Here are your current tasks!style="color:#808080"></style="color:#4EC9B0">p> @endsection
Here is exactly what is happening:
@extends('layouts.app') tells Laravel to wrap this file inside resources/views/layouts/app.blade.php.@section('title', 'My Tasks') is a shorthand for injecting a short string into the @yield('title') slot.@section('content') ... @endsection wraps a larger block of code that fills the @yield('content') slot.To advance our Task Manager project, follow these steps:
resources/views/layouts directory.app.blade.php inside it and add the basic HTML boilerplate shown in the "Creating Your First Layout" section.@endsection: If you forget to close a section with @endsection, Blade will often "swallow" the rest of your page content, leading to a broken layout or missing UI elements.@extends uses dot notation relative to the resources/views folder. If your file is in layouts/app.blade.php, you reference it as layouts.app.By using layouts and sections, we move from a collection of fragmented files to a clean, centralized system. This is a fundamental step toward building professional applications. You now have a master template that ensures your site's navigation and branding remain consistent, while your child views handle the unique business logic.
For more advanced templating, you might eventually want to explore Laravel Blade components or create Laravel Blade custom directives to keep your code even drier.
Up next: We will look at how to extract common UI elements like headers and footers into reusable partials using @include.
Learn how to use Blade directives like @if, @foreach, and @forelse to control your view logic and render dynamic lists in your Laravel applications efficiently.
Read moreLearn how to use Blade to render dynamic data in Laravel. Discover how to create .blade.php files, use echo syntax, and implement essential directives.
Using Blade Layouts and Sections
Protecting Routes with Middleware
Understanding CSRF Protection
Preventing Mass Assignment
Task Manager: Securing the Application
Introduction to Route Model Binding
Updating Existing Records
Deleting Records
Using Named Routes
Task Manager: Completing CRUD Functionality
Introduction to Database Relationships
Querying Related Data
Handling File Uploads
Using Flash Messages for User Feedback
Task Manager: Adding Status and Priorities
Introduction to Artisan Commands
Debugging with Laravel Tinker
Understanding Service Providers
Using View Composers
Task Manager: Refactoring for Clean Code
Introduction to Testing
Testing Forms and Validation
Using Database Transactions
Handling Global Exceptions
Preparing for Production
Environment Security Best Practices
Managing Assets in Production
Task Manager: Deployment Preparation