How to integrate wp_nav_menu and the walker class in bootstrap 3 custom menu

Hi,

I am trying to integrate the wp_nav_menu() and the walker class in the dropdown custom bootstrap 3 menu and I am not sure if I understand the breakdown of how wp_nav_menu works. Here is the original HTMl code of the menu I am trying to integrate into wordpress:

<div class="navbar navbar navbar-static-top" role="navigation">
        <div class="container containerContent">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img src="images/Arcadia-Logo.png"></a>
            </div>

            <div class="navbar-collapse collapse" style="margin-top:16px;">

                <ul class="nav navbar-nav navbar-right">

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Arcadia <i class="fa fa-angle-down nav-arrow"></i></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                        </ul>
                    </li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Technology <i class="fa fa-angle-down nav-arrow"></i></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                        </ul>
                    </li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <i class="fa fa-angle-down nav-arrow"></i></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                        </ul>
                    </li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Resources <i class="fa fa-angle-down nav-arrow"></i></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                        </ul>
                    </li>
                    <li><button class="btn btn-primary btn-small hidden-xs" data-toggle="collapse" data-target="#demo"><i class="fa fa-search"></i></button></li>
                </ul>

                <form class="collapse navbar-form navbar-right visible-xs">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>

            </div><!-- /.navbar-collapse -->

            <div class="row">
                <form id="demo" class="collapse navbar-form navbar-right">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </div>

        </div><!-- /.container-fluid -->
    </div> <!-- end nav section -->

When I add in my header.php in wordpress I understand that I need to start my code somewhat like this:

<div class="navbar navbar navbar-static-top" role="navigation">
		<div class="container containerContent">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#"><img src="images/Arcadia-Logo.png"></a>
			</div> <!-- end navbar-header -->

            <div class="navbar-collapse collapse" style="margin-top:16px;">
                <?php wp_nav_menu(array(
                            'menu'           => 'primary',
                            'theme_location' => 'primary',
                            'menu_class'        => 'nav navbar-nav navbar-right',
                            'items_wrap'     => '<ul id="%1$s" class="%2$s nav navbar-nav navbar-right">%3$s</ul>',
                            'link_after'     => ' <i class="fa fa-angle-down nav-arrow"></i>'

                            'walker'         => new wp_bootstrap_navwalker())

                    ); ?>
                     <form class="collapse navbar-form navbar-right visible-xs">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>

    </div> <!-- end navbar-collapse collapse -->
     <div class="row">
                <form id="demo" class="collapse navbar-form navbar-right">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </div>

    </div> <!-- end container containerContent -->
</div> <!-- end navbar navbar navbar-static-top -->

What I am guessing and is asking if anyone can clarify, is

‘menu_class’ => does that mean the class for the “ul” tag

also how do I breakdown the list items code:

<li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Arcadia <i class="fa fa-angle-down nav-arrow"></i></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                        </ul>
                    </li>

in the wp_nav_menu model as well as the special “li” tag below as the last list item?

<li><button class="btn btn-primary btn-small hidden-xs" data-toggle="collapse" data-target="#demo"><i class="fa fa-search"></i></button></li>

If anyone can direct to the right place or can help me understand how I integrate this into wordpress, that would be great. Thanks.