Bootstrap dropdown nav pills not working with wp_nav_menu()

I am using Bootstrap nav pills with drop-down items as WordPress menu, the menu without drop-down is looking good but when I add nested ul as drop-down the menu not working as expected..

HTML

<nav class="navbar navbar-default pull-right" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav nav-pills head-menu">
                <li class="current"><a href="https://wordpress.stackexchange.com/questions/199999/index.html">Home</a> </li>
                <li><a href="authors.html">Authors</a></li>
                <li><a href="catalogue.html">Catalogue</a></li>
                <li><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"> Featured <span class="caret"></span> </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="featured-videos.html">Featured Videos</a></li>
                        <li><a href="featured-author.html">Featured Author</a></li>
                    </ul>
                </li>
                <li><a href="media.html">Media</a></li>
                <li><a href="team.html">Team</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

PHP

<nav class="navbar navbar-default pull-right" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <?php wp_nav_menu( array( 'theme_location' => 'main-menu', 'items_wrap' => '<ul class="nav nav-pills head-menu">%3$s</ul>') ); ?>
        </div>
    </div>
</nav>

Everything is good when there is no drop-down items, how to fix this issue?

I ran into similar problem when I created a bootstrap navigation menu and dropdown links were all showing up at once.
I used the following steps to correct the issue:

1. download navwalker from github repo link: https://github.com/wp-bootstrap/wp-bootstrap-navwalker

2. put this file in the root folder of the theme and in the functions.php file
   userequire_once get_template_directory() . '/wp-bootstrap-navwalker.php';

3. finally you’ll have to add following parameters:

   $defaults = array(
     'container' => false,
     'theme_location' => 'primary-menu',
     'menu_class' => 'nav navbar-nav navbar-right',
     'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
     'walker' => new WP_Bootstrap_Navwalker(),
   );
   wp_nav_menu($defaults);
   

especially last two parameters to your wp_nav_menu() function.

I hope it helps