This post describes creating a Basic Layout of the Master Page in Laravel.
Step 1: Create a “main.blade.php” page in view folder
First, create a new page “main.blade.php” in view Folder.
<!doctype html>
<html @lang('en')>
<head>
@include('partials/_head')
@include('partials/_css')
</head>
<body id="page-top" >
@include('partials/_nav')
<div >
@yield('content')
</div>
@include('partials/_footer')
@include('partials/_script')
@yield('script')
</body>
</html>
Step 2:
Create a Folder “partials” and add some pages in this folder.
- _head.blade.php
- _css.blade.php
- _nav.blade.php
- _footer.blade.php
- _script.blade.php
In the head, section Include two pages _head and _css which is partials folder. In the _head.blade.php file content all Head file like CSS, and Titles etc. second _css.blade.php file content All Custom CSS.
Now, Come in Body Section here is the _nav.blade.php file where content Navigation Bar Code. Then Add @yield(‘content’) where come all the main body of the view page. Add Footer code in _footer.blade.php and add script code in the _script.blade.php file.
Step 3:
Add _head.blade.php
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin=anonymous>
@yield('style')
<title>CoderMen @yield('title')</title>
Add _nav.blade.php
add a Navigation Bar for Application.

Create a page “content.blade.php”
Where show the main content of the website like Blog post etc.
@extends('main')
@section('title','| Codermen.com ')
@section('style')
@endsection
@section('content')
<div >
<div >
<h1>This is Blog Post Title.</h1>
</div>
</div>
@endsection
@section('script')
@endsection
Edit _footer.blade.php
Add a Simple Bootstrap 4 Footer in the _footer.blade.php page.
<!-- Footer -->
<footer >
<!-- Footer Links -->
<div >
<!-- Grid row -->
<div >
<!-- Grid column -->
<div >
<!-- Content -->
<h5 >Footer Content</h5>
<p>Here you can use rows and columns here to organize your footer content.</p>
</div>
<!-- Grid column -->
<hr >
<!-- Grid column -->
<div >
<!-- Links -->
<h5 >Links</h5>
<ul >
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div >
<!-- Links -->
<h5 >Links</h5>
<ul >
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div >© 2018 Copyright:
<a href="//mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->

Edit _script.blade.php
Add some bootstrap script code in the _script.blade.php page.
<script src=//code.jquery.com/jquery-3.2.1.slim.min.js integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin=anonymous></script>
<script src=//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin=anonymous></script>
<script src=//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin=anonymous></script>
Run your application and see the Result.

Brijpal Sharma is a web developer with a passion for writing tech tutorials. Learn JavaScript and other web development technology.