Bootstrap 4 navbar justify-content-end not working in IE10 - html

Question

I'm having trouble with Bootstrap 4 in IE10; I made a navbar with a phone number/linked-in link on the right using justify-content-end which works perfectly until I checked it in IE10, the website is required to work on IE10 specifically so it is a problem. The code is as follows:
<nav class="navbar navbar-expand-md navbar justify-content-center bigText blueBG">
<!-- Dropdown toggler for small devices -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="fas fa-bars text-white"></span>
</button>
<!-- Links -->
<div class="navbar-collapse collapse w-100 justify-content-center ml-5" id="navbar">
<a class="nav-item nav-link text-white link" href="home">Home</a>
<a class="nav-item nav-link text-white link" href="#">#</a>
<a class="nav-item nav-link text-white link" href="tool">Tool</a>
<a class="nav-item nav-link text-white link" href="contact">Contact</a>
<a class="nav-item nav-link text-white link" id="finalLink" href="documentatie">Documentatie</a>
</div>
<div class="navbar-collapse collapse justify-content-end">
<a href="tel:[phone]">
<i class="fas fa-phone text-white"></i>
</a>
<a href="https://www.linkedin.com/">
<i class="fab fa-linkedin text-white ml-2"></i>
</a>
</div>
The problem is that the navbar just cuts off near the right end of the page, after that it's just the white background and a blue square.

Answer 1

Fixed it! I omitted the w-100 class and changed the justify-content-center to justify-content-end:
<nav class="navbar navbar-expand-md navbar bigText blueBG">
<!-- Dropdown toggler for small devices -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="fas fa-bars text-white"></span>
</button>
<!-- Links -->
<div class="navbar-collapse collapse justify-content-end ml-5" id="navbar">
<a class="nav-item nav-link text-white link" href="home">Home</a>
<a class="nav-item nav-link text-white link" href="#">#</a>
<a class="nav-item nav-link text-white link" href="tool">Tool</a>
<a class="nav-item nav-link text-white link" href="contact">Contact</a>
<a class="nav-item nav-link text-white link" id="finalLink" href="documentatie">Documentatie</a>
</div>
<div class="navbar-collapse collapse justify-content-end">
<a href="tel:[phone]">
<i class="fas fa-phone text-white"></i>
</a>
<a href="https://www.linkedin.com">
<i class="fab fa-linkedin text-white ml-2"></i>
</a>
</div>

Answer 2

Bootstrap 4 only partially supports IE 10/11. Your problem here could be the "justify-content" classes which, according to this Can I Use... isn't supported properly. Try removing them and see if that works for your overflow problem. If not, please inform us of what changed.

Answer 3

I hope this will helpful for you,
/*!
* IE10 viewport hack for Surface/desktop Windows 8 bug
* Copyright 2014-2017 The Bootstrap Authors
* Copyright 2014-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
// See the Getting Started docs for more information:
// https://getbootstrap.com/getting-started/#support-ie10-width
(function () {
'use strict'
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'#-ms-viewport{width:auto!important}'
)
)
document.head.appendChild(msViewportStyle)
}
}())
body {
padding-top: 2rem;
}
.container {
padding-bottom: 1.5rem;
}
.bd-example {
padding: 1.5rem;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
border-width: .2rem;
margin: 1rem -15px;
border: solid #f7f7f9;
}
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Horizontal: Base Nav</h2>
<div class="bd-example">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Horizontal: Justify Content Center</h2>
<div class="bd-example">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Horizontal: Justify Content End</h2>
<div class="bd-example">
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Vertical: Flex Column</h2>
<div class="bd-example">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Base Nav: Tabs</h2>
<div class="bd-example">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Base Nav: Pills</h2>
<div class="bd-example">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Base Nav: Fill and justify</h2>
<div class="bd-example">
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>

Answer 4

Just remove "mr-auto" or "m-auto" from the div just above .
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent" >
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>