How to make Bootstrap responsive layout work on IE8

Asked 18/12, 2012 at 0:22 Answered 23/4, 2015 at 14:48

Solved twitter-bootstrap internet-explorer-8 responsive-design media-queries fluid-layout

I've been search for a while and found some people got it working, but none of them provide any code samples.

I tried their suggestions but it didn't work for me. By suggestions, I tried adding <meta http-equiv="X-UA-Compatible" content="IE=edge" />, respond.js or css3-mediaqueries-js, but none of them helped.

Here's a jsfiddle, if you view it with IE8, you'll see both a and b are on the same row regardless of your browser width.

But if you view with Chrome, FF or IE9 or above, you'll see them on different rows or single row depending on the browser width.

UPDATE

I tried to uncomment one of them (css3-mediaquery, html5shiv and respond) at a time but got no luck with any one of them.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/css/bootstrap-combined.min.css" rel="stylesheet">
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="span4">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <div class="span8">
                LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.
            </div>
        </div>
    </div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/js/bootstrap.min.js"></script>

    <%--<script type="text/javascript" src="js/css3-mediaqueries.js"></script>--%>
    <%--<script type="text/javascript" src="js/html5shiv.js"></script>--%>
    <%--<script type="text/javascript" src="js/respond.js"></script>--%>

    </script>
</body>

</html>

Guerra answered 18/12, 2012 at 0:22 Comment(5)

Ive always used Html 5 elements and then used html5shiv.js – Servomechanism 18/12, 2012 at 9:30

@Richlewis, Thank you for replying. I added html5shiv.js but still got no luck. Maybe my other code is conflicting? But there is so little code. – Guerra 18/12, 2012 at 16:23

Question is how many people actually are using a smaller width browser with IE6 to IE8. I don't think too many, maybe I'm wrong. – Morass 16/7, 2013 at 19:38

I don't know if you can make that type of assumption. Many corporations are still using XP as their OS. – Novelia 16/7, 2013 at 19:59

@uer2588853 the problem is that if you use the responsive bootstrap, it will be stuck on the mobile layout even for wide screens if you use <= IE8. – Insist 11/12, 2014 at 12:6

IE 8 doesn't support media queries out of the box.

Based on this question and this question, you're going to want to use an extension like css3-mediaqueries-js or Respond.

Sloatman answered 18/12, 2012 at 17:21 Comment(4)

@RayCheng reactivewebdesign.net Uses both respond.js and html5shiv for media queries on IE8. Perhaps take a look at the source and try to adapt it to fit your needs. – Sloatman 18/12, 2012 at 18:46

got it! I have to use both html5shive and respond.js. – Guerra 18/12, 2012 at 20:6

I freaked out after looking at my site in IE8, but adding respond.js immediately fixed everything (I was using html5shive already). Whew! – Prepay 29/8, 2013 at 7:56

Hi, as given , I have tried adding respondjs, meta tag, css3-mediaqueries, html5shiv but nothing seems to work in my case, the container class is not appearing in IE8. Am using bootstrap 3. can you please help? – Prisoner 30/8, 2013 at 10:0

Try using html5shiv, its basically a HTML5 IE enabling script and that should get bootstrap working in IE 6,7 and 8. This can also be directly hot linked like this:

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

It must be included before the <body> element (i.e. in the <head>)

Friedrich answered 25/4, 2013 at 19:7 Comment(2)

I would not recommend hotlinking the source code. If you want to be absolutely sure you've got the right (working) version of the file, just store it on your own server... – Insist 11/12, 2014 at 12:4

I agree with @jaapz, hotlinking to Google Code is no more a good idea as I believe they are shutting down. If at all you have to hotlink, use a public and free CDN like oss.maxcdn.com (oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js) – Friedrich 20/3, 2015 at 8:10

Your issue is trying to use respond.js with CSS stylesheets that are on external domains. Respond.js will fix media queries for IE6-IE8.

https://github.com/scottjehl/Respond#cdnx-domain-setup

Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you'll need to upload a proxy page to enable cross-domain communication.

See cross-domain/example.html for a demo:

Upload cross-domain/respond-proxy.html to your external domain
Upload cross-domain/respond.proxy.gif to your origin domain
Reference the file(s) via <link /> element(s):

<!-- Respond.js proxy on external server -->
<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />

<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />

<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js"></script>

If you are having problems with the cross-domain setup, make sure respond-proxy.html does not have a query string appended to it.

Peterman answered 19/2, 2014 at 4:22 Comment(0)

According to: https://drupal.org/node/2173441

To have your Bootstrap site working on IE8 you have to follow this steps:

Install Respond.js files using Respond.js Module.
Disable any CDN to load Bootstrap files.
Install Bootstrap files locally using Bootstrap Library Module.
Aggregate and compress CSS files in /admin/config/development/performance

Slyke answered 5/2, 2014 at 10:39 Comment(0)

Yes in Internet Explorer 8 or lower width of the class 'container' as 940px. But in Internet Explorer9+, Firefox, Google Chrome, etc., the width of the 'contianer' class is calling as 1170px.

The same issue is also in Zurb Foundation.

If suppose our client requested to don't consider the website to view in IE8<, then we start to implement the bootstrap, or zurb foundation RWD feature

Funda answered 3/6, 2013 at 6:41 Comment(1)

I used .container { width: 100%; }, only for IE lt 8. – Buffet 30/7, 2013 at 11:35

Here's a solution I've been working on that works with the Bones framework. It could be very easily used with bootstrap.

https://github.com/gamsim/ieresponsify

Sulfide answered 27/9, 2013 at 5:42 Comment(0)

The issue with CROSS DOMAIN css loads in IE 8 were resolved as suggested by @Akshay Raje and @Craig London.

Just to add to it, respond.js or respond.min.js must be added before respond.proxy.js for the setup to work.

Middendorf answered 23/5, 2014 at 7:35 Comment(0)

Try or follow this after all stylesheet "link" tag and just before head tag closed(),it means at the end inside the "head" tag.This format is 99% working in all websites. But in some drupal bootstrap theme does not work.

Remember save all in website local folder, Don't use CDN.

 <!--[if lt IE 9]>
 <script type='text/javascript' src="/sites/all/themes/bootstrap_subtheme/js/css3-mediaqueries.js"></script> 
 <script type='text/javascript' src="/sites/all/themes/bootstrap_subtheme/js/html5.js"></script>
 <script type='text/javascript' src="/sites/all/themes/bootstrap_subtheme/js/respond.min.js"></script>
 <![endif]-->

Cruelty answered 27/10, 2014 at 10:53 Comment(0)

Quite often people load CSS with media queries (bootstrap and other files) from a Content Delivery Networks (CDN, like oss.maxcdn.com or cdnjs.cloudflare.com). Respond.js doesn't work with externally loaded CSS, so you have to load your Bootstrap CSS (or other CSS with media queries) from your server.

Wershba answered 23/4, 2015 at 14:48 Comment(0)

-7

yeah it doesn't support IE. i am not anti bootstrap but, I review the css codes of bootstrap framework. and found out that, the other widths are not define as %, i read in other blog article that you should use % for the widths so it will responsive which is true.

and when it comes to ipad, the css code that is using for this by bootstrap is not came from media query, its just a normal css codes that was not declare inside of media queries. and it is fixed width which is you must use for ie7 & 8. (so think about it first if you want to use bootsrap.)

in future(or maybe now) when there is a new gadget that the bootstrap not supported. your client might go back to fix that issue.

we all know that the ie7 & 8 are still existing,so it should have worked on those two old browsers as well.

so if I were you, create your own framework to meet all the requirements of your site/project.

but I am not an anti bootstrap, just a thoughts... because I'm developing sites too..

Ciliolate answered 6/3, 2013 at 6:55 Comment(1)

I'm voting this down because the suggestion is not technically accurate nor is the solution practical. Develop your own framework? Someone almost always has already made the wheel just fine. It's worth spending 20 hours of research now than to have to fix later the same bugs some other solution has already solved. Also: #17524421 Seems to be a solution for this too. I don't add this to be mean or rude, but your answer is just flat out poor advice. – Lepp 24/9, 2013 at 14:31

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags