You look at the documentation and find that you have two choices:
- Host the bootstrap CSS on your own server.
- Use a proxy, to make respond.js work cross-domain.
Some people have found alternatives to respond.js but these are regarded as slower and still need to be hosted and served.
If you are using the MaxCDN option, you do not have access to the CDN in order to upload your proxy. In short, the whole lot is rather self-defeating. You want the CDN and you want IE8 to work.
Step back a little ... respond.js attempts to reload the bootstrap CSS via AJAX, when all that is not working is the @media query in IE8. The simple solution is to serve a cut-down version of the CSS, with only the @media queries, to IE8 and below, from a local source. This is slightly inefficient because it is serving the same CSS twice but it is more efficient because it is only re-serving approx 15% of the payload. You get the best of all worlds.
Does this work? Yes, test it out here.
How do you apply it?
Code: Select all
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<link href="bootstrap4ie8.css" rel="stylesheet">
<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
You can make your own bootstrap4ie8.css by stripping down your version of boostrap.css. You can probably optimize it further by removing parts you do not use. If you are in a hurry or just want to test this out, here is the full minimized version for boostrap 3.2.0:
Code: Select all
@media (min-width:768px) {.lead {font-size:21px;}.dl-horizontal dt {float:left;width:160px;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap;}.dl-horizontal dd {margin-left:180px;}.container {width:750px;}.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {float:left;}.col-sm-12 {width:100%;}.col-sm-11 {width:91.66666667%;}.col-sm-10 {width:83.33333333%;}.col-sm-9 {width:75%;}.col-sm-8 {width:66.66666667%;}.col-sm-7 {width:58.33333333%;}.col-sm-6 {width:50%;}.col-sm-5 {width:41.66666667%;}.col-sm-4 {width:33.33333333%;}.col-sm-3 {width:25%;}.col-sm-2 {width:16.66666667%;}.col-sm-1 {width:8.33333333%;}.col-sm-pull-12 {right:100%;}.col-sm-pull-11 {right:91.66666667%;}.col-sm-pull-10 {right:83.33333333%;}.col-sm-pull-9 {right:75%;}.col-sm-pull-8 {right:66.66666667%;}.col-sm-pull-7 {right:58.33333333%;}.col-sm-pull-6 {right:50%;}.col-sm-pull-5 {right:41.66666667%;}.col-sm-pull-4 {right:33.33333333%;}.col-sm-pull-3 {right:25%;}.col-sm-pull-2 {right:16.66666667%;}.col-sm-pull-1 {right:8.33333333%;}.col-sm-pull-0 {right:0;}.col-sm-push-12 {left:100%;}.col-sm-push-11 {left:91.66666667%;}.col-sm-push-10 {left:83.33333333%;}.col-sm-push-9 {left:75%;}.col-sm-push-8 {left:66.66666667%;}.col-sm-push-7 {left:58.33333333%;}.col-sm-push-6 {left:50%;}.col-sm-push-5 {left:41.66666667%;}.col-sm-push-4 {left:33.33333333%;}.col-sm-push-3 {left:25%;}.col-sm-push-2 {left:16.66666667%;}.col-sm-push-1 {left:8.33333333%;}.col-sm-push-0 {left:0;}.col-sm-offset-12 {margin-left:100%;}.col-sm-offset-11 {margin-left:91.66666667%;}.col-sm-offset-10 {margin-left:83.33333333%;}.col-sm-offset-9 {margin-left:75%;}.col-sm-offset-8 {margin-left:66.66666667%;}.col-sm-offset-7 {margin-left:58.33333333%;}.col-sm-offset-6 {margin-left:50%;}.col-sm-offset-5 {margin-left:41.66666667%;}.col-sm-offset-4 {margin-left:33.33333333%;}.col-sm-offset-3 {margin-left:25%;}.col-sm-offset-2 {margin-left:16.66666667%;}.col-sm-offset-1 {margin-left:8.33333333%;}.col-sm-offset-0 {margin-left:0;}.form-inline .form-group {display:inline-block;margin-bottom:0;vertical-align:middle;}.form-inline .form-control {display:inline-block;width:auto;vertical-align:middle;}.form-inline .input-group > .form-control {width:100%;}.form-inline .control-label {margin-bottom:0;vertical-align:middle;}.form-inline .radio, .form-inline .checkbox {display:inline-block;padding-left:0;margin-top:0;margin-bottom:0;vertical-align:middle;}.form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] {float:none;margin-left:0;}.form-inline .has-feedback .form-control-feedback {top:0;}.form-horizontal .control-label {text-align:right;}.navbar-right .dropdown-menu {right:0;left:auto;}.navbar-right .dropdown-menu-left {right:auto;left:0;}.nav-tabs.nav-justified > li {display:table-cell;width:1%;}.nav-tabs.nav-justified > li > a {margin-bottom:0;}.nav-tabs.nav-justified > li > a {border-bottom:1px solid #ddd;border-radius:4px 4px 0 0;}.nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus {border-bottom-color:#fff;}.nav-justified > li {display:table-cell;width:1%;}.nav-justified > li > a {margin-bottom:0;}.nav-tabs-justified > li > a {border-bottom:1px solid #ddd;border-radius:4px 4px 0 0;}.nav-tabs-justified > .active > a, .nav-tabs-justified > .active > a:hover, .nav-tabs-justified > .active > a:focus {border-bottom-color:#fff;}.navbar {border-radius:4px;}.navbar-header {float:left;}.navbar-collapse {width:auto;border-top:0;box-shadow:none;}.navbar-collapse.collapse {display:block !important;height:auto !important;padding-bottom:0;overflow:visible !important;}.navbar-collapse.in {overflow-y:visible;}.navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {padding-right:0;padding-left:0;}.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {margin-right:0;margin-left:0;}.navbar-static-top {border-radius:0;}.navbar-fixed-top, .navbar-fixed-bottom {border-radius:0;}.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {margin-left:-15px;}.navbar-toggle {display:none;}.navbar-nav {float:left;margin:0;}.navbar-nav > li {float:left;}.navbar-nav > li > a {padding-top:15px;padding-bottom:15px;}.navbar-nav.navbar-right:last-child {margin-right:-15px;}.navbar-left {float:left !important;}.navbar-right {float:right !important;}.navbar-form .form-group {display:inline-block;margin-bottom:0;vertical-align:middle;}.navbar-form .form-control {display:inline-block;width:auto;vertical-align:middle;}.navbar-form .input-group > .form-control {width:100%;}.navbar-form .control-label {margin-bottom:0;vertical-align:middle;}.navbar-form .radio, .navbar-form .checkbox {display:inline-block;padding-left:0;margin-top:0;margin-bottom:0;vertical-align:middle;}.navbar-form .radio input[type="radio"], .navbar-form .checkbox input[type="checkbox"] {float:none;margin-left:0;}.navbar-form .has-feedback .form-control-feedback {top:0;}.navbar-form {width:auto;padding-top:0;padding-bottom:0;margin-right:0;margin-left:0;border:0;-webkit-box-shadow:none; box-shadow:none;}.navbar-form.navbar-right:last-child {margin-right:-15px;}.navbar-text {float:left;margin-right:15px;margin-left:15px;}.navbar-text.navbar-right:last-child {margin-right:0;}.modal-dialog {width:600px;margin:30px auto;}.modal-content {-webkit-box-shadow:0 5px 15px rgba(0, 0, 0, .5); box-shadow:0 5px 15px rgba(0, 0, 0, .5);}.modal-sm {width:300px;}.container {width:970px;}.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {float:left;}.col-md-12 {width:100%;}.col-md-11 {width:91.66666667%;}.col-md-10 {width:83.33333333%;}.col-md-9 {width:75%;}.col-md-8 {width:66.66666667%;}.col-md-7 {width:58.33333333%;}.col-md-6 {width:50%;}.col-md-5 {width:41.66666667%;}.col-md-4 {width:33.33333333%;}.col-md-3 {width:25%;}.col-md-2 {width:16.66666667%;}.col-md-1 {width:8.33333333%;}.col-md-pull-12 {right:100%;}.col-md-pull-11 {right:91.66666667%;}.col-md-pull-10 {right:83.33333333%;}.col-md-pull-9 {right:75%;}.col-md-pull-8 {right:66.66666667%;}.col-md-pull-7 {right:58.33333333%;}.col-md-pull-6 {right:50%;}.col-md-pull-5 {right:41.66666667%;}.col-md-pull-4 {right:33.33333333%;}.col-md-pull-3 {right:25%;}.col-md-pull-2 {right:16.66666667%;}.col-md-pull-1 {right:8.33333333%;}.col-md-pull-0 {right:0;}.col-md-push-12 {left:100%;}.col-md-push-11 {left:91.66666667%;}.col-md-push-10 {left:83.33333333%;}.col-md-push-9 {left:75%;}.col-md-push-8 {left:66.66666667%;}.col-md-push-7 {left:58.33333333%;}.col-md-push-6 {left:50%;}.col-md-push-5 {left:41.66666667%;}.col-md-push-4 {left:33.33333333%;}.col-md-push-3 {left:25%;}.col-md-push-2 {left:16.66666667%;}.col-md-push-1 {left:8.33333333%;}.col-md-push-0 {left:0;}.col-md-offset-12 {margin-left:100%;}.col-md-offset-11 {margin-left:91.66666667%;}.col-md-offset-10 {margin-left:83.33333333%;}.col-md-offset-9 {margin-left:75%;}.col-md-offset-8 {margin-left:66.66666667%;}.col-md-offset-7 {margin-left:58.33333333%;}.col-md-offset-6 {margin-left:50%;}.col-md-offset-5 {margin-left:41.66666667%;}.col-md-offset-4 {margin-left:33.33333333%;}.col-md-offset-3 {margin-left:25%;}.col-md-offset-2 {margin-left:16.66666667%;}.col-md-offset-1 {margin-left:8.33333333%;}.col-md-offset-0 {margin-left:0;}}@media (min-width:1200px) {.container {width:1170px;}.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {float:left;}.col-lg-12 {width:100%;}.col-lg-11 {width:91.66666667%;}.col-lg-10 {width:83.33333333%;}.col-lg-9 {width:75%;}.col-lg-8 {width:66.66666667%;}.col-lg-7 {width:58.33333333%;}.col-lg-6 {width:50%;}.col-lg-5 {width:41.66666667%;}.col-lg-4 {width:33.33333333%;}.col-lg-3 {width:25%;}.col-lg-2 {width:16.66666667%;}.col-lg-1 {width:8.33333333%;}.col-lg-pull-12 {right:100%;}.col-lg-pull-11 {right:91.66666667%;}.col-lg-pull-10 {right:83.33333333%;}.col-lg-pull-9 {right:75%;}.col-lg-pull-8 {right:66.66666667%;}.col-lg-pull-7 {right:58.33333333%;}.col-lg-pull-6 {right:50%;}.col-lg-pull-5 {right:41.66666667%;}.col-lg-pull-4 {right:33.33333333%;}.col-lg-pull-3 {right:25%;}.col-lg-pull-2 {right:16.66666667%;}.col-lg-pull-1 {right:8.33333333%;}.col-lg-pull-0 {right:0;}.col-lg-push-12 {left:100%;}.col-lg-push-11 {left:91.66666667%;}.col-lg-push-10 {left:83.33333333%;}.col-lg-push-9 {left:75%;}.col-lg-push-8 {left:66.66666667%;}.col-lg-push-7 {left:58.33333333%;}.col-lg-push-6 {left:50%;}.col-lg-push-5 {left:41.66666667%;}.col-lg-push-4 {left:33.33333333%;}.col-lg-push-3 {left:25%;}.col-lg-push-2 {left:16.66666667%;}.col-lg-push-1 {left:8.33333333%;}.col-lg-push-0 {left:0;}.col-lg-offset-12 {margin-left:100%;}.col-lg-offset-11 {margin-left:91.66666667%;}.col-lg-offset-10 {margin-left:83.33333333%;}.col-lg-offset-9 {margin-left:75%;}.col-lg-offset-8 {margin-left:66.66666667%;}.col-lg-offset-7 {margin-left:58.33333333%;}.col-lg-offset-6 {margin-left:50%;}.col-lg-offset-5 {margin-left:41.66666667%;}.col-lg-offset-4 {margin-left:33.33333333%;}.col-lg-offset-3 {margin-left:25%;}.col-lg-offset-2 {margin-left:16.66666667%;}.col-lg-offset-1 {margin-left:8.33333333%;}.col-lg-offset-0 {margin-left:0;}.visible-lg {display:block !important;}table.visible-lg {display:table;}tr.visible-lg {display:table-row !important;}th.visible-lg, td.visible-lg {display:table-cell !important;}.hidden-lg {display:none !important;}}@media (max-width:767px) {.table-responsive {width:100%;margin-bottom:15px;overflow-x:scroll;overflow-y:hidden;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ddd;}.table-responsive > .table {margin-bottom:0;}.table-responsive > .table > thead > tr > th, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tfoot > tr > td {white-space:nowrap;}.table-responsive > .table-bordered {border:0;}.table-responsive > .table-bordered > thead > tr > th:first-child, .table-responsive > .table-bordered > tbody > tr > th:first-child, .table-responsive > .table-bordered > tfoot > tr > th:first-child, .table-responsive > .table-bordered > thead > tr > td:first-child, .table-responsive > .table-bordered > tbody > tr > td:first-child, .table-responsive > .table-bordered > tfoot > tr > td:first-child {border-left:0;}.table-responsive > .table-bordered > thead > tr > th:last-child, .table-responsive > .table-bordered > tbody > tr > th:last-child, .table-responsive > .table-bordered > tfoot > tr > th:last-child, .table-responsive > .table-bordered > thead > tr > td:last-child, .table-responsive > .table-bordered > tbody > tr > td:last-child, .table-responsive > .table-bordered > tfoot > tr > td:last-child {border-right:0;}.table-responsive > .table-bordered > tbody > tr:last-child > th, .table-responsive > .table-bordered > tfoot > tr:last-child > th, .table-responsive > .table-bordered > tbody > tr:last-child > td, .table-responsive > .table-bordered > tfoot > tr:last-child > td {border-bottom:0;}.navbar-nav .open .dropdown-menu {position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;box-shadow:none;}.navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header {padding:5px 15px 5px 25px;}.navbar-nav .open .dropdown-menu > li > a {line-height:20px;}.navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus {background-image:none;}.navbar-form .form-group {margin-bottom:5px;}.navbar-default .navbar-nav .open .dropdown-menu > li > a {color:#777;}.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {color:#333;background-color:transparent;}.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {color:#555;background-color:#e7e7e7;}.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {color:#ccc;background-color:transparent;}.navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {border-color:#080808;}.navbar-inverse .navbar-nav .open .dropdown-menu .divider {background-color:#080808;}.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {color:#999;}.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {color:#fff;background-color:transparent;}.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {color:#fff;background-color:#080808;}.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {color:#444;background-color:transparent;}.visible-xs {display:block !important;}table.visible-xs {display:table;}tr.visible-xs {display:table-row !important;}th.visible-xs, td.visible-xs {display:table-cell !important;}.hidden-xs {display:none !important;}}@media screen and (min-width:768px) {.jumbotron {padding-top:48px;padding-bottom:48px;}.container .jumbotron {padding-right:60px;padding-left:60px;}.jumbotron h1, .jumbotron .h1 {font-size:63px;}.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next {width:30px;height:30px;margin-top:-15px;margin-left:-15px;font-size:30px;}.carousel-caption {right:20%;left:20%;padding-bottom:30px;}.carousel-indicators {bottom:20px;}}@media (min-width:768px) and (max-width:991px) {.visible-sm {display:block !important;}table.visible-sm {display:table;}tr.visible-sm {display:table-row !important;}th.visible-sm, td.visible-sm {display:table-cell !important;}.hidden-sm {display:none !important;}}@media (min-width:992px) and (max-width:1199px) {.visible-md {display:block !important;}table.visible-md {display:table;}tr.visible-md {display:table-row !important;}th.visible-md, td.visible-md {display:table-cell !important;}.hidden-md {display:none !important;}}@media (min-width:992px) {.modal-lg {width:900px;}}@media print {* {color:#000 !important;text-shadow:none !important;background:transparent !important;box-shadow:none !important;}a, a:visited {text-decoration:underline;}a[href]:after {content:" (" attr(href) ")";}abbr[title]:after {content:" (" attr(title) ")";}a[href^="javascript:"]:after, a[href^="#"]:after {content:"";}pre, blockquote {border:1px solid #999;page-break-inside:avoid;}thead {display:table-header-group;}tr, img {page-break-inside:avoid;}img {max-width:100% !important;}p, h2, h3 {orphans:3;widows:3;}h2, h3 {page-break-after:avoid;}select {background:#fff !important;}.navbar {display:none;}.table td, .table th {background-color:#fff !important;}.btn > .caret, .dropup > .btn > .caret {border-top-color:#000 !important;}.label {border:1px solid #000;}.table {border-collapse:collapse !important;}.table-bordered th, .table-bordered td {border:1px solid #ddd !important;}.visible-print {display:block !important;}table.visible-print {display:table;}tr.visible-print {display:table-row !important;}th.visible-print, td.visible-print {display:table-cell !important;}.hidden-print {display:none !important;}}