Nav menu appearing wrong with Bootstrap 4 vs 3.3.7 - twitter-bootstrap-3

Question

I am using the attached CSS and code and the height of my <li> are getting screwed up. It's too short when using bootstrap 4, but it works in 3.3.7. What is the issue when working with 4"?
Does Bootstrap 4 have a good way of doing this? What's the best way to accomplish this?
There is another questions here:
Custom bootstrap 4 breadcrumbs arrow effect
Without an answer.
I have found multiple examples in Bootstrap 3, not but 4. Any examples would be appreciated.
Example 1:
https://bootsnipp.com/snippets/44am
Example 2:
Version 3.3.7
https://jsfiddle.net/vjstg2zc/1/
Version 4
https://jsfiddle.net/cpLd4u5e/
HTML
<ul class="nav nav-pills nav-wizard">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
CSS
.nav-pills.nav-wizard > li {
position: relative;
overflow: visible;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
}
.nav-pills.nav-wizard > li + li {
margin-left: 0;
}
.nav-pills.nav-wizard > li:first-child {
border-left: 0;
}
.nav-pills.nav-wizard > li:first-child a {
border-radius: 5px 0 0 5px;
}
.nav-pills.nav-wizard > li:last-child {
border-right: 0;
}
.nav-pills.nav-wizard > li:last-child a {
border-radius: 0 5px 5px 0;
}
.nav-pills.nav-wizard > li a {
border-radius: 0;
background-color: #eee;
}
.nav-pills.nav-wizard > li:not(:last-child) a:after {
position: absolute;
content: "";
top: 0px;
right: -20px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: transparent transparent transparent #eee;
z-index: 150;
}
.nav-pills.nav-wizard > li:not(:first-child) a:before {
position: absolute;
content: "";
top: 0px;
left: -20px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: #eee #eee #eee transparent;
z-index: 150;
}
.nav-pills.nav-wizard > li:hover:not(:last-child) a:after {
border-color: transparent transparent transparent #aaa;
}
.nav-pills.nav-wizard > li:hover:not(:first-child) a:before {
border-color: #aaa #aaa #aaa transparent;
}
.nav-pills.nav-wizard > li:hover a {
background-color: #aaa;
color: #fff;
}
.nav-pills.nav-wizard > li.active:not(:last-child) a:after {
border-color: transparent transparent transparent #428bca;
}
.nav-pills.nav-wizard > li.active:not(:first-child) a:before {
border-color: #428bca #428bca #428bca transparent;
}
.nav-pills.nav-wizard > li.active a {
background-color: #428bca;
}

Answer 1

From bootstrap3 to bootstrap4, beside its primary CSS unit has been changed from px to rem, the navs component has been completely rewritten using flexbox with simpler structure.
In bootstrap3, it has default style for the navs:
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
In fact, if you add position: relative; and display: block; in your bootstrap4 sample, it kind of worked too: https://jsfiddle.net/davidliang2008/ka83uLq6/4/:
.nav-pills.nav-wizard > li a {
display: block;
padding: 10px 15px;
position: relative;
...
}
In bootstrap4, nav-link class is added for similar purpose, and you don't have to build the navs using list. The reason why you saw in bootstrap4 that the height was not right simply because there is no nested structure like .nav > li > a anymore.
Since you've asked the best way to do it in bootstrap4, let me see if I can craft out what you have in bootstrap4.
https://jsfiddle.net/davidliang2008/5xod17mw/41/
If you're using SASS/SCSS, there is so much more you can clean up in your style as you can define variables for border color, etc, and define mixins as function to set the right border(s) to the right color.
Center it on the page
Since .nav is already displayed as flexbox. You can easily center its item by adding .justify-content-center on the .nav:
<div class="container">
<nav class="nav nav-pills nav-wizard justify-content-center">
...
</nav>
</div>
https://jsfiddle.net/davidliang2008/5xod17mw/51/