Using Blade Layouts and Sections: A Beginner's Guide

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.

LaravelBladeTemplatingLayoutsWeb Developmentphpbackend

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.

The Problem: Why We Need Layouts

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.

Creating Your First Layout

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."

Extending a Layout in Child Views

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.

Hands-on Exercise

To advance our Task Manager project, follow these steps:

Create the resources/views/layouts directory.
Create app.blade.php inside it and add the basic HTML boilerplate shown in the "Creating Your First Layout" section.
Open your existing task list view and refactor it to extend this new layout.
Verify that the task list still renders correctly in the browser.

Common Pitfalls

Forgetting @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.
Incorrect Pathing: Remember that @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.
Yielding in the Wrong Order: Blade renders content in the order it sees it. Ensure your layout is defined before your views try to extend it.

Recap

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.

Work with me

Laravel REST API Development

Clean, secure, well-documented Laravel REST APIs — the backend engine for your app, mobile client, or SaaS. Built by an API specialist.

From $180

FilamentPHP Admin Panel & Dashboard Development

A powerful admin panel for your Laravel app — built with FilamentPHP so you can manage everything without touching the database.

From $250

Back to Blog