Create a Basic Layout of the Master Page in Laravel

by

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.

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

footer template in laravel

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.

Leave a Comment