How to Integrate Bootstrap v4 NavBar into WordPress theme?

I am using Bootstrap 4 and my menu structure like this:

<ul class="navbar-nav mx-auto justify-content-center">
    <li class="nav-item">
        <a class="nav-link" href="index.php">HOME</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="faq.php">FAQ</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="rules-and-regulations.php">RULES AND REGULATIONS</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">REGISTRATION</a>
    </li>
</ul>
Let’s start adding menu dynamically on wordpress custom theme. I am calling WP Nav in header.php file like this: 
<?php
wp_nav_menu( array(
   'theme_location' => 'primary',
   'depth' => 2,
   'container' => 'ul',
   'menu_class' => 'navbar-nav mx-auto justify-content-center',
   'direct_parent' => true, 
   'sub_menu' => true,
   'show_parent' => true
));
?>
Now, add this function in function.php file. 
function my_walker_nav_menu_start_el($item_output, $item, $depth, $args) {
//    $classes     = implode(' ', $item->classes);
    $classes     = 'nav-link';
    $item_output = preg_replace('/<a /', '<a class="'.$classes.'"', $item_output, 1);
    return $item_output;
 }
add_filter('walker_nav_menu_start_el', 'my_walker_nav_menu_start_el', 10, 4);

Recent post

Archives

How to vertically center a div for all browsers?

Below is the best all-around solution I have found. Tested and working for all browser.

HTML

<div class="outer">
    <div class="middle">
       <div class="inner">
           <h5>The Content Title</h5>
            <p>Content goes here..</p>
        </div>
      </div>
    </div>

CSS

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}
.middle {
    display: table-cell;
    vertical-align: middle;
}
.inner {
    margin-left: auto;
    margin-right: auto; 
    width: 400px;
}