How to make Bootstrap responsive layout work on IE8

Question

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>

@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. — Ray Cheng, Dec 18 '12 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. — , Jul 16 '13 at 19:38
I don't know if you can make that type of assumption. Many corporations are still using XP as their OS. — gunr2171, Jul 16 '13 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. — jaapz, Dec 11 '14 at 12:06

score 31 · Accepted Answer · edited May 23 '17 at 12:09

31

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.

edited May 23 '17 at 12:09

Community

1
1

answered Dec 18 '12 at 17:21

Jason Towne

8,014
5
54
69

1

@RayCheng http://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. – Jason Towne Dec 18 '12 at 18:46
16

got it! I have to use both `html5shive` and `respond.js`. – Ray Cheng Dec 18 '12 at 20:06
I freaked out after looking at my site in IE8, but adding respond.js immediately fixed everything (I was using html5shive already). Whew! – Gavin Aug 29 '13 at 07:56
3

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? – whyAto8 Aug 30 '13 at 10:00

score 10 · Answer 2 · answered Apr 25 '13 at 19:07

10

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>)

answered Apr 25 '13 at 19:07

Akshay Raje

852
9
20

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... – jaapz Dec 11 '14 at 12:04
1

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 (https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js) – Akshay Raje Mar 20 '15 at 08:10

score 8 · Answer 3 · answered Feb 19 '14 at 04:22

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.

score 4 · Answer 4 · answered Feb 05 '14 at 10:39

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

score 2 · Answer 5 · answered Jun 03 '13 at 06:41

2

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

answered Jun 03 '13 at 06:41

Selva

21
1

I used `.container { width: 100%; }`, only for IE lt 8. – Kishore Relangi Jul 30 '13 at 11:35

score 2 · Answer 6 · answered Sep 27 '13 at 05:42

2

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

answered Sep 27 '13 at 05:42

Simon Gamble

107
1
2

score 1 · Answer 7 · answered May 23 '14 at 07:35

1

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.

answered May 23 '14 at 07:35

Prasoon Srivastava

332
4
12

Ankur Saini · Answer 8 · 2014-10-27T11:03:44.310

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]-->

score 1 · Answer 9 · answered Apr 23 '15 at 14:48

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.

score -7 · Answer 10 · edited Jan 15 '14 at 11:00

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..

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: http://stackoverflow.com/questions/17523921/respond-js-with-twitter-bootstrap-on-ie8-and-below 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. — jason, Sep 24 '13 at 14:31

How to make Bootstrap responsive layout work on IE8

10 Answers10

Linked