CODEWITHSUNDEEP
phplaravelextends
user12475206
user12475206

Reputation:

Laravel @extends not working properly when trying to reference main layout

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" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link 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" 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" href="{{ route('login') }}">{{ __('Login') }}</a>
                        </li>
                        @if (Route::has('register'))
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                            </li>
                        @endif
                    @else
                        <li class="nav-item dropdown">
                            <a id="navbarDropdown" class="nav-link dropdown-toggle" 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" 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

It doesn't look appropriate at all.

Upvotes: 1

Views: 3767

Answers (1)

Vedant
Vedant

Reputation: 119

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 href="{{ asset('/css/app.css') }}" rel="stylesheet"> with <link rel="stylesheet" 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

  1. Download Bootstrap from here.
  2. Unzip the downloaded folder.
  3. Go to the css folder.
  4. Copy the bootstrap.min.css and paste in public/css folder in your Laravel project.
  5. 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).

Upvotes: 0

Related Questions