How to create a master blade in Laravel

  • Post author:
  • Post category:Laravel
  • Post comments:0 Comments
  • Post last modified:October 5, 2020
  • Reading time:2 min(s) read

In this blog, you will get to learn the creation master blade in Laravel. As you know a view page is called a blade in Laravel, the master blade is nothing but a view page where you can place all the common header, footer, and also CSS, Javascripts of your respective website. So that you don’t need to place them again and again in the rest of the blades.

If you are a beginner then I will recommend you to check all the Laravel related posts for better understatement.

Step 1: Create a new blade in the view folder (example:master.blade.php). You can give your desired name to your master blade. Now check the code given below:

<!DOCTYPE html>
<html>
<head>
<title>Laravel demo project</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/ bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{{ url('css/style.css') }}">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{{ url('/') }}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('/about') }}">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>

</nav>

</div>

@yield('content')



</body>
</html>

yield() basically change the content dynamically.

Step 2 : Go to your existing blade (suppose: home.blade.php) Then, you have to add three lines of code as shown below:

@extends('master')

@section('content')


<div class="container">

	<h1 class="home">Hi I'am Home Page</h1>
	

</div>


@stop

Please leave your valuable feedback in the comment section. Support us by sharing our blog and videos. Follow us on the social media link in the below footer section.

Leave a Reply