Bootstrap dropdown not working with Laravel on mobile

I have created a dropdown in the navbar. Here's the code for the dropdown:

<ul class="nav navbar-nav navbar-right">
    @if(Auth::check())
        @include('layouts.loggedin')
    @else
        @include('layouts.loggedout')
    @endif
 </ul>

When the user is logged in, it loads loggedin.blade.php and that's where the problem occurs.

loggedin.blade.php

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Welcome, 
    <span class="caret"></span>
</a>
<ul class="dropdown-menu">
    <li><a href="/home">Dashboard</a></li>
    <li><a href="/">Profile</a></li>
    <li><a href="/logout">Logout</a></li>
</ul>

Whenever I click on Welcome, username, the navbar-toggle menu closes and the dropdown items are never displayed. But if I inspect element the page, edit the HTML code and paste this same code of loggedin.blade.php, the dropdown works. I think there is a conflict with JS but I have tried my best and nothing seems to work.

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2v3unJW
via IFTTT