Create a Basic Layout of the Master Page in Laravel

Posted on: 03 Mar, 2022

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>

<head>

@include('partials/_head')

@include('partials/_css')

</head>

@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

@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 >

<h1>This is Blog Post Title.</h1>

</div>

@endsection

@section('script')

@endsection

Edit _footer.blade.php

Add a Simple Bootstrap 4 Footer in the _footer.blade.php page.

<div >

<div >

<div >

<h5 >Footer Content</h5>

<p>Here you can use rows and columns here to organize your footer content.</p>

</div>

<hr >

<div >

<h5 >Links</h5>

<ul >

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

<div >

<h5 >Links</h5>

<ul >

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</div>

</div>

<a href="//mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com</a>

</div>

</footer>

Edit _script.blade.php

Add some bootstrap script code in the _script.blade.php page.

Run your application and see the Result.

Comments (0)

No Comment Found

Create a Basic Layout of the Master Page in Laravel