twbs/bootstrap

Breaking changes

As mentioned in our Beta 2 release, we needed to make a few more breaking changes in Beta 3. We've summarized them here and in our migration docs—be sure to read them!

• Rewrote native and custom check controls. Both browser default and custom checkboxes and radios now have simpler markup after removing the <input> from the <label>. Now, all checkboxes and radios have a parent <div> and sibling <input> and <label> pair. This is essential for form validation and disabled inputs because we can use the input's state to style the label.

  In addition, custom checkbox and radio elements no longer have a .custom-control-indicator. This is generated from the new .custom-control-label.

• Input groups were rewritten with specific .input-group-{prepend|append} classes. The new approach allows us to support validation styles and messages within input groups, while also adding support for custom selects, custom file inputs, and multiple .form-controls.

• Responsive tables are once again parent classes to avoid accessiblity issues with changing a <table>'s display.

• Deleted the .col-form-legend class, consolidating it's styles into the .col-form-label class.

Read the Migration page for further details.

More highlights

In addition to the breaking changes, we've addressed a few more general issues that may impact your project.

• Restored cursor: pointer to non-disabled links, buttons, .close, navbar toggler, and pagination links.

• Added a new vertically centered modal option with .modal-dialog-centered.

• Added new dropleft and dropright variants for dropdowns in #23860.

• Our npm package no longer includes any files other than our source and dist JavaScript and CSS files. If you previously relied on our running our scripts via the node_modules folder, you'll need to update your build tools.

• Print styles have moved to bottom of the import stack to properly override styles.

For more details on this release's changes, take a look at the Beta 3 ship list issue, as well as the Beta 3 project.

Beta 2 is here! Read the full ship list for details on what issues were closed and PRs merged.

Highlights

• Improved Sass map customization with #23260. With this change, it's now possible to override specific key value pairs instead of resetting the entire map, ideal for color scheme customization.
• Restored grid .offset- modifiers in #23445. Originally our intent was to supplement this with our margin utilities, but we underestimated the appeal of fixed number column offsets.
• Remove unnecessary color from .badge, and it's associated $badge-color variable, in #23529.
• Rename grayscale function to gray to avoid breaking CSS native grayscale filter in #23579.
• Renamed .table-inverse, .thead-inverse, and .thead-default to .*-dark and .*-light, matching our color schemes used elsewhere in #23560.
• Responsive tables now generate classes for each grid breakpoint, meaning we've added .table-responsive-{sm,md,lg,xl} to the already present .table-responsive. You might need to adjust your usage depending on when you want a table to resize. See #22804.
• Include two new dist files which contain Popper.js inside bootstrap.bundle.js and bootstrap.bundle.min.js. See #23735.
• Dropped support for Bower as they've deprecated the package manager. See #23568.
• Switched breadcrumbs from float to flexbox in #23683.
• Added new CSS variables in #23761.
• Switched to Stylelint in #23572.
• New Theming page in the docs from #23611
• #23943: Changed the color-yiq from a mixin that included the color property to a function that returns a value, allowing you to use it for any CSS property. For example, instead of color-yiq(#000), you'd write color: color-yiq(#000);.
• New and improved theming in #24429.

It's a beta! Holy crap this took forever. Thanks for sticking with me on this one—means a lot, y'all <3.

Highlights!

• Dropped Normalize.css as a dependency, forking some of it and remixing it with our own Reboot for a more stable normalization approach.
• Update navbar responsive behaviors to be mobile first, use a new class name .navbar-expand instead of .navbar-toggleable, remove toggler position modifiers (relies on flex utils now), and fix a handful of bugs.
• Stabilize some grid behaviors and update the docs.
• Updated the grid to drop push, pull, and offset in favor of new .order- modifiers and margin utilities.
• Renamed tons of variables (see #22414 and #22092) for a more consistent naming scheme.
• Removed remaining cursor: pointers to restore browser defaults and better indicate actions vs hyperlinks.
• Renamed flexbox order utilities to better match utility naming scheme of .property-value.
• Restored Alpha 5's placement of _custom.scss in our import order.
• Rewrote display and responsive utilities to de-dupe a bunch of functionality.
• Removed Gruntfile and docs from package manager builds.
• Overhauled our color system with new Sass maps, variables, classes, and component variants.
• Updated browser support to bring ranges up to more recent versions.
• Added a bash script for linting unused variables.
• Moved jQuery and Popper to peerDependencies as they're not requirements for every part of Bootstrap.

Be sure to read the full ship list.

Happy New Year! It's our final alpha for Bootstrap 4.

Details

• Read the ship list
• Browser the closed milestone

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 apply justify-content: between;. This also adds tons of new flexbox utilities for display, order, wrap, and more.
• Revamped navs Sass with flexbox and updated docs. All the floats and clearfixs have been removed, .nav-inline removed (on account of display: 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, and col-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-images, 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.

Fifth alpha! View the milestone for details: #20630.