229

I am creating a site using the new Twitter Bootstrap. The site looks fine and works in all required browsers except IE8.

In IE8 it seems to be displaying elements of the mobile version but stretched across the full screen of my desktop. I believe the problem I'm having is that Twitter bootstrap is mobile first. So for some reason IE8 is going for this option.

I also notice that the container class does not seem to be pulling in the max-width CSS properties as intended. Can anyone see what I've done wrong?

<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="/SiteFiles/js/modernizr.js"></script>

<!-- CSS -->
<link href="/SiteFiles/css/main.css" rel="stylesheet">

<header>
    <div class="topArea clearfix">
        <div class="container">
            <div class="topLinks">
                <div class="btn-group">
                    <span class="flag" data-toggle="dropdown">&nbsp;</span>
                    <ul class="dropdown-menu">
                        <li><a href="#">Country 1</a></li>
                        <li><a href="#">Country 2</a></li>
                        <li><a href="#">Country 3</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Country 4</a></li>
                        <li><a href="#">Country 5</a></li>
                        <li><a href="#">Country 6</a></li>
                    </ul>
                </div>
                <div class="visible-sm btn-group">
                    <div class="plus" data-toggle="dropdown"><i class="icon-plus icon-2x">&nbsp;</i></div>
                    <ul class="dropdown-menu">
                        <li><a href="#">Parts & Service</a></li>
                        <li><a href="#">Store Locator</a></li>
                        <li><a href="#">Find a Service Centre</a></li>
                        <li><a href="#">Parts List</a></li>
                        <li><a href="#">Tool Vibration</a></li>
                        <li><a href="#">Resource Centre</a></li>
                        <li><a href="#">Media Centre</a></li>
                        <li><a href="#">Register your Tools</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                            <button type="button" class="btn btn-default">Where to Buy</button></a></li>
                    </ul>
                </div>
                <div class="topNav">
                    <ul class="hidden-sm">
                        <li>
                            <div class="btn-group">
                                <a href="#" data-toggle="dropdown">Parts & Service</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Store Locator</a></li>
                                    <li><a href="#">Find a Service Centre</a></li>
                                    <li><a href="#">Parts List</a></li>
                                    <li><a href="#">Tool Vibration</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">Resource Centre</a></li>
                        <li><a href="#">Media Centre</a></li>
                        <li><a href="#">Register your Tools</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                            <button type="button" class="btn btn-default">Where to Buy</button></a></li>
                    </ul>
                </div>
                <div class="searchArea">
                    <input type="text" />
                    <a href="#" class="goBtn">GO</a>
                </div>
            </div>
        </div>
    </div>
    <div class="mainNavArea">
        <div class="container rel">

            <div class="logo">
                <img src="/SiteFiles/img/logo.png" title="Milwaukee - Nothing but heavy duty" alt="Milwaukee - Nothing but heavy duty" />
            </div>
            <div class="navi">
                <div class="navbar">
                    <div class="container">

                        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                        <!-- Place everything within .navbar-collapse to hide it until above 768px -->
                        <div class="nav-collapse collapse navbar-responsive-collapse">
                            <ul class="nav nav-justified">
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Power Tools</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Power Tools</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Hand Tools</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Hand Tools</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Test & Measurement</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Test & Measurement</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Accessories</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Accessories</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- /.nav-collapse -->
                    </div>
                    <!-- /.container -->
                </div>
                <!-- /.navbar -->
            </div>

        </div>
    </div>
</header>
0

22 Answers 22

260

You got your CSS from CDN (bootstrapcdn.com) respond.js only works for local files. So try your website on IE8 with a local copy of bootstrap.css. Or read: CDN/X-Domain Setup

Note See also: https://github.com/scottjehl/Respond/pull/206

Update:

Please read: http://getbootstrap.com/getting-started/#support

In addition, Internet Explorer 8 requires the use of respond.js to enable media query support.

See also: https://github.com/scottjehl/Respond

For this reason the basic template contains these lines in the head section:

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->
9
  • Please forgive me if I'm being obtuse...but respond.js ?? Aug 2, 2013 at 11:18
  • 6
    Apologies, I always seem to find the appropriate solution after posting ridiculous questions...check out getbootstrap.com/getting-started (specifically under the "Internet Explorer 8 and 9" section). :) Aug 2, 2013 at 11:21
  • 1
    Which files should be existed locally, which ones can be used from CDN ? bootsrap.css, bootstrap.js, respond.js, html5shiv.js files ?
    – trante
    Sep 27, 2013 at 6:09
  • 3
    a local respond.js only works with local copy of bootstrap (same domain), see here github.com/scottjehl/Respond#cdnx-domain-setup Sep 27, 2013 at 6:16
  • 6
    Also note that Respond.js needs to be defined after the css file which contains the media queries. Otherwise, they will not be processed in IE8
    – helios456
    Apr 9, 2014 at 12:03
62

I also had to set the following META tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
1
  • I am using: <div class="left-finger-picker img-responsive"> to show an image where: left-finger-picker is as follows: .left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; } however, it is not responsive in IE8 Dec 4, 2016 at 12:46
17

I had this same issue when transitioning from Bootstrap 2 to 3. I'd already got respond.js and html5shiv.js and set my meta to edge. I'd missed that from 2 to 3 the navbar element type had changed. In Bootstrap 2 it was nav. In Bootstrap 3 it's now header. So to fully resolve the problem I had to

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Put this right after I'd loaded my css:

<!--[if lt IE 9]>  
    <script src="~/Content/compatibility/html5shiv.js"></script>
    <script src="~/Content/compatibility/respond.min.js"></script>
<![endif]-->

and then change

<nav class="navbar" role="navigation">
</nav>

to

<header class="navbar" role="navigation">
</header>

Oh and for good measure I also added

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

simply because that's what the Bootstrap site itself has.

1
  • I am using: <div class="left-finger-picker img-responsive"> to show an image where: left-finger-picker is as follows: .left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; } however, it is not responsive in IE8 Dec 4, 2016 at 12:45
14

In my case, the bootstrap minified CSS was causing the issue. To make bootstrap 3.0.2 responsive in IE8 (emulated using the F12 Developer Tools) I had to:

1 - Set the X-UA-Compatible flag.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

2 - Use the non-minified bootstrap.css, instead of bootstrap.min.css

<link href="/css/bootstrap.css" rel="stylesheet" />

3 - Add the respond.js (and html5shiv.js)

<!--[if lt IE 9]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/respond.min.js"></script>
<![endif]-->
2
  • In my case also, the bootstrap minified CSS was causing the issue in IE8.
    – hrvoj3e
    Apr 28, 2014 at 10:08
  • I am using: <div class="left-finger-picker img-responsive"> to show an image where: left-finger-picker is as follows: .left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; } however, it is not responsive in IE8 Dec 4, 2016 at 12:47
6

put respond.js at bottom of page but before closing body tag and here is link of respond.js and run this code in your localhost.

https://github.com/scottjehl/Respond

2
  • Thanks for this, forgot to mention though, this is already included in my plugins.js file.
    – wrayvon
    Jul 30, 2013 at 12:41
  • Important thing is that respond.js should be loaded after the stylesheets.
    – piotr_cz
    Jul 7, 2015 at 16:29
6

Just in case. Make sure you load the IE specific js files after you load your css files.

0
5

Don't forget to place your css links in the <head> as respond.js takes only those.

0
5

As previously stated there are two different problems: 1) IE8 doesn't support media queries 2) respond.js used in conjunction with cross-domain css files must be included as described before.

If you want to use BootstrapCDN here's a working example:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
    <link href="//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
    <link href="img/ie/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/respond.proxy.js"></script>
<![endif]-->

Also make sure to copy respond.proxy.gif, respond.min.js and response.proxy.js in local directories

0
4

After verifying:

  • DOCTYPE
  • X-UA-Compatible meta tag
  • Inclusion of html5shiv.js and respond.js (and downloading the latest versions)
  • respond.js being local
  • Hosting site from a web server and not from File://
  • Not using @import
  • ...

Still col-lg, col-md, and col-sm were not working. Finally I moved the references to bootstrap to be before the references to html5shiv.js and respond.js and it all worked.

Here is a snippet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Bootstrap Test for IE8</title>

    <!-- Moved these two lines up --> 
    <link href="includes/css/bootstrap.css" type="text/css" rel="stylesheet" />
    <script src="includes/js/bootstrap.js"></script>

    <!--[if lt IE 9]>
      <script src="includes/js/html5shiv.js"></script>
      <script src="includes/js/respond.min.js"></script>
    <![endif]-->    
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4" style="background-color:red;">col-md-4</div>
            <div class="col-md-8" style="background-color:green;">col-md-8</div>
        </div>
    </div>
</body>
</html>
2
  • 2
    Moving bootstrap.min.css as advised here was necessary to resolve my issue. I only moved the .css file, the .js still file still loads afterward. May 17, 2014 at 16:52
  • Moving my compiled CSS file (including Bootstrap) above html5shim and respond was the solution for me - thanks Jan 13, 2015 at 9:26
2

From the explanation it says that IE8 is the standard version for you and making content="IE=edge" will render the page in the highest mode. To make it compatible change it to content="IE=8".

IE8 mode supports many established standards, including the W3C Cascading Style Sheets Level 2.1 Specification and the W3C Selectors API; it also provides limited support for the W3C Cascading Style Sheets Level 3 Specification (Working Draft) and other emerging standards.

Edge mode tells Internet Explorer to display content in the highest mode available. With Internet Explorer 9, this is equivalent to IE9 mode. If a future release of Internet Explorer supported a higher compatibility mode, pages set to edge mode would appear in the highest mode supported by that version. Those same pages would still appear in IE9 mode when viewed with Internet Explorer 9.

Reference What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?

1

Needed to add - <meta http-equiv="X-UA-Compatible" content="IE=edge">

I was using Bootstrap 3 - had it working on IE on my local.

I put it live didn't work in IE.

Just Bootstrap doesn't include that line of code in their templates, I'm not sure why but it might be due to it not being W3C compatible.

1

I have a fix for this issue. Actually IE7 and 8 doesnt support the @media properly and if you check the css for “col-md-*” classes and there width is given in media width 992px. Just create a new css file IE eg: IE.css and add in the conditional comments. And then just copy the classes required for your design directly with any media queries there and you are done.

0

I had exactly the same problem when migrating from bootstrapv2 to v3.

If (like me) you migrated by replacing the old spanX with col-sm-X you also need to add col-X classes. col-X are the styles that are outside of any @media blocks so they work without media query support.

To fix the container width you can set it yourself outside of a @media block. Something like:

.container {
  max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";
2
  • Ok, so found out that doesn't 100% solve the problem since the col-X classes are then used for mobile devices. Back to the drawing board... Jul 30, 2013 at 19:28
  • col-X classes will never stack, so you solution will have problems on small devices. You solution also don't fix problems with the @grid-float-breakpoint which also depends on media queries so b.e. your navbar won't become horizontal. See also: stackoverflow.com/a/17920693/1596547 Jul 30, 2013 at 21:22
0

I've suffer the same problem in IE 10.0. I know this is not exactly the problem in the OP, but maybe it will be usefull for others.

In my case, I had an empty line at the beginning of the document:

[blank line]
<!DOCTYPE html>
<html lang="es">
...

If the blank line is between the DOCTYPE and the tag, the problem is also shown:

<!DOCTYPE html>
[blank line]
<html lang="es">

Once I've removed the blank line, and without the magic X-UA-Compatible meta, IE 10 has started to render the site correctly.

If you are using PHP and Smarty be careful with your Smarty comments because they will add those problematic blank lines :-)

0
0

my head tag is like this:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap core CSS -->
    <link href="css/modern-business.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modern-business.js"></script>
     <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.js"></script>
    <![endif]-->  
</head>

if you want to try in local...try through localhost, or create a QA server and set the content and try.

We need respond.js for bootstrap 3 and it wont work in local machine if we just put it in js and append it to html in header. It will say access denied. it works only through server as IE has security restriction. :P

0

I've read every comment here, tried everything.. but couldn't get it to work with Windows 7 - Internet Explorer 11 (with document mode: IE8).

Then it came to mind that running a document mode (IE8) isn't the same as the real IE8, so I installed Windows Virtual PC (Windows 7 with Internet Explorer 8) and tadaaaa... it works like a charm!

I've put this piece of code JUST at the bottom of the page to make it work:

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</body>
</html>
1
0

Just as a heads up. I had the same problem and none of the above fixed it for me. Eventually I found out that respond.js doesn't parse CSS referenced via @import. I had the whole bootstrap.min.css imported via @import into my main.css.

So make sure you don't have any CSS that contains your media queries referenced via @import.

0

I have resolved below steps.

(1) installed Respond.js module for drupal 7. (2) lessphp module for drupal 7 set in libraries, instead of module folder. (3) (3.1)<meta http-equiv="X-UA-Compatible" content="IE=edge">

(3.2)

<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
<![endif]-->  

using cdn bootstrap from theme setting.

To learn more, review my website blog for drupal design and development www.devangsolanki.com

1
  • 1
    How are steps 1 and 2 even related to the question? The issue is with IE8 and bootstrap. Drupal isn't even mentioned in the question. Mar 28, 2014 at 4:46
0

If you use Bootstrap 3 and everything works fine on other browsers except IE, try the below.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
4
  • Hi Phill Healy, the solution that I posted worked for me. Your comment is not constructive. You have to provide more details if you want help
    – vutbao
    May 14, 2014 at 20:04
  • 1
    @vutbao bootstrap works on versions >IE8. If you want it to work in IE8 you need to addin respondjs BUT repondjs WILL NOT WORK if you are using bootstrap CDN. take time to read Bass Jobsen's answer.
    – Wreeecks
    May 15, 2014 at 4:47
  • @Vutbao, to say that your answer is THE definitive answer to all Bootstrap 3 issues of this nature is not correct. Yet, that is what your answer says. As bwaaaaaa indicates there are many issues to consider. Another issue for example might be the document is in quirks mode, etc. May 16, 2014 at 12:20
  • Point taken. I will be more careful with the wording. Thanks
    – vutbao
    May 21, 2014 at 16:49
0

Use this solution

<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />
<![endif]-->

This string <script src="js/css3-mediaqueries.js"></script> enable mediaqueries. This string <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" /> enable bootstrap fonts.

Tested on Bootstrap 3.3.5

Link to download mediaqieries.js. Link to download bootstrap-ie7.css

0
0

Make sure you link the bootstrap source separately

If you use LESS or SASS don't be to greedy with compiling the styles. In my project I included bootstrap.min.css in my main style, on the top of the file - so there should be only one request for all styles.

And because of that, the boostrap classes did not work properly. When added separately, works as expected.

0

I faced the same problem, tried the first answer but something was missing.

If you guys are using Webpack, your css will be loaded as a style tag which is not supported by respond.js, it needs a file, so make sure bootstrap is loaded as a css file

Personally I used extract-text-webpack-plugin

const webpack = require("webpack")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require("path")

module.exports = {
    context: __dirname+"/src",
    entry: "./index.js",
    output: {
        filename: "./dist/bundle.js",
        path: __dirname
    },
    plugins: [
        ...,
        new ExtractTextPlugin("./dist/bootstrap.css", {
            allChunks: true
        })
    ],
    module: {
        loaders: [
            ...,
            // your css loader excluding bootstrap
            {
                test: /\.css$/,
                loader: "style!css",
                exclude: [
                    path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
                ]
            },

            {
                // loads bootstrap as a file, change path accordingly if needs be, path needs to be absolute
                include: [
                    path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
                ],
                loader: ExtractTextPlugin.extract("style-loader", "css-loader?minimize")
            }
        ]
    }
}

Hope it will help you

Not the answer you're looking for? Browse other questions tagged or ask your own question.