v4 Alpha 6 ship list #20939

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.
• Fixed up all examples to use latest navbar and grid changes.
• 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.

CSS

• CSS3 3D transforms for Carousel aren't used in Firefox #15534, Add @supports feature query for Carousel CSS 3D transforms #19751: Properly enable 3D transforms for carousels in Firefox with @supports.
• Including "bootstrap-grid.scss" only leads to somewhat broken grid #17982, Update bootstrap-grid.scss to include box-sizing and responsive changes #21202: Include box-sizing reset CSS media query helpers in bootstrap-grid.scss to ensure grid behaves as intended.
• ul.nav-tabs border-bottom is visible on IE11+Edge #18228, Fix tab border in IE11 & Edge #21429: Fix tab border in IE11 and Edge.
• Floated .label text is vertically misaligned with other .list-group text #18574, Badge vertical alignment in list groups #21379: Update alignment of badges in list group items with margin utilities.
• .table-responsive doesn't fill up width in Firefox #18612, Update .table-responsive #21208: Update table docs to use .table-responsive as a modifier instead of wrapper.
• v4 clearfix on .card-{block,header,footer} breaks flex layouts #18849, Don't clearfix if flexbox is enabled. Fixes #18849 #18851: Don't use the clearfix mixin on card headers/footers in flexbox mode.
• Card header/footer doesn't look nice with primary + inverse #18946, Made the background of the card header and footer transparent when .card-inverse'd #21111: Make .card-header and .card-footer transparent in inverse card.
• v4 flex list-group implementation #18978, Flexbox enable list-group #18981: Add flexbox support to the list group component.
• <progress> bar rounding cut off when max != 100 #19065, Progress border-radius changes #21216: Ensure proper rounding of progress bars when max is greater than value-"100".
• Add a "row without gutters" class #19107, Add .no-gutters option to remove gutters from rows #21211: Add option to remove gutters from grid columns with .no-gutters on rows.
• @warn if minimum width of smallest breakpoint != 0 #19217, Warn if minimum width of smallest breakpoint != 0 #19308: Warn on compiling if the smallest breakpoint doesn't equal 0.
• _forms.scss: rem values shouldn't be hardcoded #19253, v4: Form vars #21441: Swap some hardcoded values for variables across form styles.
• Make container padding configurable on a per-breakpoint basis #19304, Container padding uses per-breakpoint gutter sizes, fixes #19304. #20973: Add ability to customize grid container padding across tiers.
• Using px for root nullifies browser font-size #19460, v4: Remove root font-size #21524: Remove explicit root font-size in pixels in favor of an implicit 16px browser default for improved accessibility.
• Fix .embed-responsive class in flex container #19739: Update .embed-responsive to use flexbox.
• remove references to $gray-* outside _variables.scss #19757: Improve use of variables by reassigning $gray- vars to component-based ones.
• Fix .input-group-btn overflowing its parent when Flexbox is enabled #19762: Fix input group's .form-control sizing in Firefox when in flexbox mode.
• Zero out the default margin-bottom on label.custom-file #19915: Remove margin-bottom from <label>s on custom file inputs.
• .modal-dialog on narrow SM screen has no horizontal margin #19973, Tweak modal sizes #21207: Change modal sizes to better account for responsive behavior. $modal-md is now 500px instead of 600px and $modal-lg is now 800px instead of 900px (to better match the medium one).
• display:table in .clearfix rule may create unwanted gaps between blocks #19983, Micro clearfix hack breaks "white-space: pre-wrap" #20284, Update clearfix mixin #21224: Update clearfix to use display: block instead of table.
• Custom Forms: Allow Chrome/Firefox feature that lets the user drag and drop into file inputs #20033: Allow custom file inputs to utilize drag-and-drop by giving their inputs a fixed height and removing the pointer-events from the custom input.
• Alert component - click area size for touch devices #20013, Larger alert dismiss icon #21230: Increase padding of dismiss icon in alerts.
• .list-group-flush within .card causes double border #20395, Remove borders on the top and/or bottom when .list-group-flush is the first and/or last child #20903: Fix double border on flush list groups.
• Visibility mixin #20441: Restore the invisible mixin for visibility: hidden.
• Bootstrap 4.0.0-alpha3 .tag class breaks WordPress #20542, Rename .tag to .badge to avoid conflicting with WordPress #21020, Change .tag print styles to .badge. #21122: Rename .tag to .badge to avoid conflicts w/ WordPress.
• Change button outline to work with lighter colours #20609, Remove hard-coded value in button-outline-variant #20734: Add new parameter to the button-outline-variant mixin for setting the color on hover/focus.
• Use color variables consistently #20677: More color variables throughout Sass.
• custom-checkbox broken when not using label next to checkbox #20730, Add a min-height: 1.5rem; to custom controls #21033: Add a min-height to custom form controls to ensure they don't collapse without label text (due to indicators being absolutely positioned).
• Use a variable for the default font-weights #20741, Use a variable for the default font weights. Fixes #20741 #20951: Add and use variables for font-weight.
• Add responsive spacing utility classes #18490, Make spacer utils responsive #20926: Spacing utility classes are now responsive.
• abbr[title] still has border-bottom on v4-dev #20908, Remove border-bottom from <abbr> #21244: Remove border-bottom from <abbr> given underline from Normalize.css.
• Input addon incorrect vertical alignment with flex enabled #20927, Proper input group sizing and alignment in flexbox mode #21032: Improve the flexbox support for input groups.
• Responsive display utilities #20934: Display utility classes are now responsive, and float utilities have been tweaked slightly to drop the xs abbreviation for that breakpont.
• Inline checkbox and radio -> unecessarily different markup #20936, Fix #20936 make inline checkbox/radio markup same as stacked #20995: .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.
• duplicate navbar-toggler-padding variables #20957: Remove duplicate navbar toggler variables.
• Set box-shadow on input if enable-shadows rather than enable-rounded #20964: Use proper @if statement around shadows on .form-control.
• Fix unescaped # in SVG data URLs #20962: Fix unescaped # in SVG data URLs.
• Add support for column class which automatically sizes flexbox columns #20963: Add support for variable width grid columns in our flexbox grid system.
• <select> element height differs from other form inputs when using custom line height #20977, Fix incorrect select height calculation #21171: Use $input-line-height variable instead of base line-height to calculate height of <select>s so they properly match textual inputs and buttons.
• Add a horizontal form validation example (check double label classes) #20983, Horizontal form validation example #21041: Add horizontal form validation state support and example to docs.
• custom-control + custom-control margin-left break display on mobile view #20999, Custom check margin change #21295: Change margin-left to margin-right for custom form checks for better rendering on narrow viewports.
• Re-use 'between' mixin for 'only' mixin #20101: Rearrange the grid mixins slightly to re-use the between mixin with less repetition.
• Body font weight variable #21004: Add new $font-weight-base variable for setting the global, default font-weight on the <body> of your pages.
• Custom checkbox alignment possible regression #21023, Calculcate the top offset for custom control indicators #21034: Use some math functions to calculate the vertical offset via top on custom form controls.
• line-height is not specified for page-links #21039, Set line-height for page-links #21052: Adjust line-height of pagination links to match buttons and inputs.
• Fixes #20975: navbar-text on navbar-dark and bg-inverse is invisible #21046: Improve rendering of .navbar-text across light and dark variants.
• Using variable names in rgba() in_variables.scss #21050: Update forms to use their Sass variables for border-color on :focus.
• Update grid classes to omit xs abbreviation #21059, Feature/omit xs from grid #21086, Rename .col-xs to .col + some other cleanup #21222: Remove -xs from the extra small grid class names (but keep the sm, md, lg, and xl for the others).
• Add alert-margin-bottom variable #21064: Add $alert-margin-bottom variable.
• Modal title padding named wrong #21080, renamed modal-title-padding to modal-header-padding #21118: Rename $modal-title- variables to $modal-header- to match the classes.
• pagination .page-link is underlined on hover #21094, Fix pagination underline #21187: Fix underline on pagination links.
• Scope ::first-letter selector for print styles #21095: Scope ::first-letter selector for print styles (fixes IE11 print bug).
• Update Normalize to v5.0.0. #21133: Update Normalize.css to v5 (which fixes Expand arrow gone from summary element #21060, a bug where details/summary elements wouldn't render correctly).
• Docs: specify .card-inverse usage #21164, Inverse card improvements #21242: Update .card-inverse to set a color for the entire card, and then update the docs to better describe the class's use and scope.
• v4: Miscellaneous color changes #21199: Darken some colors for improved contrast (including some $gray- colors to fix $gray-light color inaccessible on white background #20952, active list group item text, and close icon).
• v4: Flexbox nav options #21201: Add some flexbox nav variants for justified and centered nav options.
• Wrap .fade and .collapsing transition properties in $enable-transitions #21203: Wrap transitions for .fade and .collapsing in an @if statement so they can be controlled by global $enable-transitions variable, which has been restored to true.
• v4 disabled navbar links #21205: Add styling for disabled nav links in light and dark navbars.
• Update use of $gray-lightest variable #21206: Update instances of hardcoded $gray-lightest.
• Update inline forms (updated docs and new flexbox styles) #21212: Update .form-inline to add flexbox support, better docs, and better support for more form control types.
• Border utilities #21213: Add border-0 override utilities (for all properties and individual sides).
• Add rounded-0 utility class #21214: Add .rounded-0 utility for overriding border-radius.
• Rename .text-xs-* to .text-* #21217: Remove xs- prefix from text utilities.
• Add max-width 100% and max-height 100% utilities #21221: Add .mw-100 and .mh-100 utilities for max-width: 100%; and max-height: 100%;.
• Rename .navbar-toggleable-xs to .navbar-toggleable + more cleanup #21226: Rename .navbar-toggleable-xs to .navbar-toggleable and more cleanup.
• Inline code tags inside of a tags aren't formatted properly #21259, Restyle code elements in links #21392: Reset <code> styles when in <a>s.
• Update <fieldset> comment to clarify that min-width weirdness is standardized #21261: Update <fieldset> comment to better reflect min-width weirdness.
• Add variables for transitions #21266, Add variables for transitions #21345: Add transitions variables throughout.
• Y-margin of .custom-controls can't be adjusted. #21278, Put custom control spacer var to use #21315: Use the margin variable for custom checks.
• Refactor carousel #21298: Refactor carousel component to remove nested CSS, restyle the component, and improve docs.
• rename animations.scss to transitions.scss for clarity #21327, Rename _animation.scss to _transitions.scss #21370: Renamed _animation.scss to _transitions.scss for clarity.
• Add 'system-ui' to font stack. #21356: Add system-ui to font stack for future-proofing Chrome.
• Use brand color for progress bar #21368: Use $brand-primary as background-color for progress bar background.
• Rename -bg-inverse to -inverse-bg; add -inverse-color #21371: Rename $table-bg-inverse to $table-inverse-bg and add $table-inverse-color.
• Add more color vars #21378: Add some additional color variables.
• Flexbox all the time (Drop IE9 support and remove $enable-flex option) #21389, Remove IE9 browser hacks. #21393: Make everything flexbox by default; drop support for IE9.
• v4: Flexbox navbar #21390: Rewrite navbar with flexbox and overhaul it's docs.
• Flexbox button group #21394: Rewrite button groups with flexbox.
• Add color variables for white and black #21397: Add $white and $black variables to build on Add more color vars #21378 and put them to use.
• v4: Flexbox carousel options #21400: Rewrite carousel indicators and controls with flexbox.
• New width and height utils #21402: Added new width and height utilities for 25%, 50%, and 75% wide options.
• v4: Flex cards #21403: Rebuild cards with flexbox in mind, simplifying overall styling and improving docs.
• v4: Flex media redux #21405: Rebuild .media object with flexbox, heavily reducing included classes and overhauling docs with new and improved examples.
• v4: Various flexbox fixes and updates #21407: Fixed tons of flexbox bugs, overhauled flexbox utilities, redid navs in flexbox, fixed examples.
• v4: Flex modal #21425: Rebuild modal in flexbox.
• v4: Mixing auto margins with flexbox #21426: Add more margin-{side}: auto utilities and document how awesome they are with flexbox layouts.
• Remove outdated flex comments + other small changes #21432: Update some CSS comments, clean up responsive spacing, reorder classes.
• v4: Move _custom.scss after vars and mixins #21442: Move _custom.scss import after variables and mixins.
• v4: Simplify button states #21439: Simplify button states for pseudo-classes and more. Fixes a handful of issues in the process around how disabled and active buttons are styled.
• v4: Miscellaneous states, flexbox, and docs cleanup #21459: Simplify pseudo-classes on navs, navbars, list groups, and pagination. Also rewrite pagination in flexbox.
• use align-items on .form-inline to keep items from growing too much #21461: Add align-items: center to .form-inline so smaller elements don't grow to their potentially larger siblings.
• v4: Simplify navbar further #21462: More navbar simplification to be more mobile-first friendly, remove ambiguity, and improve customization.
• Make container position: relative #21464: Add position: relative to containers by default.
• v4: Rewrite progress component without <progress> element #21473: Rewrite progress component without <progress>.
• v4: Remove tab-focus mixin #21487: Remove tab-focus mixin as we're no longer overriding default focus styles.
• bd72b95: Remove .table-reflow.
• Drop .caret #21525: Removed leftover .caret styles from button CSS. These have been unused for some time with the switch to ::after for our dropdown indicators.

JS

• IE11 radio button and checkboxes using button plugin don't work correctly when navigating with keyboard #16673, change event not working with BS4 radio button groups? #17599, [accessibility] Button plugin doesn't apply "checked"-property to checkbox/radio button when activated with the keyboard  #18874, Button toggling - trigger change event on input #18900: Ensure input-powered buttons trigger change event on input (instead of label).
• Tooltip/Popover methods show/hide/toggle don't work properly with click triggering #16732, update click state when hiding so can be shown again by trigger #21440: Update tooltip click state when hiding so can be shown again by trigger.
• Dropdown items in nav tabs can get stuck in .active mode #17371, [Fix #17371][V4] Deactivating dropdown links in nav tab #17642: Ensure dropdown items don't get stuck in .active state.
• ScrollSpy no longer selects last element when at the bottom of the page #17739, Scrollspy selecting the last element when at the bottom of the page #18804: Restore v3's Scrollspy behavior for better identifying sections at the end of pages.
• Add <body> padding restoration test(s) where the modal is taller than the viewport #17400, [Fix #17400] Add tests about padding restoration #17536: Add padding restoration tests for the <body>.
• Tab plugin should use a class selector instead of a ul tag selector #17754, add support for ol in tab plugin #20467: Allow tab JS to use <ol>s in addition to <ul>s.
• Tooltip/Popover container option is not implemented #17755, Add container to tooltip options #20725: Add container option to tooltips.
• Make async methods throw if one is called while another is still in progress #17800, [V4] Throw error when a plugin is in transition #17823: Throw an error when a plugin is in transition.
• v4 Modal transition (fade) violates CSP (script-src 'unsafe-inline') #17964, Fix #17964 #17997: Avoid creating a function with Function constructor to avoid CSP violation.
• Add unit test for modal ignoreBackdropClick logic #18154, [Fix #18154][V4] Add test unit to check logic of ignoreBackdropClick #18245: Add unit test for ignoreBackdropClick.
• Dropdown's arrow key handler runs global DOM query? #18454, Dropdown perf - on keyboard nav, search for active item in the current dropdown rather than the whole document #19953: Scope dropdown search for active element to current menu instead of whole document.
• Carousel prevents input into form elements within slides #18850, Carousel - Do not prevent on keydown for input and textarea #19058: Don't prevent keydown for inputs and textareas in carousel.
• modals are not working with <area> links #18796, prevent navigating to area href when modal target #20462: Prevent modals from trying to navigate to <area>s.
• multiple accordions collapse bug #18824, Fix bug multiple accordions collapse #18847: Ensure that accordions collapse properly.
• Popovers & tooltips should close when their containing modal closes #19270, Popover stays 'live' when you close a modal containing it via clicking on the backdrop. #20568, Hide popovers when their containing modal is closed. #21227: Hide tooltips and popovers within a modal when the modal is closed.
• Use a single class name for opened/expanded/shown state of widgets? #19344, Fix #19344 - Use a single class name for opened/expanded/shown state of widgets #20982: Use a single "active"/"open" class—that being .active—across all our JavaScript plugins.
• Update tooltip.js #19541: Don't reference Tether via attachment to window.
• Scrollspy _getScrollTop() uses Window.scrollY which is not supported in IE #20261, Fix #20261: Use pageYOffset instead of scrollY #21536: Update scrollspy plugin to use pageYOffset instead of scrollY.
• scrollspy: fix wrong activation of all nested links #20304: Fix broken activation of sibling nav links in Scrollspy.
• Consider using ES6 arrow functions instead of $.proxy() #20633, Move from $.proxy to es6 arrow functions. #21049: Move from $.proxy to ES6 arrow functions.
• Use multi-selector to remove the same event handler #20642: Use multi-selector to remove the same event handler.
• Remove classes at one time #20651: Remove classes all at the same time.
• v4 : Making .tooltip('show') throw an error on elements with display:none #20940: Tooltips throw an error when trigged from an element with display: none;.
• Refactor ESLint configuration. #21005: Refactor ESLint configuration based on eslint:recommended settings.
• Follow up #20982 w/ active/open nav fixes #21021, Rename .active to .show #21036: Undo Use a single class name for opened/expanded/shown state of widgets? #19344 and Fix #19344 - Use a single class name for opened/expanded/shown state of widgets #20982 some, using .show as the "in"/"active" class for transitioning components toggled via JavaScript.
• ScrollSpy clears active nav-item on Safari when rubber-band scrolling past the top of page #21055, Closes #21055: Prevents ScrollSpy from clearing item when Safari rubberbands #21056: Rubber band scrolling no longer removes active state on first nav link.
• Update visual tests. #21121: Update visual tests.
• Carousel: Only prevents default for ARROW_LEFT and ARROW_RIGHT keys #20907, Closes: #21412: Fix unit test for carousel #21413: Only .preventDefault() for the left and right arrow keys rather than every key.
• Dropdown: close menu when focusing outside element #21375: Close dropdown menus when focusing outside the menu, too.
• Allow to use nav with tab JS #21451: Allow tabs to use <nav> component markup.
• Close #21090 - Fix aria-pressed attribute for buttons in container with data-attribute="buttons" #21093: Fix aria-pressed attribute for buttons in container with data-attribute="buttons"

Docs

• List z-index values in docs #18532, Document zindex #21027: Update and document our z-index variables.
• Alphabetized carousel options & added "ride" to it #19887: Document the carousel ride option and more.
• Update Google Analytics snippet to always load via HTTPS #20945: Update Google Analytics snippet to always load via HTTPS.
• Normalize examples and update where relevant. #20947: Update examples to use latest versions of key components like navbars.
• Browser naming inconsistency: 'Microsoft Edge' vs 'Chrome' / 'Firefox' / 'Internet Explorer' #20948, Rename Microsoft Edge to just Edge in docs #20998: Change name of Microsoft Edge in docs to just Edge.
• Spacing documentation for all sides needs updating #20965, Fix documentation for all-side spacing classes. #20966: Fix docs for spacer utilities that set all values.
• Fixing ruby gem version to 4.0.0.alpha5 #20994: Fix version number in Rubygems install docs.
• Fixed incorrect instructions: "Press ⌘ to copy" #20602, Replacement for #20602 #21236: Better fallback copy for copy-pasting code snippets.
• v4 disabled navbar links #21205: Update values for media queries.
• Remove soon-to-be-defunct callout about Firefox fieldset bug #21262: Remove callout for soon to be defunct Firefox fieldset bug.
• Documentation navigation fixes. #21288: Rebuild docs sidenav for simpler presentation; add redirect, too, for /utilities/.
• Remove .float-left from card header nav docs #21292: Remove specific requirement of float-left utility for card header navs (though you'll need float-right for right-aligned navs).
• Remove Meteor install instructions. #21420: Remove Meteor install instructions.
• v4: Switch to jQuery Slim #21466: Switched to the slim version of jQuery in our local and hosted docs.
• Remove X-UA-Compatible from starter template as it is deprecated in IE11. #21476, v4: Rip out IE compatibility mode meta tags #21483: Remove all IE compatibility mode meta tags from our docs, examples, and JS tests.
• Fix media object alignment examples. #21558: Fix media object alignment examples.

Examples

• sidebar & navbar are broken in Dashboard example #17816, .page-header in Dashboard example should have border-bottom ? #17883, update the dashboard examples #18707, Refactor Dashboard example. #21140: Update Dashboard example to use latest markup and styles.

Build tools

• Update travis to run on container-based infrastructure #17163, Travis build infrastructure refresh. #21108: Refresh Travis build infrastructure w/ Ubuntu container and more.
• Move scss-lint to npm scripts. #21374: Move scss_lint task to npm script.
• Move clean-css to npm scripts. #21404: Move cssmin task to npm script.
• Move uglifyjs to npm script. #21414: Move uglify task to npm script.
• Disable Hound on test cases. #21430: Disable Hound on test cases.
• Extend ESLint to cover all JS files and drop JSCS. #21480, Lint all JS #17924, Drop JSCS? #20740: Extend ESLint to cover all JS files and drop JSCS.
• Move node-sass to npm script and drop Ruby Sass. #21489: Move sass task to npm script and drop Ruby Sass support.
• Update dependencies. #21544: Update all dependencies.

Packaging