Bootstrap 4 navbar not rendering correctly in IE11

Question

I have a bootstrap 4 responsive navbar that I have constructed from a design spec.

It displays correctly in firefox, chrome, microsoft edge, and opera. See image below:

However it renders terribly in IE 11. See image below:

EDIT: I noticed when I removed the navbar div itself, it worked fine in IE11, so there is something wrong when I put it into a navbar with the structure I have in my form....

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script> <div class="container"> <div class="navbar navbar-light navbar-expand-md fixed-top" role="navigation"> <div class="container"> <a class="navbar-brand" href="#">logo here</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#loginNavbar" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse" id="loginNavbar"> <nav class="nav ml-auto login-nav-right"> <form method="post" role="form" class="login-form" action="#"> <div class="row"> <div class="col-lg-5 col-sm-5 px-2"> <input class="form-control mr-sm-2" type="text" placeholder="Email" aria-label="Email" data-val="true" data-val-email="The Email field is not a valid e-mail address." id="Email" name="Email" value=""> </div> <div class="col-lg-5 col-sm-5 px-2"> <input class="form-control mr-sm-2" type="password" placeholder="password" aria-label="password" id="Password" name="Password"> <a href="#" class="btn forgot-pass">Forgot Password</a> </div> <div class="col-lg-2 col-sm-2 px-2"> <button class="btn default-btn align-right" type="submit" value="log in">log in</button> </div> </div> </form> </nav> </div> </div> </div> </div> 

Answer 1

Move your scripts to the bottom of the page right before the body tag.

Change the order of your css links and put the bootstrap after the rest of them, except your own css.

Edit: It could also be a browser update issue. Try opening it in incognito mode, or try clearing your browser history. I've opened the snippet in ie11 my end and it seems to work absolutely fine. Do you have a link to the page?