Laravel5.7.3でBootstrap4が反映されない

Laravel5でBootstrap4を使おうと思っているのですが。なかなかできません。
ファイルの読み込ませ方がおかしいのでしょうか？それ以外にやらないといけないことがあるのでしょうか？
現状のコードを載せておきます。

bootstrap.cssとbootstrap.jsファイルはそれぞれpublic/cssとpublic/js内に置いてあります。
jquary.jsとpopper.jsはCDNで読み込んでます。

resources/views/home.blade.php　

php
1<!DOCTYPE html>
2<html lang="{{ app()->getLocale() }}">
3    <head>
4       
5        <meta name <meta charset="utf-8">
6        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8        <title>Home</title>
9        
10        <!--BootstrapのCSS読み込み-->
11        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
12        
13        <!--jQueryの読み込み-->
14        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
15        <!--popper.jsの読み込み-->
16        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
17        <!--Bootstrap.JSの読み込み-->  
18        <script type="text/javascript" rel="js/bootstrap.js"></script> 
19    </head>
20    <body>
21        
22        <header>
23        </header>
24    
25        <a href="#" class="btn btn-success">BootStrapのボタン</a>
26    
27        <footer>
28        </footer>
29    
30    </body>
31</html>

resources/sass/_variable.scss

scss
1// Body
2$body-bg: #f8fafc;
3// Typography
4$font-family-sans-serif: "Nunito",
5sans-serif;
6$font-size-base: 0.9rem;
7$line-height-base: 1.6;
8// Colors
9$blue: #3490dc;
10$indigo: #6574cd;
11$purple: #9561e2;
12$pink: #f66D9b;
13$red: #e3342f;
14$orange: #f6993f;
15$yellow: #ffed4a;
16$green: #38c172;
17$teal: #4dc0b5;
18$cyan: #6cb2eb;

routes/web.php

php
1Route::get('/bicycleapp/home', function () {
2    return view ('home');
3});
4
5Auth::routes();
6
7Route::get('/home', 'HomeController@index')->name('home');

結果

※Laravelではなく通常のHTMLでやった場合はBootsteapが反映されていました。↓

bootstrap.css、bootstrap.jsはそれぞれの[css][js]ファイル内に、jquery.jsは上のLaravelと同様にCDNで読み込んでいます。

　```html

<!DOCTYPE html>

<a href="#" class="btn btn-success">BootStrapのボタン</a>

<footer>
</footer>

</body> </html> ``` 結果 ![通常のHTMLの場合](3f2ea1fda2e4f8da8c419386edfe84cf.png)

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

回答1件

ベストアンサー

気になるのは2点。

"jQueryの読み込み"のscriptタグとの比較で気づかれたら良かったのですが、scriptタグで外部ファイルを読み込む場合の属性はsrcです。参考：<script> - スクリプト

scriptタグにrel属性はありません。

css/~ や js/~のようにパスの冒頭に何もなしで記述すると、現在アクセスしているURLからの相対パス・・・となり（./css/~と同じ）、トップページ以外からアクセスできなくなります。/css/~のようにスラッシュだけ置いても良いですがそれでは固定になってしまうので、Laravelではそういったパスの違いを吸収するためのヘルパーが用意されていたはずです。

ヘルパ-URL:asset Laravel5.7

Qiitaにも同じように対応している記事があったので参考にしてください