Last checked and updated on 10 Jun 2026
What Is New in Bootstrap 4.x
Bootstrap 4 is a major rewrite of the entire project, moving from Less to Sass and embracing flexbox for its layout system. This release introduces a new component structure and a more modular approach to its codebase.
| Category | Key Changes |
|---|---|
| New Features | Rebuilt with Flexbox, New Card component, Opt-in flexbox grid |
| Improvements | Switched from Less to Sass, Improved grid tiers, Consolidated units |
| Deprecated | Panels, Wells, Thumbnails, Glyphicons, pager class |
| Browser Support | Dropped IE8 and IE9 support, now supports IE10+ and modern browsers |
Why did Bootstrap switch from Less to Sass?
The move to Sass was driven by its faster compilation times and larger ecosystem. This change makes it easier for developers to customize the framework and integrates better with modern front-end toolchains.
In practice, if you were importing Bootstrap Less files directly, you'll need to update your build process to handle .scss files instead. The overall structure of variables and mixins remains conceptually similar.
How does the new flexbox grid work?
The flexbox grid is an opt-in replacement for the default float-based grid system. It provides more powerful alignment and distribution capabilities for your layout columns.
You enable it by setting $enable-flex: true; in your Sass variables file before importing Bootstrap. This gives you access to vertical alignment classes and more consistent column behavior.
What replaced panels, wells, and thumbnails?
The Card component consolidates and replaces panels, wells, and thumbnails into a single, more flexible component. Cards provide a content container with multiple variants and built-in options for headers, footers, and content.
This matters because it simplifies the component API while providing more design flexibility. A single card can be configured to handle what previously required multiple different components.
What happened to Glyphicons?
Glyphicons are no longer included by default in Bootstrap 4. The team removed the bundled icon font to reduce the default bundle size and allow developers to choose their own icon solution.
Most projects now use SVG-based icon systems or other icon fonts. You'll need to manually include an icon library like Font Awesome or use SVG sprites for your project's icons.
FAQ
Is Bootstrap 4 backward compatible with Bootstrap 3?
No, Bootstrap 4 is not fully backward compatible. The migration involves updating class names, replacing deprecated components with Cards, and handling the switch from Less to Sass in your build process.
Can I still use the float-based grid in Bootstrap 4?
Yes, the float grid remains the default. The flexbox grid is opt-in through a Sass variable, giving you time to migrate your layouts gradually.
What's the best way to handle icons now that Glyphicons are gone?
The recommended approach is to use a modern icon solution like Font Awesome, SVG sprites, or inline SVG. These options offer better performance and more customization than the removed Glyphicons.
How do I customize Bootstrap 4 with Sass?
Create your own custom.scss file, override the default variables, then import Bootstrap's main Sass file. This approach leverages Sass's default variable system for easy theming.
What browsers does Bootstrap 4 support?
Bootstrap 4 supports IE10+, iOS 7+, Android 5+, and all modern evergreen browsers. IE8 and IE9 are no longer supported, which allows for cleaner CSS and JavaScript.