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 class="nav-item">
        <a class="nav-link" href="faq.php">FAQ</a>
    <li class="nav-item">
        <a class="nav-link" href="rules-and-regulations.php">RULES AND REGULATIONS</a>
    <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">REGISTRATION</a>
Let’s start adding menu dynamically on wordpress custom theme. I am calling WP Nav in header.php file like this:
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);

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.


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


.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;