'I extend Laravel page from layout but didn't work

I attempted to create a Todo app like this tutorial. So I extended a Laravel page from the layout, but it didn't work.

home.blade.php

@extends('layouts.app')
@section('title', 'Todo Laravel')
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 offset-sm-3 col-md-6 offset-md-3">
                <div class="my-3">
                    @if (count($todos) > 0)
                        <ul class="list-group">
                            @foreach ($todos as $todo)
                                <li class="list-group-item">{{ $todo->title }}</li>
                            @endforeach
                        </ul>
                    @else
                        <p class="lead">No ACTIVE todo tasks</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <title>@yield('title')</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
@yield('content')
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>

Result screenshot

laravellaravel-blade


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions