title: When I use '/js/app.js' on my Laravel view my Bootstrap doesn't load
body: <p>I'm using this Laravel View to show a Vue Component, but when I use this on my view, then the Bootstrap doesn't work. How can I solve this problem.</p>
  
  <pre><code>&lt;script src="{{ asset('/js/app.js') }}"&gt;&lt;/script&gt; 
  </code></pre>
  
  <p>This is my view.</p>
  
  <p><strong>View</strong></p>
  
  <pre><code>@extends('layouts.app')
  
  @section('title')
  Brand
  @endsection
  
  @section('content')
  &lt;div class="row"&gt;
      &lt;div class="col-md-6 product-img mt-3"&gt;
          &lt;div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false"&gt;
              &lt;div class="carousel-inner"&gt;
                  &lt;div class="carousel-item active"&gt;
                  &lt;img class="d-block mx-auto" src="{{ $product-&gt;imageUrl }}" alt="First slide"&gt;
                  &lt;/div&gt;
                  &lt;div class="carousel-item"&gt;
                  &lt;img class="d-block mx-auto" src="{{ $product-&gt;image1 }}" alt="Second slide"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="text-center pt-2"&gt;
                  &lt;img style="cursor: pointer" data-target="#carouselExampleIndicators" data-slide-to="0" class="active img-thumbnail product-image" src="{{ $product-&gt;imageUrl }}" alt=""&gt;
                  &lt;img style="cursor: pointer" data-target="#carouselExampleIndicators" data-slide-to="1" class="img-thumbnail product-image" src="{{ $product-&gt;image1 }}" alt=""&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-5 product-info product mt-5 mb-2"&gt;
          &lt;h2 class="pt-2"&gt;{{ $product-&gt;title }}&lt;/h2&gt;
          &lt;h6 class="pt-2"&gt;Stars - Numbers of reviews | Microsoft&lt;/h6&gt;
          &lt;h1 style="font-weight:bold; font-size:30px" class="pt-2"&gt;${{ $product-&gt;price }}&lt;/h1&gt;
          &lt;h6 style="font-weight:bold" class="pt-2"&gt;Free 2-day shipping &lt;/h6&gt;
          &lt;hr&gt;
          &lt;div class="product-sell product"&gt;
              &lt;h6 class="text-muted"&gt;Qty :&lt;/h6&gt;
              &lt;select name="quantity" id="qty" class="mr-2"&gt;
                  &lt;option value="1"&gt;1&lt;/option&gt;
                  &lt;option value="2"&gt;2&lt;/option&gt;
                  &lt;option value="3"&gt;3&lt;/option&gt;
                  &lt;option value="4"&gt;4&lt;/option&gt;
                  &lt;option value="5"&gt;5&lt;/option&gt;
                  &lt;option value="6"&gt;6&lt;/option&gt;
                  &lt;option value="7"&gt;7&lt;/option&gt;
                  &lt;option value="8"&gt;8&lt;/option&gt;
                  &lt;option value="9"&gt;9&lt;/option&gt;
                  &lt;option value="10"&gt;10&lt;/option&gt;
                  &lt;option value="11"&gt;11&lt;/option&gt;
                  &lt;option value="12"&gt;12&lt;/option&gt;
              &lt;/select&gt;
              &lt;button class="rounded btn btn-primary" type="submit" form="NoForm" value="Submit"&gt;Add to &lt;i class="fas fa-shopping-cart"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/div&gt;
          &lt;hr&gt;
          &lt;div class="product-shipping"&gt;
              &lt;h5 style="font-size:17px; font-weight:bold"&gt;&lt;i class="fas fa-paper-plane mr-2"&gt;&lt;/i&gt;Sale &amp; shipping by Some-Brand&lt;/h5&gt;
          &lt;/div&gt;
          &lt;hr&gt;
          &lt;div class="wish-list"&gt;
              &lt;h6 style="font-weight:bold"&gt;Save it too...&lt;/h6&gt;&lt;button class="rounded btn btn-primary" type="submit" form="NoForm" value="Submit"&gt;Add to &lt;i class="fas fa-heart"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/div&gt;
          &lt;hr&gt;
          &lt;div class="form error-form"&gt;
              &lt;h6 class="" style="font-weight:bold"&gt;Contact us&lt;/h6&gt;
              &lt;a class="text-dark" href=""&gt;&lt;i class="fas fa-comment mr-2"&gt;&lt;/i&gt;&lt;u&gt;Let us know if something went wrong&lt;/u&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;hr class="mt-5"&gt;
  &lt;div class="text-center pt-5"&gt;
      &lt;div class="container"&gt;
          &lt;h3 class="text-left"&gt;Other customers looked for&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel"&gt;
          &lt;div class="carousel-inner w-100" role="listbox"&gt;
              &lt;div class="carousel-item row no-gutters active offset-md-1"&gt;
                  &lt;div class="card col-3 float-left mr-5" style="width: 200px;"&gt;&lt;a href="{{ route('welcome.show', ['product' =&gt; $product]) }}"&gt;&lt;img class="card-img-top img-fluid" src="{{ $product-&gt;imageUrl }}" alt="Card image cap"&gt;&lt;/a&gt;&lt;div class="card-body"&gt;&lt;h5 class="card-title"&gt;{{ $product-&gt;title}}&lt;/h5&gt;&lt;h2 class="card-text"&gt;${{ $product-&gt;price }}&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;div class="card col-3 float-left mr-5" style="width: 200px;"&gt;&lt;a href="{{ route('welcome.show', ['product' =&gt; $product]) }}"&gt;&lt;img class="card-img-top img-fluid" src="{{ $product-&gt;imageUrl }}" alt="Card image cap"&gt;&lt;/a&gt;&lt;div class="card-body"&gt;&lt;h5 class="card-title"&gt;{{ $product-&gt;title}}&lt;/h5&gt;&lt;h2 class="card-text"&gt;${{ $product-&gt;price }}&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;div class="card col-3 float-left mr-5" style="width: 200px;"&gt;&lt;a href="{{ route('welcome.show', ['product' =&gt; $product]) }}"&gt;&lt;img class="card-img-top img-fluid" src="{{ $product-&gt;imageUrl }}" alt="Card image cap"&gt;&lt;/a&gt;&lt;div class="card-body"&gt;&lt;h5 class="card-title"&gt;{{ $product-&gt;title}}&lt;/h5&gt;&lt;h2 class="card-text"&gt;${{ $product-&gt;price }}&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;div class="card col-3 float-left mr-5" style="width: 200px;"&gt;&lt;a href="{{ route('welcome.show', ['product' =&gt; $product]) }}"&gt;&lt;img class="card-img-top img-fluid" src="{{ $product-&gt;imageUrl }}" alt="Card image cap"&gt;&lt;/a&gt;&lt;div class="card-body"&gt;&lt;h5 class="card-title"&gt;{{ $product-&gt;title}}&lt;/h5&gt;&lt;h2 class="card-text"&gt;${{ $product-&gt;price }}&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;div class="card col-3 float-left mr-5" style="width: 200px;"&gt;&lt;a href="{{ route('welcome.show', ['product' =&gt; $product]) }}"&gt;&lt;img class="card-img-top img-fluid" src="{{ $product-&gt;imageUrl }}" alt="Card image cap"&gt;&lt;/a&gt;&lt;div class="card-body"&gt;&lt;h5 class="card-title"&gt;{{ $product-&gt;title}}&lt;/h5&gt;&lt;h2 class="card-text"&gt;${{ $product-&gt;price }}&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="carousel-item row no-gutters offset-md-1"&gt;
                  &lt;div class="card col-3 float-left mr-5" style="width: 200px;"&gt;&lt;a href="{{ route('welcome.show', ['product' =&gt; $product]) }}"&gt;&lt;img class="card-img-top img-fluid" src="{{ $product-&gt;imageUrl }}" alt="Card image cap"&gt;&lt;/a&gt;&lt;div class="card-body"&gt;&lt;h5 class="card-title"&gt;{{ $product-&gt;title}}&lt;/h5&gt;&lt;h2 class="card-text"&gt;${{ $product-&gt;price }}&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;div class="card col-3 float-left mr-5" style="width: 200px;"&gt;&lt;a href="{{ route('welcome.show', ['product' =&gt; $product]) }}"&gt;&lt;img class="card-img-top img-fluid" src="{{ $product-&gt;imageUrl }}" alt="Card image cap"&gt;&lt;/a&gt;&lt;div class="card-body"&gt;&lt;h5 class="card-title"&gt;{{ $product-&gt;title}}&lt;/h5&gt;&lt;h2 class="card-text"&gt;${{ $product-&gt;price }}&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;div class="card col-3 float-left mr-5" style="width: 200px;"&gt;&lt;a href="{{ route('welcome.show', ['product' =&gt; $product]) }}"&gt;&lt;img class="card-img-top img-fluid" src="{{ $product-&gt;imageUrl }}" alt="Card image cap"&gt;&lt;/a&gt;&lt;div class="card-body"&gt;&lt;h5 class="card-title"&gt;{{ $product-&gt;title}}&lt;/h5&gt;&lt;h2 class="card-text"&gt;${{ $product-&gt;price }}&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;div class="card col-3 float-left mr-5" style="width: 200px;"&gt;&lt;a href="{{ route('welcome.show', ['product' =&gt; $product]) }}"&gt;&lt;img class="card-img-top img-fluid" src="{{ $product-&gt;imageUrl }}" alt="Card image cap"&gt;&lt;/a&gt;&lt;div class="card-body"&gt;&lt;h5 class="card-title"&gt;{{ $product-&gt;title}}&lt;/h5&gt;&lt;h2 class="card-text"&gt;${{ $product-&gt;price }}&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;div class="card col-3 float-left mr-5" style="width: 200px;"&gt;&lt;a href="{{ route('welcome.show', ['product' =&gt; $product]) }}"&gt;&lt;img class="card-img-top img-fluid" src="{{ $product-&gt;imageUrl }}" alt="Card image cap"&gt;&lt;/a&gt;&lt;div class="card-body"&gt;&lt;h5 class="card-title"&gt;{{ $product-&gt;title}}&lt;/h5&gt;&lt;h2 class="card-text"&gt;${{ $product-&gt;price }}&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;a class="carousel-control-prev" href="#recipeCarousel" role="button" data-slide="prev"&gt;
              &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="carousel-control-next" href="#recipeCarousel" role="button" data-slide="next"&gt;
              &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Next&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;hr&gt;
  &lt;div class="pt-5"&gt;
      &lt;div class="container"&gt;
          &lt;h3&gt;Product description&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;h6 class="text-left" style="font-size:20px"&gt;{{ $product-&gt;description }}&lt;/h6&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;hr class="mt-5"&gt;
  &lt;div class="text-center pt-5"&gt;
      &lt;div class="container"&gt;
          &lt;h3 class="text-left"&gt;Other customers bought&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel"&gt;
          &lt;div class="carousel-inner w-100" role="listbox"&gt;
              &lt;div class="carousel-item row no-gutters active offset-md-1"&gt;
                  &lt;div class="card col-3 float-left mr-5" style="width: 200px;"&gt;&lt;a href="{{ route('welcome.show', ['product' =&gt; $product]) }}"&gt;&lt;img class="card-img-top img-fluid" src="{{ $product-&gt;imageUrl }}" alt="Card image cap"&gt;&lt;/a&gt;&lt;div class="card-body"&gt;&lt;h5 class="card-title"&gt;{{ $product-&gt;title}}&lt;/h5&gt;&lt;h2 class="card-text"&gt;${{ $product-&gt;price }}&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;div class="card col-3 float-left mr-5" style="width: 200px;"&gt;&lt;a href="{{ route('welcome.show', ['product' =&gt; $product]) }}"&gt;&lt;img class="card-img-top img-fluid" src="{{ $product-&gt;imageUrl }}" alt="Card image cap"&gt;&lt;/a&gt;&lt;div class="card-body"&gt;&lt;h5 class="card-title"&gt;{{ $product-&gt;title}}&lt;/h5&gt;&lt;h2 class="card-text"&gt;${{ $product-&gt;price }}&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;div class="card col-3 float-left mr-5" style="width: 200px;"&gt;&lt;a href="{{ route('welcome.show', ['product' =&gt; $product]) }}"&gt;&lt;img class="card-img-top img-fluid" src="{{ $product-&gt;imageUrl }}" alt="Card image cap"&gt;&lt;/a&gt;&lt;div class="card-body"&gt;&lt;h5 class="card-title"&gt;{{ $product-&gt;title}}&lt;/h5&gt;&lt;h2 class="card-text"&gt;${{ $product-&gt;price }}&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;div class="card col-3 float-left mr-5" style="width: 200px;"&gt;&lt;a href="{{ route('welcome.show', ['product' =&gt; $product]) }}"&gt;&lt;img class="card-img-top img-fluid" src="{{ $product-&gt;imageUrl }}" alt="Card image cap"&gt;&lt;/a&gt;&lt;div class="card-body"&gt;&lt;h5 class="card-title"&gt;{{ $product-&gt;title}}&lt;/h5&gt;&lt;h2 class="card-text"&gt;${{ $product-&gt;price }}&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;div class="card col-3 float-left mr-5" style="width: 200px;"&gt;&lt;a href="{{ route('welcome.show', ['product' =&gt; $product]) }}"&gt;&lt;img class="card-img-top img-fluid" src="{{ $product-&gt;imageUrl }}" alt="Card image cap"&gt;&lt;/a&gt;&lt;div class="card-body"&gt;&lt;h5 class="card-title"&gt;{{ $product-&gt;title}}&lt;/h5&gt;&lt;h2 class="card-text"&gt;${{ $product-&gt;price }}&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;hr class="mt-5"&gt;
  &lt;div class="container"&gt;
      &lt;div class="comments"&gt;
          &lt;h3&gt;Reviews and comments&lt;/h3&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-4" id="app"&gt;
              &lt;star-rating&gt;&lt;/star-rating&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4 text-center"&gt;
              Rating - statistics
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
              @if(auth()-&gt;check())
                  &lt;div class="create-review text-right"&gt;
                      &lt;a href="{{ route('create.review', [$product] ) }}" class="btn btn-primary" role="button" style="border-radius:20px"&gt;Write a review&lt;/a&gt;
                  &lt;/div&gt;
              @else
                  &lt;div class="write-review text-right"&gt;
                      &lt;a href="/login" class="btn btn-primary" role="button" style="border-radius:20px"&gt;Write a review&lt;/a&gt;
                  &lt;/div&gt;
              @endif
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;hr&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
          &lt;h3&gt;Recent comments&lt;/h3&gt;
              @forelse($product-&gt;reviews as $review)
              &lt;div class="comment mt-5 border border-dark pl-3 pt-3 pb-3 mb-3 rounded"&gt;
                  &lt;div class="title"&gt;
                      &lt;h4&gt;{{ $review-&gt;headline }}&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="body-text pt-3 pr-5"&gt;
                      &lt;p style="text-align:justify"&gt;&lt;strong&gt;{{ $review-&gt;description }}&lt;/strong&gt;&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="author pt-2"&gt;
                      &lt;h6 class="text-muted"&gt;{{ $review-&gt;user_name }},  {{ date('d-m-Y', strtotime( $review-&gt;created_at )) }}&lt;/h6&gt;
                  &lt;/div&gt;
                  &lt;div class="votes row"&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
              @empty
              &lt;h6&gt;There are not reviews for this product&lt;/h6&gt;
              @endforelse
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  @endsection
  
  @section('scripts')
  &lt;script src="{{ asset('/js/app.js') }}"&gt;&lt;/script&gt;
  @endsection
  </code></pre>
  
  <p>This is my "resources/assets/js/app.js", where I have the Vue Component.</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import VueStarRating from 'vue-star-rating'
  
  require('./bootstrap');
  
  window.Vue = require('vue');
  
  
  
  Vue.component('example-component', require('./components/ExampleComponent.vue'));
  
  Vue.component('star-rating', VueStarRating);
  
  const app = new Vue({
      el: '#app'
  });
  </code></pre>
  
  <p>This is <strong>my webpack.mix.js</strong></p>
  
  <pre><code>let mix = require('laravel-mix');
  
  mix.js('resources/assets/js/app.js', 'public/js')
     .sass('resources/assets/sass/app.scss', 'public/css');
  </code></pre>
  
  <p>And finally, this is my layout file.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;meta name="csrf-token" content="{{ csrf_token() }}"&gt;
      &lt;title&gt;@yield('title')&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="{{ URL::to('src/css/app.css') }}"&gt;
      @yield('styles')
  &lt;/head&gt;
  &lt;body&gt;
  @include('partials.header')
  @yield('content')
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"&gt;&lt;/script&gt;
  @yield('scripts')
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What am I doing wrong? Every kind of help is welcomed. Thanks.</p>