Two years in the making, we finally have our first beta release of Bootstrap 4. In that time, we’ve broken all the things at least twenty-seven times over with nearly 5,000 commits, 650+ files changed, 67,000 lines added, and 82,000 lines deleted. We also shipped six major alpha releases, a trio of official Themes, and even a job board for good measure.
Bootstrap has become the world’s favorite framework for building responsive web-projects. With the Bootstrap 4 Beta release just around the corner, it is time to take a more detailed look at what the project has to offer, what has changed and what one can expect when migrating over from Bootstrap 3.
Here’s a look at a handful of the changes since our last alpha:
- Overhauled spacing utilities to use a numerical tiering (to avoid confusion with grid tiers).
- Continued refactoring efforts to replace markup-specific selectors with classes across several components (including pagination, lists, and more). Still more to do here with additional components.
- Reverted media queries and grid containers from rems to pixels as viewports are not affected by font-size. See #17403 for details. We’ve got a ton of grid work left, too. Feel free to follow along with#18471.
- Reverted
.0625rem
width borders to1px
for more consistent component borders that avoid zoom and font-size bugs across browsers. - Renamed
.img-responsive
to.img-fluid
to avoid future confusion on the various responsive image solutions out there. - Replaced ZeroClipboard with clipboard.js for Flash-independent copy buttons.
- Inputs and buttons now share the same border variable to ensure components are always sized similarly.
- Updated all pseudo-element selectors to use the spec’s preferred double colon (e.g.,
::before
as opposed to:before
). - Cards now have outline variants and mixins to support extending base classes further.
- Utility classes for floats and text alignment now have responsive ranges. This means we’ve dropped the non-responsive classes to avoid duplication.
- Added support for jQuery 2.
- And hundreds more Sass improvements, bug fixes, documentation updates, and more.