xdega
2 years ago
53
1
Vue

bootstrap data-toggle breaks with app.js

Posted 2 years ago by xdega

So I am running into this perplexing issue when creating a Bootstrap dropdown menu as part of a user/admin dashboard for my web app. I have the following in my dashboard view:

 <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i>            
    {{strtoupper(Auth::user()->name) }} <b class="caret"></b></a>
    <ul class="dropdown-menu">
    ...

This works just fine until I include at the bottom of the corresponding blade layout as such:

    <!-- Global Scripts -->
    <script src="/js/app.js"></script>

    <!-- jQuery -->
    <script src="/admin/js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="/admin/js/bootstrap.min.js"></script>

I am not seeing anything in the console, the dropdown just fails to trigger. It doesn't appear to matter which order I include the app.js.

Does anyone know any reason that the inclusion of app.js would break my dropdowns?

Please sign in or create an account to participate in this conversation.