Last checked and updated on 09 Jun 2026
What Is New in Bootstrap 3.x
Bootstrap 3 is a complete rewrite that shifts the framework to a mobile-first approach. This version introduces a flatter design, a new grid system, and replaces pixel-based sizing with rems and ems for better scalability.
| Category | Key Changes |
|---|---|
| Design Philosophy | Mobile-first approach, flat design aesthetic |
| Grid System | Four grid tiers (xs, sm, md, lg), fluid by default |
| Components | New panels, list groups, glyphicons moved to font |
| Customization | Improved Customizer tool, Less variables |
| Deprecations | Removed accordion, typeahead, submenus |
Why is Bootstrap 3 mobile-first?
The framework was rebuilt from the ground up to prioritize mobile devices first, then scale up components for larger screens. This approach fundamentally changed how we think about responsive design.
Instead of starting with desktop styles and using media queries to scale down, Bootstrap 3 starts with base mobile styles and uses min-width media queries to layer on complexity for tablets and desktops. This results in cleaner code and better performance on mobile devices.
How did the grid system change?
Bootstrap 3 introduced a more flexible grid system with four tiers instead of the previous two. The new grid uses .col-xs-, .col-sm-, .col-md-, and .col-lg- classes to target different screen sizes.
The grid became fluid by default, eliminating the need for the .row-fluid class from Bootstrap 2. This simplified markup while providing more granular control over responsive layouts across device sizes.
What components were added or changed?
Several new components were introduced while others were removed or redesigned. Panels and list groups replaced wells and thumbnails for more flexible content containers.
Glyphicons were converted from PNG sprites to a font-based system, making them vector-based and easier to style with CSS. The navbar was completely redesigned to be mobile-friendly by default, collapsing into a toggle menu on smaller screens.
How did customization improve?
The Customizer tool was enhanced to make it easier to tailor Bootstrap to specific project needs. You could select which components to include and customize Less variables directly through the web interface.
The switch to rem and em units for typography and components instead of pixels provided better accessibility and scalability. This allowed users to change the base font size and have the entire layout scale proportionally.
FAQ
Why did Bootstrap 3 remove the accordion component?
The accordion was removed because it could be easily replicated using the new panel component with collapse.js. This reduced code bloat while maintaining the same functionality through composition.
How do I migrate from Bootstrap 2 to Bootstrap 3?
You'll need to update class names, particularly for the grid system (e.g., .span* to .col-md-*), update navbar markup, and replace deprecated components like wells with panels.
Are there any breaking changes in JavaScript plugins?
Yes, several data attributes changed from data-toggle to more specific attributes like data-spy or data-target. Event names were also standardized across components.
Why did Bootstrap switch to flat design?
The flat design approach improved performance by removing gradients and shadows, worked better with high-DPI displays, and aligned with modern design trends focusing on content over decoration.
What happened to the responsive utilities?
They were renamed and expanded. .visible-phone became .visible-xs, and new utilities were added for the additional grid tiers, giving more control over what content shows on which devices.