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>
<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 -->
Comments (0)
Post Your Comment