If you just noticed that on some IE versions your Navbar is collapsed like a mobile version even though you are viewing from a desktop browser, then you might be using CDN version of bootstrap.min.css
Possible Fix #1 (CDN Issue):
To fix the issue, you need to download bootstrap.min.css and place it in a subdirectory of your application, something like below:
/css/bootstrap/3.2.0/bootstrap.min.css
Related change in code:
If you are using bootstrap.min.css from a CDN like given below,
then, replace the above code with a local version of bootstrap.min.css like given below:
Keeping bootstrap.min.css within the application rather than on the CDN should solve the Internet Explorer issue.
Check the source of this Bootstrap Navbar example page for reference.
NOTE: If you are using bootstrap.css instead of bootstrap.min.css the same solution is still applicable.
Possible Fix #2 (Locally run html file):
I've noticed that the IE8 issue still occurs if html file is stored locally and run from local IE8.
For example: D:\bootstrap-example.html
Instead, run the html through a web server like below:
http://example.com/bootstrap-example.html
or
http://localhost:8080/bootstrap-example.html
If you still have problems, please leave a comment below, I'll try to help you.
Possible Fix #1 (CDN Issue):
To fix the issue, you need to download bootstrap.min.css and place it in a subdirectory of your application, something like below:
/css/bootstrap/3.2.0/bootstrap.min.css
Related change in code:
If you are using bootstrap.min.css from a CDN like given below,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
then, replace the above code with a local version of bootstrap.min.css like given below:
<link rel="stylesheet" href="./css/bootstrap/3.2.0/bootstrap.min.css">
Keeping bootstrap.min.css within the application rather than on the CDN should solve the Internet Explorer issue.
Check the source of this Bootstrap Navbar example page for reference.
NOTE: If you are using bootstrap.css instead of bootstrap.min.css the same solution is still applicable.
Possible Fix #2 (Locally run html file):
I've noticed that the IE8 issue still occurs if html file is stored locally and run from local IE8.
For example: D:\bootstrap-example.html
Instead, run the html through a web server like below:
http://example.com/bootstrap-example.html
or
http://localhost:8080/bootstrap-example.html
If you still have problems, please leave a comment below, I'll try to help you.
I've tried your instruction, it's still on working. Is there any other posible cause?
ReplyDeleteIf I can see how you have implemented it, I might be able to help you.
Deletehi, I also tried your suggestions and it doesnt work..
ReplyDeleteI do not use CDN versions of Bootstrap.js, Bootstrap.css or jquery.js.
and all my files are stored on the server.
This comment has been removed by the author.
ReplyDeleteIt's not the problem. Your article is misleading people
ReplyDeleteLike the guy above this comment, the problem is not resolved with bootstrap iteself. The bug occurs because bootstrap was not designed to have compatibility with IE8. There are many JS libraries that gives some of this compatibility with older IE versions (respond.js, Shive, modernizr). Adding a reference to this libraries (next to all .css files) solves the problem.
ReplyDeleteSorry for my english guys :)
This comment has been removed by the author.
ReplyDeleteThis article only tells half the story. The JS libraries mentioned by the comment above are typically included in the head section. The Problem is that if you use respond.js , it won't work properly unless your hosting the bootstrap.css files locally rather than from a CDN version.
ReplyDeleteThanks this sol saved me
ReplyDelete