Happy New Year! It's our final alpha for Bootstrap 4.
Details
Highlights
- Flexbox is now on by default, with no fallback! This means we've dropped IE9 support, but with significant savings to our code base, simpler components, and improved customization thanks to the power of flexbox.
- Rebuilt the navbar with flexbox in mind, leading to some structural changes, but including more flexibility and customization. Includes updated docs, code snippets, more responsive options. All navbars in our examples are also using the latest markup and styles now. Also solves around 10 bugs in the process!
- Overhauled flexbox utilities and documented them. Replaced all the previous flexbox utilities with new ones that are named after
property: value
pairs (instead of creating new names for things). For example,.flex-items-between
is now.justify-content-between
to applyjustify-content: between;
. This also adds tons of new flexbox utilities fordisplay
,order
,wrap
, and more. - Revamped navs Sass with flexbox and updated docs. All the
float
s and clearfixs have been removed,.nav-inline
removed (on account ofdisplay: flex
inlining for us on.nav
), added fill and justify options, and more. - Building on the grid improvements from Alpha 5, you can now customize container padding across grid breakpoints and optionally remove grid gutters with
.no-gutters
. - Similarly, our flexbox grid system has new classes for automatically sizing columns to the size of their content across viewports (e.g., you can now apply
col-xs-6
,col-md-auto
, andcol-xl-4
to a single element). - Grid, display, float, margin, padding, and text utility classes have been significantly overhauled. In addition to all classes now being responsive, the
xs
tier no longer requires a breakpoint abbreviation, making for shorter and more descriptive classes and an easier migration from v3. For example, instead of.d-xs-none
, it's back to.d-none
while it remains.d-{sm,md,lg,xl}-none
for those breakpoints. - Renamed some
.active
, all.in
, and all.open
classes for our JavaScript powered components for more consistent naming. For example, instead it's now.collapse.show
instead of.collapse.in
and.show > .dropdown-menu
instead of.open > .dropdown-menu
to better communicate the visibility of elements. - Refactored carousel with new, simpler styles, better documentation, and less specific selectors.
- Rewrote progress component without the
<progress>
element due to lack of animations, no support for multiple bars, and no support for labels on the progress bars. - Fixed some unescaped
#
s in our SVG data URLs that are used to add vector background-images. - Renamed
.tag
back to.badge
, like v3, to avoid conflicts with common WordPress styles. - A number of custom form enhancements and bugfixes were made. Label-less custom radios and cehckboxes, fixed SVG URLs in
background-image
s, and more. - Updated Normalize.css to v5.0.0.
-
.form-check
and.form-check-inline
now share the same markup. Switch between the two by adding or removing.form-check-inline
as a modifier. - Added support for justified navigation when in flexbox mode.
- Renamed
_animation.scss
to_transitions.scss
for clarity. - Added new color variables (e.g.,
$blue
) for additional customization.