coliff / Bootstrap Ie11
Licence: mit
Internet Explorer 11 compatibility solution for Bootstrap 5
Stars: ✭ 47
Projects that are alternatives of or similar to Bootstrap Ie11
Mdb Webpack Starter
Webpack Starter for Material Design for Bootstrap UI Kit based on the latest Bootstrap 5.
Stars: ✭ 39 (-17.02%)
Mutual labels: bootstrap
Nodejs Socketio Chat App
MEAN Stack & Socket.IO Real-time Chat App | A MEAN stack based Real Time chat application
Stars: ✭ 45 (-4.26%)
Mutual labels: bootstrap
Gulp Bootlint
A gulp wrapper for Bootlint, the HTML linter for Bootstrap projects.
Stars: ✭ 42 (-10.64%)
Mutual labels: bootstrap
Bootstrap4layouts
A Template for Bootstrap 4 based on my Bootstrap 4 Layouts course on LinkedIn Learning
Stars: ✭ 44 (-6.38%)
Mutual labels: bootstrap
Bootstrap Show Modal
A Bootstrap 4 / jQuery plugin wrapper, to create modals dynamically in JavaScript
Stars: ✭ 38 (-19.15%)
Mutual labels: bootstrap
Vuedarkmode
👩🎨👨🎨 A minimalist dark design system for Vue.js. Based components designed for the insomniacs who enjoy dark interfaces as much as we do.
Stars: ✭ 1,034 (+2100%)
Mutual labels: bootstrap
Html Modules Toolkit
Transforming HTML standards of the future into JavaScript standards of the past
Stars: ✭ 45 (-4.26%)
Mutual labels: polyfill
Bootstrap Navbar
Helpers to generate a Twitter Bootstrap navbar
Stars: ✭ 40 (-14.89%)
Mutual labels: bootstrap
Freelancers Market
Laravel Project to help freelance websites clients and freelancers to find each other.
Stars: ✭ 39 (-17.02%)
Mutual labels: bootstrap
Vue2 Admin Lte
📊 adminLTE to vuejs v2.x converting project
Stars: ✭ 1,023 (+2076.6%)
Mutual labels: bootstrap
Laravel Settings
Simple Settings package for a laravel application
Stars: ✭ 45 (-4.26%)
Mutual labels: bootstrap
Awesome Bootstrap
✨ Awesome - A curated list of amazing Bootstrap tools and themes.
Stars: ✭ 991 (+2008.51%)
Mutual labels: bootstrap
Startbootstrap 2 Col Portfolio
A two column Bootstrap HTML portfolio template - created by Start Bootstrap
Stars: ✭ 40 (-14.89%)
Mutual labels: bootstrap
Go Astilectron Bootstrap
Create a one-window application using Astilectron
Stars: ✭ 46 (-2.13%)
Mutual labels: bootstrap
Bootstrap 5 for IE 11
Bootstrap 5 (currently in Beta) drops support for Internet Explorer 11, but you can add support back by simply adding a CSS file and a few JavaScript polyfills.
Quick start
- Download the latest release
- Clone the repo
git clone https://github.com/coliff/bootstrap-ie11.git - Install with npm
npm install bootstrap-ie11 - Install with yarn
yarn add bootstrap-ie11 - Install with Composer
composer require coliff/bootstrap-ie11:5.0.0-beta2
Usage
Just add this in the <head> which will load the CSS and JS - just for IE users.
<script nomodule>window.MSInputMethodContext && document.documentMode && document.write('<link rel="stylesheet" href="/css/bootstrap-ie11.min.css"><script src="https://cdn.jsdelivr.net/gh/nuxodin/[email protected]/ie11CustomProperties.min.js"><\/script><script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=default,Array.prototype.includes,Array.prototype.find,Number.parseFloat%2CNumber.parse"><\/script>');</script>
If you'd prefer to load the bootstrap-ie11 CSS without JavaScript you could use an IE-only media query as follow:
<link rel="stylesheet" href="/css/bootstrap-ie11.min.css" media="all and (-ms-high-contrast: active), (-ms-high-contrast: none)">
The CSS can be loaded via a CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bootstrap-ie11.min.css" media="all and (-ms-high-contrast: active), (-ms-high-contrast: none)">
FAQS
What does this fix/polyfill?
- Polyfill for CSS custom properties (ie11CustomProperties)
- Polyfill to fix all JavaScript components (Polyfill.io)
- Workaround for the SVG overflow bug
- Remove the default vertical scrollbar from
textarea - Correct the text-wrapping and color inheritance for
legend - Disable auto-hiding scrollbar to avoid overlap on
pre - Fixes for card image size bug
- Add the correct display values for
templateandmain. - Fixes for modals (
.modal-dialog-centeredand.modal-dialog-scrollable) - Fixes for forms (inputs, checkboxes, radio buttons, switches, selects, ranges, placeholders and floating labels)
- Fix for the
btn-close-whiteSVG icon color - Fix for dark carousel previous and next SVG icon colors
- Fix for
valid-tooltip&invalid-tooltippositioning - Adds vendor prefixes for
user-select-autoanduser-select-noneutilities - Fix for
.visually-hiddenutility class
Any other things to look out for?
- Tabs require an additional element-qsa-scope polyfill. Check Issue #39.
- Internet Explorer 11 does not support vertical alignment of flex items when the flex container has a
min-height. See Flexbugs #3 for more details. - The ie11CustomProperties polyfill currently removes the
!importantfrom any CSS variables with that set. See ie11CustomProperties issue #62. - View a list of known issues at https://github.com/coliff/bootstrap-ie11/issues
- There is a slight delay before the ie11CustomProperties polyfill works its magic. Consider adding
body{font-family:"Segoe UI", Arial, sans-serif;}to your IE11-only stylesheet so there isn't a delay in the text displaying
How can I test this?
- Microsoft offer free Windows 7/8.1 VMs with IE11
- BrowserStack also offers IE11 for testing
Demo
See this in action at: https://coliff.github.io/bootstrap-ie11/tests/
Thanks
Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].