Laravel @extends Not Working Properly When Trying To Reference Main Layout

16 December 2019 - 1 answer

I have an issue with the @extends() function for Laravel. My views don't seem to extend the layout at all. I don't know how to fix this.

Here is the main layout file (it's located in views>layouts>app.blade.php):

   <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Pet Me') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('/js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" target="_blank" rel="nofollow noreferrer" href="//fonts.gstatic.com">
    <link target="_blank" rel="nofollow noreferrer" href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link target="_blank" rel="nofollow noreferrer" href="{{ asset('/css/app.css') }}" rel="stylesheet">
</head>
<body>


<div id="app">
    <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand" target="_blank" rel="nofollow noreferrer" href="{{ url('/') }}">
                {{ config('app.name', 'Pet Me') }}
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <!-- Left Side Of Navbar -->
                <ul class="navbar-nav mr-auto">

                </ul>

                <!-- Right Side Of Navbar -->
                <ul class="navbar-nav ml-auto">
                    <!-- Authentication Links -->
                    @guest
                        <li class="nav-item">
                            <a class="nav-link" target="_blank" rel="nofollow noreferrer" href="{{ route('login') }}">{{ __('Login') }}</a>
                        </li>
                        @if (Route::has('register'))
                            <li class="nav-item">
                                <a class="nav-link" target="_blank" rel="nofollow noreferrer" href="{{ route('register') }}">{{ __('Register') }}</a>
                            </li>
                        @endif
                    @else
                        <li class="nav-item dropdown">
                            <a id="navbarDropdown" class="nav-link dropdown-toggle" target="_blank" rel="nofollow noreferrer" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                {{ Auth::user()->name }} <span class="caret"></span>
                            </a>

                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" target="_blank" rel="nofollow noreferrer" href="{{ route('logout') }}"
                                   onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                    {{ __('Logout') }}
                                </a>

                                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                    @csrf
                                </form>
                            </div>
                        </li>
                    @endguest
                </ul>
            </div>
        </div>
    </nav>

    @if ($errors->any())
        <div>
            Errors:
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{$error}}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if (session('message'))
        <p><b>{{session ('message')}}</b></p>
    @endif

    <main class="py-4">
        @yield('content')
    </main>
</div>
</body>
</html>

and this is one of the views I am trying to have that extend app (located in views>home.blade.php):

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Dashboard</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    You are logged in!
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Answer

Your code is extending the layout correctly as it shows the content of the <nav> and also the content from your home.blade.php file. It seems to me that your CSS is not loading correctly.

I recommend you check in the console that the app.css file is loading correctly. If not please make sure that the app.css file is present on the following path from your the root directory of your Laravel project-

public > css > app.css

Also, it would be more helpful if you could share the screenshot of your console.

Laravel initialises the project with app.css file, placed in the public/css directory. This file is noting but a minified version of Bootstrap's CSS file (docs). In case your file is deleted for some reason. THere is how you can get it -

OPTION 1 Using the CDN of bootstrap's css file.

To do this replace <link target="_blank" rel="nofollow noreferrer" href="{{ asset('/css/app.css') }}" rel="stylesheet"> with <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">. You can get the cdn from here.

OPTION 2

Download Bootstrap from here.
Unzip the downloaded folder.
Go to the css folder.
Copy the bootstrap.min.css and paste in public/css folder in your Laravel project.
Rename the pasted file to app.css.

Your css should load now.

One probable reason your app.css is maybe because you have executed the php artisan preset none command, which removes Laravel's default frontend scaffolding (docs).

source: stackoverflow.com

← Previous Post

Laravel @extends Not Working Properly When Trying To Reference Main Layout

16 December 2019 - 1 answer

Answer

Related Questions