Code Monkey home page Code Monkey logo

bootstrap-ie8's Introduction

LICENSE NPM Downloads github-stars-image code style: prettier

Bootstrap 4 for IE8 and IE9

Bootstrap 4 drops support for Internet Explorer 8 and 9, but you can add it back by simply adding a conditional statement targeting IE 8 and 9 with a CSS file and a CDN-hosted JavaScript file to polyfill HTML5 element support.

Quick start

Several quick start options are available:

  • Download the latest release
  • Clone the repo git clone https://github.com/coliff/bootstrap-ie8.git
  • Install with npm npm install bootstrap-ie8
  • Install with yarn yarn add bootstrap-ie8
  • Install with Composer composer require coliff/bootstrap-ie8:4.3.1

Usage

  1. Add <meta http-equiv="x-ua-compatible" content="ie=edge"> to the top of the of your page

  2. Add the following conditional statements to the <head> of your page but after the Bootstrap 4 CSS:

<!--[if IE 9]>
  <link href="https://cdn.jsdelivr.net/gh/coliff/bootstrap-ie8/css/bootstrap-ie9.min.css" rel="stylesheet">
<![endif]-->
<!--[if lte IE 8]>
  <link href="https://cdn.jsdelivr.net/gh/coliff/bootstrap-ie8/css/bootstrap-ie8.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/g/[email protected]"></script>
<![endif]-->

Optional JavaScript Fix

To fix the dropdown menus and modals you can add the following to the footer:

<!--[if gte IE 9]><!-->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!--<![endif]-->
<!--[if IE 9]>
  <script src="https://cdn.jsdelivr.net/gh/coliff/bootstrap-ie8/js/bootstrap-ie9.min.js"></script>
<![endif]-->
<!--[if lte IE 8]>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/coliff/bootstrap-ie8/js/bootstrap-ie8.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.js"></script>
<![endif]-->

This will load jQuery, PopperJS and Bootstrap as normal on all browsers other than IE8. IE9 will load the bootstrap-ie9.js script. IE8 will load the latest compatible version of jQuery, the unminified Bootstrap JS (the minified version causes an error) and the bootstrap-ie8.js fix.

FAQS

Q. What does this fix/polyfill?

A. Internet Explorer 9 doesn't support flexbox so there is a float-based layout fallback and a couple of other minor fixes. Internet Explorer 8 doesn't support rem units so all units are specified in pixels. Media Queries are also not supported so IE8 has a fixed-width layout (min-width 998px).

Q. Is the CSS hosted on a CDN?

A. Yes, thanks to JSDelivr minified versions are available with the direct links:

Q. Will you provide LESS/SASS files?

A. Maybe in a future release I'll provide SASS file (with comments).

Q. Do I need the RespondJS polyfill for IE8 like Bootstrap 3 uses?

A. No. Instead the CSS is set to be fixed-width which makes things a lot easier. You don't need to change your HTML markup, the CSS will take care of it as the (min-width:992px) media queries are all set.

Q. Where can I see a demo?

A. Right here: http://coliff.github.io/bootstrap-ie8/test.htm

Known Issues

Thanks

BrowserStack Logo

Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers

bootstrap-ie8's People

Contributors

coliff avatar dependabot-preview[bot] avatar dependabot[bot] avatar eifx avatar florentroques avatar namiltd avatar thecodemill avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

bootstrap-ie8's Issues

Add Examples Pages

These should match the examples from the official Bootstrap site, so folks can see how this works in IE8 and IE9.

Navbar not working

Hi,
Navbars are hidden (collapsed) in IE9. Suppose it´s got to do with JS.
image

Add CSS workaround for Flexbox

There are no working JavaScript polyfills available for Flexbox for us to use so we'll need to provide a workaround CSS-based solution, likely being a fallback to the grid system used in Bootstrap 3.

CSS screw up on IE9 and IE8

IE9 - Position of div, not center, navigation button gone, carousel button changed, can
t detect col-md-x class (only show 1 column)

IE8 - Position of div, not center, navigation button gone, carousel button change, cant detect js ( jquery 3.2.1, bootstrap 4.js, popper.js)

Publish v4.4.0

This issue is to track progress of publishing v4.4.0

Changelog

  • Added responsive container classes
  • Improved layout with clear: both added to .row, .container, .container-fluid, header, main, footer.
  • Minified versions of CSS and JS included

TODO

  • Update version numbers in CSS, JS and package.json
  • Add minified versions
  • Publish to NPM
  • Publish to Packagist for Composer

NPM install issue with browserslist

Hi

I just installed this package with NPM and got the following error when compiling:
error in ./node_modules/bootstrap-ie8/css/bootstrap-ie8.css
Module build failed: BrowserslistError: .\node_modules\bootstrap-ie8 contains both .browserslistrc and package.json with browsers

I resolved the issue locally by deleting the .browserslistrc file. I'm guessing one could remove the browsers value in package.json just as well.
I don't know if both of these are needed outside of NPM installs, but it would be nice to not have to do delete the files manually when I run npm install in the future. Or maybe there is something I'm missing that would resolve this?

Right now I'm just including the package by having require('bootstrap-ie8') in my entry JS file. (I'm using VueJS)
Maybe this is the wrong way to include the package?

In any case, thank you for spending your time creating this package! :)

Publish v4.2.0

Release Notes

  • Hide carousel indicator (IE9)
  • Much improved grid layout by making col-md classes important (IE8)
  • Add CSS for modal-xl (IE8)
  • Add CSS fix for custom-switch position (IE9)
  • Published to Composer

Create bootstrap-ie10

The Bootstrap 5 alpha is coming soon. How about create some patches to support Bootstrap 5 on IE 10 and IE 11?

Improve media layout

Maybe:

.media {
  overflow: hidden;
  zoom: 1;
}
.media-body {
  display: table-cell;
  vertical-align: top;
}

IE9 Completely Broke

Seems to stretch everything to full height...
Removed preview as its fixed, realised soon after sorry...

Your project in composer

Hey,

can you add your project in composer? I have made an example-file for you :)

{ "name": "coliff/bootstrap-ie8", "description": "Bootstrap 4 for IE8 and IE9", "version": "4.1.3", "licence": "MIT", "authors": [ { "name": "Christian Oliff", "email": "[email protected]", "homepage": "https://christianoliff.com", "role": "Developer" } ], "support": { "issues" : "https://github.com/coliff/bootstrap-ie8/issues", "docs" : "https://github.com/coliff/bootstrap-ie8#readme" } "require": { "twbs/bootstrap": "4.1.3" } }

Add a SUPPORT.md

File should mention requirements for opening a support issue;

Before posting an issue regarding a problem using this with your site please be sure that all of the below are checked:

  • I have searched Open and Closed issues to check my issue has not been opened before
  • I am using the latest release of bootstrap4-ie8 (ideally from the CDN)
  • I have provided a screenshot and/or link to my site/page with issue
  • I have added the x-ua-compatible / ie=edge meta tag to the head
  • I am using final Bootstrap 4 CSS file (not Alpha or Beta)
  • My issue isn't related to JavaScript (not covered in this project)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.