Laravel5.6 blade @sectionについてうまくbootstrapが読み込めない

次のディレクトリ構成とファイル名、@sectionをおいてみたのですが、bootstrapが読み込まれないのかうまくbootstrapが効きません。

ファイルの場所が違うか、@section内の名前が違うかだと思い試行錯誤しているのですが、うまくいきませんでした。

アドバイスをいただけないでしょうか。
よろしくお願いいたします。

Laravl5.6

\resources\views\layouts\common.blade.php

php
1@section('content')
2<meta name="viewport" content="width=device-width, initial-scale=1">
3<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
4<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
5<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
6<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
7@endsection
8

\resources\views\article\index.blade.php

php
1@extends('layouts.common')
2@yield('content')
3
4<div class="mx-auto" style="width: 600px; background-color: #2ff1d4; margin: 10px 10px">
5    <div class="container-fluid">
6        <div class="row">
7            <div class="col-sm-12">
8                <form method="POST" action="/article">
9                    <div class="form-group">
10                        {{ csrf_field() }}
11                        <p class="ext-monospace">タイトル</p><input type="text" name="title" class="form-control"><br>
12                        <p class="ext-monospace">本文</p><input type="text" name="body" class="form-control"><br>
13                        <input type="submit" value="投稿" class="btn btn-default">
14                    </div>
15                </form>
16                <br><br>
17            </div>
18        </div>
19        <div class="mx-auto" style="width: 450px;">
20            <div class="row">
21                <div class="col-sm-12">
22                    @foreach($articles as $article)
23                        <div class="card border-primary mb-4" style="max-width: 30rem;">
24                        <div class="card-header">投稿者 {{$article->user->name}}</div>
25                        <div class="card-body text-primary">
26                            <h5 class="card-title">{{$article->title}}</h5>
27                            <p class="card-text">{{$article->body}} </p>
28                        </div>
29                        </div>
30                    @endforeach
31                </div>
32            </div>
33        </div>
34    </div>
35</div>

Chromeのディベロッパーのconsole上は、エラーなし。

生成されたhtml

html
1
2<html><head></head><body><div class="mx-auto" style="width: 600px; background-color: #2ff1d4; margin: 10px 10px">
3    <div class="container-fluid">
4        <div class="row">
5            <div class="col-sm-12">
6                <form method="POST" action="/article">
7                    <div class="form-group">
8                        <input type="hidden" name="_token" value="bWV0n4sCgGqdPusei6i7ZsRDWCeIFjg8kwd80KQk">
9                        <p class="ext-monospace">タイトル</p><input type="text" name="title" class="form-control"><br>
10                        <p class="ext-monospace">本文</p><input type="text" name="body" class="form-control"><br>
11                        <input type="submit" value="投稿" class="btn btn-default">
12                    </div>
13                </form>
14                <br><br>
15            </div>
16        </div>
17        <div class="mx-auto" style="width: 450px;">
18            <div class="row">
19                <div class="col-sm-12">
20                    <div class="card border-primary mb-4" style="max-width: 30rem;">
21                        <div class="card-header">投稿者 まどか</div>
22                            <div class="card-body text-primary">
23                                <h5 class="card-title">hoge</h5>
24                                <p class="card-text">test </p>
25                            </div>
26                        </div>
27                    </div>
28               </div>
29        </div>
30    </div>
31</body></html>
32

m.ts10806

2018/07/28 12:35

ブラウザ開発ツールのコンソールに何か表示されていませんでしょうか？また、ブラウザ「ソースを表示」ではどのようになっていますか？想定通りの情報が挿入されているか確認してください。結果を質問に追記してください。

yoshipu

2018/07/28 13:12

ありがとうございます。おっしゃっていただいたことをヒントにデベロッパーツールでデバックしながら公式ドキュメントを読んだらできました。

行動規範の内容に同意します

回答1件

自己解決

こちらでできました。

ここでベースを定義する
\resources\views\layouts\common.blade.php

php
1
2<html>
3    <head>
4        <meta name="viewport" content="width=device-width, initial-scale=1">
5        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
6        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
7        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
8        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
9        <title>アプリ名 - @yield('title')</title>
10    </head>
11    <body>
12        <div class="mx-auto" style="width: 600px; background-color: #2ff1d4; margin: 10px 10px">
13            <div class="container-fluid">
14                @yield('content')
15            </div>
16        </div>
17    </body>
18</html>
19

ここでパーツを定義
\resources\views\article\child.blade.php

php
1
2@extends('layouts.common')
3
4@section('content')
5    <div class="row">
6        <div class="col-sm-12">
7            <form method="POST" action="/article">
8                <div class="form-group">
9                    {{ csrf_field() }}
10                    <p class="ext-monospace">タイトル</p><input type="text" name="title" class="form-control"><br>
11                    <p class="ext-monospace">本文</p><input type="text" name="body" class="form-control"><br>
12                    <input type="submit" value="投稿" class="btn btn-default">
13                </div>
14            </form>
15            <br><br>
16        </div>
17    </div>
18    <div class="mx-auto" style="width: 450px;">
19        <div class="row">
20            <div class="col-sm-12">
21                @foreach($articles as $article)
22                    <div class="card border-primary mb-4" style="max-width: 30rem;">
23                    <div class="card-header">投稿者 {{$article->user->name}}</div>
24                    <div class="card-body text-primary">
25                        <h5 class="card-title">{{$article->title}}</h5>
26                        <p class="card-text">{{$article->body}} </p>
27                    </div>
28                    </div>
29                @endforeach
30            </div>
31        </div>
32    </div>
33@endsection
34