Laravel 7 Layout Problem (Navbar and Content)

Question

been struggling with my template using laravel 7 and bootstrap 5.2.3. my code was right based on my previous projects but this time I am having a problem in my layout.

in my app.blade.php, after the body tag, I put my codes like this.

 @extends('includes.navbar')
    <div id="app">
        <main class="py-4 container">
            @extends('includes.messages')
            @yield('content')
        </main>
    </div>

and navbar like this,

<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
    <div class="container">
    //links goes here
    </div>
</nav>

but the output is the content shown above and navbar below content. Please see photos below. can anyone help me, thanks ahead.

I already tried looking for solutions over the internet but I didn't see anything related to my concern.

Answer 1

So i think you should read document of @extends and @include

TLDR:

• @extends: to extend a layout

  • app.blade.php is a layout

• @include: to include subviews

  • includes.navbar: is a subview
  • includes.messages: is a subview

• before

 @extends('includes.navbar')
    <div id="app">
        <main class="py-4 container">
            @extends('includes.messages')
            @yield('content')
        </main>
    </div>

• after

@include('includes.navbar') {{-- use include instead of extends --}}
<div id="app">
    <main class="py-4 container">
        @include('includes.messages') {{-- use include instead of extends --}}
        @yield('content')
    </main>
</div>

I suggest:

• create a /layouts folder inside <root>/views/

• create a app.blade.php

  @include('includes.navbar')
  <div id="app">
      <main class="py-4 container">
          @include('includes.messages')
          @yield('content')
      </main>
  </div>
  

• use layout

  // some controller
  Route::get('/', function () {
      return view('welcome');
  });
  

  // <root>/views/welcome.blade.php
  @extends('layouts.layout')
  @section('content')
  this is content of "yield('content')"
  @endsection
  

• Update

1. I create repo to reproduce this problem. and you can checkout the commit as a step by step produce/resolve it