v4.0.0-beta.4

Major Updates:

Some breaking changes have been introduced in this release.

• Dropdown alignment classes, .dropstart and .dropend, have been fixed to make better sense when used with submenus. They can also now be used with primary dropdown menus to 'attach' menus to the side of the toggle.
  • This also required a rename of the class used to produce reverse/right-side aligned menus. So we now have .dropreverse for this use.
  • Alignment classes are no longer applied on the parent container, but on the .dropdown-menu, or ol/ul submenu list.
• The caret utilities have been upgraded to a 4-way style. Since .dropup is no longer on the parent container, you may have to change from .caret to .caretup.
• Input groups have been simplified by removing .input-group-addon container.
  • Related settings have also been updated from $input-group-addon-* to $input-group-text-*.
• Grid layout has received some consolidation and fixes.
  • Removed position: relative from columns.
  • Columns now use width instead of max-width and flex-basis for sizing.
  • Added .row-col-auto variants for auto sizing columns.
  • Fixed some other issues with .row-col-# not respecting sized columns.
  • Horizontal padding is added to the columns only when they are direct children of a row, instead of being added to the columns themselves.
  • The column classes can now also be used as stand alone classes to control width, without the additional horizontal padding when used outside a .row.
  • Responsive gutter classes have been added, to allow control of the gutter size in horizontal and/or vertical directions.

CSS

• #560: Widget-Modal: Adjust scroll for centered modal.
• #561: Reboot: Fix th alignment for Safari.
• #562: Content-Button: Update mixin for dart-sass compatibility.
• #563: Widget-Dropdown: Alignment updates.
• #564: Component-Input Group: Drop .input-group-addon.
• #566: Update some nav and dropdown layout.
• #567: Layout-Grid: Rework columns to use width.
• #568: Widget-Modal: Fix blocked animation causing scrollbar to appear in centered case.
• #569: Layout-Grid: Add responsive gutters.
• #570: Content-Forms: Simplify .form-file to use display: block.
• acf3fd5, #583: Reboot: Update height adjustments for datetime inputs.
• #572: Rework link decorations to reduce output, also adds settings for text-decoration on base .nav-link.
• #573: Content-Reboot: Adjust the legend block style layout.
• #574: Content-Forms: Add sizing for .form-file, and within sized .input-groups, additional color var for .form-check-label.
• #575: Add opaque color conversion for foreground colors in contrast check.
• #576: Content-Buttons: Normalize .btn-link focus state.
• #577: Content-Table: Add alternate caption placement.
• #581: Content-Table: Removed some unneeded rules for .table-scroll.
• #582: Component-Navbar: Update text-decoration handling.
• #585: Improve transition() mixin to handle null and none values and add default.
• #586: Component-Nav: Add transition to .nav-link.
• #587: Modal: Add fullscreen and responsive fullscreen variants (fills the viewport).
• #588: Add null support to box-shadow() mixin, adjust shadow handling in buttons and forms.
• #589: Content-Form: Add more variables for .form-text.
• #590: Content-Form: Some simplifications for .form-check.
• #591: Utilities-Icons: Remove appearance rule.
• #592: Component-Grid: Additional check on $grid-row-columns.
• #593: Layout-Grid: Support zero columns and add note for having only a single breakpoint.
• #594: Content-Table: Generalize table border reset and move to reboot.
• #595: Content-Table: Increase specificity for tables to control style inheritance.

JS

• #580: Tab: Add role="presentation" to parent <li> containers.

Docs

• #571: Component-Cards: Clarify some things about card groups.
• #578: Update some external links and a11y additions.
• #579: Content-Forms: Remove some unneeded <form> elements, and add aria-labels.
• #584: Update some dropdown and progress examples and tests.

Build

• #565: Drop some outdated browser versions.