Laravel 8 Tutorial - Blade Template Layout

In this tutorial, we are going to learn about Blade template layouts.

As we know, most web applications follow the same layout across all pages. So, the better approach is to define a master template where we can place all the boilerplate.

In Laravel, the Blade template engine allows us to define a master template that can be extended by other individual pages.

So, let's create a master layout page inside the views folder. Go to the project, click on the resource folder, then click on views. Inside the views folder, let's create a new folder. Let's say the folder name is "layout" and inside the layout folder, create a layout file which is master.blade.php.

Now, open this file and here, first of all, create HTML5 boilerplate. For that, type here html:5 and press tab:


<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Laravel @yield('title')</title> 
</head> 
<body> 
  @yield('content') 
</body> 
</html>

Now, add Bootstrap CDN. Go to getbootstrap.com and from here, copy CSS and JS CDN. Copy this CSS and paste it into the master page head tag, and also copy JS CDN and paste it just before the closing body tag.

Now, let's create some pages and extend this master layout. So, right-click on the views folder and create a new file, index.blade.php, and inside the index.blade.php file, type:


@extends('layouts.master') 
@section('title','Home') 
@section('content') 
  <h3>Home content goes here.</h3> 
@endsection.

Similarly, let's create About Us and Contact Us pages. So, create two files, first about-us.blade.php file and contact-us.blade.php file. Now, open about-us.blade.php and write the following code:


@extends('layouts.master') 
@section('title','Home') 
@section('content') 
  <h3>About us content goes here.</h3> 
@endsection.

Now, open contact-us.blade.php file and write the following code:


@extends('layouts.master') 
@section('title','Home') 
@section('content') 
  <h3>Contact us content goes here.</h3> 
@endsection.

Now, create routes for these. So, go to the web.php file and write the following code:


Route::get('/home',function (){return view('home');});
Route::get('/about',function (){return view('about');});
Route::get('/contact',function (){return view('contact');});

Now, add navigation. So, for that, go to the Bootstrap website and search here nav. Now, copy this code and paste it in master.blade.php file:


<nav class="nav"> 
  <a class="nav-link " href="/home">Home</a> 
  <a class="nav-link" href="/about">About Us</a> 
  <a class="nav-link" href="/contact">Contact Us</a> 
</nav>

Alright, now add links here for Home, About, and Contact. Save the file.

Now, let's check this. So, switch to the browser and refresh the page. And here, you can see the home page. If I click on the About Us link, you can see the About Us page with the same layout. And if I click on the Contact Us link, you can see the Contact page with the same layout.

So, in this way, you can use Blade template layouts in Laravel 8.