It seems like the issue lies within my customized CSS code.
Indeed, that is correct. I've taken the liberty to modify your custom CSS by commenting out certain parts and integrating native Bootstrap classes instead (refer to the comments in the code below).
Now, everything appears correctly on my IE11 browser.
Lesson learned: Utilize native Bootstrap classes whenever possible and reserve custom CSS for elements that cannot be managed with Bootstrap.
Check out the revised code snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.wizard-step p {
/* margin-top: 10px;*/
/* replaced with `mt-2` */
}
.wizard-step button[disabled] {
color: gray;
}
.wizard-row:before {
/*
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
*/
}
.btn-circle {
width: 30px;
height: 30px;
/* text-align: center;*/
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 16px;
}
.wizard-step {
/* display: table-cell;*/
/* text-align: center;*/
position: relative;
}
.nav-link {
/* margin: auto*/
/* replaced with `mx-auto` */
}
.progress {
background-color: #d3d3d3;
height: 7px;
width: 80%;
margin: 0 auto;
position: relative;
top: 18.5px;
}
.progress-bar {
background-color: orange;
}
</style>
<div id="formWizard" class="wizard mt-4">
<div class="progress">
<div class="progress-bar" role="progressbar"></div>
</div>
<ul class="nav justify-content-center nav-justified">
<li class="nav-item wizard-step">
<a id="tab_start" class="nav-link mx-auto active btn btn-primary btn-circle" href="#tabs-1" data-toggle="tab" role="tab" aria-controls="step1" title="Step 1">1</a>
<p class="d-none d-sm-block mt-2">Start report</p>
</li>
<li class="nav-item wizard-step">
<a id="tab_report" class="nav-link mx-auto disabled btn btn-primary btn-circle" href="#tabs-2" data-toggle="tab" role="tab" aria-controls="step2" title="Step 2">2</a>
<p class="d-none d-sm-block mt-2">Report payroll</p>
</li>
<li class="nav-item wizard-step">
<a id="tab_review" class="nav-link mx-auto disabled btn btn-primary btn-circle" href="#tabs-3" data-toggle="tab" role="tab" aria-controls="step3" title="Step 3">3</a>
<p class="d-none d-sm-block mt-2">Review and submit</p>
</li>
<li class="nav-item wizard-step">
<a id="tab_confirm" class="nav-link mx-auto disabled btn btn-primary btn-circle" href="#tabs-4" data-toggle="tab" role="tab" aria-controls="step4" title="Step 4">4</a>
<p class="d-none d-sm-block mt-2">Print confirmation</p>
</li>
<li class="nav-item wizard-step">
<a id="tab_pay" class="nav-link mx-auto disabled btn btn-primary btn-circle" href="#tabs-5" data-toggle="tab" role="tab" aria-controls="step5" title="Step 5">5</a>
<p class="d-none d-sm-block mt-2">View balance or pay</p>
</li>
</ul>
</div>