v4.2.0 shiplist

[mdo]

Highlights

• New: Added a new spinner loading component.
• New: Added new toast component for displaying notifications.
• New: Added a new iOS style switch (a modifier class to our custom checkboxes).
• New: Added touch support in our carousel component.
• New: Added .font-weight-lighter and .font-weight-bolder utilities.
• New: Added .text-decoration-none utility class.
• New: Added .modal-xl modifier class for our modals.
• New: Added new negative margin utility classes (e.g., .mb-n3). These rad new classes not only allow you more control over your general spacing needs, but also allow you to create responsive grid gutters at each breakpoint.
• New: Validated form fields now have feedback icons on :invalid and :valid fields. Disable them with the $enable-validation-icons boolean Sass variable (defaults to true).
• New: Added a new versions page to our docs
• New: Tooltips/Popovers work with Shadow DOM
• New: Added custom form control switch
• Updated: bootstrap-grid.css now includes our margin and padding utilities for full control of our grid system.
• Updated: Changed auto columns (e.g., .col-auto) from max-width: none to max-width: 100% to prevent content from causing a column to overflow the parent.

CSS

• v4.2: Spinners! #22960: Add spinners
• v4.2: Add new toasts component #22980, fix fade animation for toast #27792, Fix margin above toast when previous toast is hidden #27820: Add new toasts component
• v4.2: switch custom form control #23004: Add custom form control switch
• Ligthen/Darken Button focus shadow color #24507: Ligthen/Darken Button focus shadow color
• Button group refactoring and fixes #25395: Button group refactoring and fixes
• Added Viewport Height & Width helpers #25548, Add documentation about viewport sizing utilities #27688: Add Viewport Height & Width helpers
• Variable darken percentage for emphasized links #25575: Variable darken percentage for emphasized links
• fix(table): Add border color relative to theme for accessibility #25755: Add border color relative to theme for accessibility
• Fix readonly-plain-text with button addon #25871: Fix readonly-plain-text with button addon
• Embed responsive tweaks #25894: Allow customizing embed responsive aspect ratio
• Add .text-decoration-none utility class #25933: Add .text-decoration-none utility class
• Add dropdown responsive alignment #26255: Add dropdown responsive alignment
• Sync with normalize 8.0.0 #26296: Sync with normalize 8.0.0
• Custom input range disabled styling #26540: Added :disabled styles for custom range input
• Card header color theming #26573, Inherit $card-cap-color color #27681: Card header color theming
• add 'lighter' and 'bolder' font weight classes #26580: Add lighter and bolder font weight utility classes
• Fix custom-select font size/padding #26585: Match .custom-select's font-size and padding to the .form-select
• Ignore percentage values for compare in maps #26689: Allow percentages in Sass maps (e.g., for $grid-container-widths).
• Prevent pointer-events on disabled anchor dropdown-item #26700: Prevent pointer events on disabled list-group-item and disabled anchor dropdown-item
• Easy merging of new grid breakpoints and containers #26714: Easy merging of new grid breakpoints and containers
• Add .modal-xl modifier #26821: Add .modal-xl modifier
• Restore feedback icons on validated form fields #26824: Restore feedback icons on validated form fields
• Negative margins #26825: Add new negative margin utility classes
• add text-reset to text utilities #26866: add text-reset to text utilities
• Fix custom range height #26898: Fix height of custom range input. across browsers by resetting padding and updating height values
• Prevent hover/click on disabled .close links #26899: Prevent hover/click on disabled .close links
• Carousel indicators transition #26902: Updated carousel indicators to use opacity so we can easily add a transition
• Variable .btn and .form-control font sizes #26908: Variable .btn and .form-control font sizes
• Bring the focused button in input group to the front  #26910: Bring the focused button in input group to the front
• feature/yiq function, add parameters, with default values. #26917: feature/yiq function, add parameters, with default values
• Add margin utils to the grid for fully functional grid control #26957: Add margin utilities to the grid for fully functional grid control
• Add new variables for form feedback tooltips #26959: Added dedicated variables for form validation tooltips that extend the tooltip variables.
• Allow multiple ways of padding declaration for modal header #26976: Added dedicated x and y variables for modal header padding.
• Simpler carousel indicators css #26996: Simpler carousel indicators css
• Remove grid columns min-height #26997: Remove min-height: 1px on grid columns because flex grid doesn't collapse empty columns like our previous float-based grid
• Move transparent background to .btn and remove background-image #27003: Move transparent background to .btn and remove background-image.
• Tweak modal transform #27005: Tweak modal transform
• Remove nowrap from .btn #27010: Remove white-space: nowrap from .btns, largely to fix wrapping issues with .btn-link, but also because wrapping button text is better than text breaking out of a button
• Custom checkboxes and radios retheming #27064: Custom checkboxes and radios retheming
• More flexible blockquote footer font size #27066: More flexible blockquote footer font size
• Floating label input height #27092: Floating label input height
• Fix size of modal dialogs at different widths #27094: Fix size of modal dialogs at different widths
• Set max-width to 100% #27116: Set max-width: 100% on auto columns to prevent content from causing a column to overflow it's parent.
• Fix double border on list-group #27126: Fix double border on list-group
• Round corners on modal footer #27127: Round corners on modal footer
• Fix for double border on cards in an accordion #27133: Fix for double border on cards in an accordion
• Fix custom file input focus border color #27134: Fix custom file input focus border color
• Remove -webkit-text-decoration-skip #27144: Remove -webkit-text-decoration-skip from Reboot
• Move hovered badge's text-decoration CSS to base styles #27149: Move hovered badge's text-decoration CSS to base styles
• feat: keep contrast on .table-dark #27160: keep contrast on .table-dark
• Custom select validation tweaks #27175: Custom select validation tweaks
• Unitless breakpoints #27190: Unitless breakpoints
• Creates variables for navbar brand colors #27211: Create variables for navbar brand colors
• Selector improvement linked badge #27219: Improve selector on link badges
• Consistently re-use input variables #27249: Consistently re-use input variables
• Cleanup .btn-link hover/focus properties #27250: Cleanup .btn-link hover/focus background and border resets
• Add overflow-auto and overflow-hidden utilities #27268: Add .overflow-auto and .overflow-hidden utilities
• user-select has no effect on before/after pseudo elements #27276: user-select has no effect on before/after pseudo elements
• Re-add carousel control transition #27277: Re-add carousel control transition
• Carousel fade cleanup #27278: Carousel fade cleanup
• Fix Edge bounce and restore original transition easing #27279: Fix Edge bounce and restore original transition easing
• optimize data URIs #27284: optimize data URIs
• Use the hover mixin in the outline button variant mixin #27289: Use the hover mixin in the outline button variant mixin
• Add new .rounded-pill utility #27339: Add new .rounded-pill utility
• Fixes the variables for input font size #27342: Fix the variables for input font size
• Adds font weight options for form controls and custom select #27343: Add font weight options for form controls and custom select
• Made the disabled state for nav more obvious. #27382: Made the disabled state for nav more obvious.
• Fixing #26372: disabled btn hover issue #27407: Fix When buttons is disabled and gradients are enabled, hover state changes background #26372, disabled btn hover issue
• Custom select inconsistent paddings #27415: Custom select inconsistent padding
• Prevent active state border change #27511: Prevent active state border change
• Carousel crossfade > Prevent the background to be shown when transitioning #27529: Prevent the background from showing in carousel crossfade
• Fix empty custom-control-label alignment issue #27566: Fix empty custom-control-label alignment issue
• add .text-wrap class #27568: add .text-wrap class
• Avoid null value #27570: Avoid null value
• Add Sass variable for prefers-reduced-motion, add callout to affected components #27581: Add Sass variable for prefers-reduced-motion, add callout to affected components
• Fix modal positioning on Android #27592: Fix modal positioning on Android
• Add Noto Sans to the font stack #27596, Add quotes according to the stylelint rule #27771: Add Noto Sans to the font stack
• Minor/Docs: tweak accordion example heading level #27620: Tweak accordion example heading level
• Customize browse text of the custom file input with HTML #27651: Customize browse text of the custom file input with HTML
• Prevent text decoration skip ink and reorder comments #27673: Prevent text decoration skip ink and reorder comments
• Add support for custom-select sizing in input-group #27677: Add support for custom-select sizing in input-group
• Fixed a fixed height issue of input-group size option #27687: Fixed a fixed height issue of input-group size option
• [Dropdown] Add border-radius to dropdown items #27703: Add border-radius to dropdown items
• Grow button width to the parent button group #27717: Grow button width to the parent button group
• Make form grid gutter width configurable #27766: Make form grid gutter width configurable
• Remove redundant brackets #27768: Remove redundant brackets
• Remove now unnecessary -ms-viewport and -ms-overflow-style directives #27789: Remove now unnecessary -ms-viewport and -ms-overflow-style directives
• Custom control gutter fix #27797: Custom control gutter fix
• Add missing $gutter parameter (with default value) to grid mixins. #27841: Add missing parameter to grid mixins.

JS

• Allow to use Tooltips/Popovers in Shadow DOM #25150: Allow to use Tooltips/Popovers in Shadow DOM
• Fix tab.js Problem #25384: allow to remove tabs without error
• Add touch support in our carousel #25776, Add more carousel tests and improve coverage #27539: Add touch support in our carousel
• feature(carousel): carousel-item interval #26667: Add the ability to assign data-interval to an individual carousel-item
• Allows both OL and UL lists for tab buttons #26702: Tabs - Use the correct selector for both ol and ul lists
• Ensure calling dispose on a popover will not set the title of the popover next time it is created #26848: Ensure calling dispose on a popover will not set the title of the popover next time it is created
• collapse children with no data-parent #27202: Collapse children with no data-parent
• throw error when folks try to use a bad selector #27213: Throw an error when people try to use a bad selector
• Add license headers in js/dist files #27308: Add license headers in js/dist files
• remove useless iife #27314: Remove useless IIFE
• Added 'show' and 'hide' methods to dropdown #27370: Add show and hide methods to dropdown
• Refactor Modal.dispose and add test #27455, fix dispose modal unit test #27563: Modal - test dispose and fix initialization of _isTransitioning
• test(Modal): reuse Modal.prototype._getScrollbarWidth in tests #27472: Use Modal.prototype._getScrollbarWidth in tests
• Fix typo in the Popper.js checks. #27488: Fix typo in the Popper.js checks
• calculate modal transition duration based on modal-dialog element #27521: calculate modal transition duration based on modal-dialog element
• Fix tab fade out #27533: fix tab fade out
• handle detached tooltip when we try to hide a modal #27578: handle detached tooltip when we try to hide a modal
• Fix body scrolling issue when modal open #27698: Fix body scrolling issue when modal is open
• fix regression about using element for tooltip container option #27773: Fix regression about using element for tooltip container option
• Add aria-modal to modals #27780: Add aria-modal to modals
• Remove nonsensical boolean check #27787: Remove nonsensical boolean check
• Change button checkbox/radios to ignore hidden input fields #27802: Change button checkbox/radios to ignore hidden input fields
• Add integration tests to make sure Bootstrap can be bundled properly #27828: Add integration tests to make sure Bootstrap can be bundled properly

Docs

• Improve documentation pagination accessibility #26355: Improve documentation pagination accessibility
• Update browsers-devices.md #26966: Update Browsers & Devices page to reflect our changes in .browserslistrc from v4.1.3
• Fix responsive highlight width #26973: Fix the width on the docs' search results on hover
• Add new docs Versions page #26989: Add new docs Versions page
• Fix #26990 broken external example #26999: Fix popover/tooltip selector option example broken
• More path fixes and doc tweaks #27015: More path fixes and doc tweaks
• fix(util): use getElementById when it's possible #27031, fix(util): use querySelector for ids #27053, add information about valid selectors #27137: Add information about valid selectors
• Add breadbrumb in docs search results #27115: Add breadcrumb in docs search results
• Remove certain Chromium entries from Wall of Bugs #27168: Remove certain Chromium entries from Wall of Bugs
• Move media from layout to components #27206: Move media from layout to components
• Remove background-colors example and show only the code. #27209: Remove background-colors example and show only the code
• docs: switch to font-weight 600. #27226: Update font-weight: 500 to font-weight: 600 because Segoe UI on Windows doesn't have a 500 weight.
• docs: use the bundle dist file. #27228: docs: use the bundle dist file
• Use https in more places and fix a few redirects. #27229: Use https in more places and fix a few redirects
• Document input group wrapping behavior and override via utility class #27257: Document input group wrapping behavior and override via utility class
• Clarify docs for custom form structure #27258: Clarify docs for custom form structure
• use bsCustomFileInput in our documentation #27264: use bsCustomFileInput in our documentation
• Change erroneous documentation for .flex-fill #27265: Change erroneous documentation for .flex-fill
• Adds a note about limitations on content being larger than the image #27321: Add a note about limitations on content being larger than the image
• refine deprecated holder.js color syntax #27400: refine deprecated holder.js color syntax
• Rename everything to skippy and center skippy #27420: Rename everything to skippy and center skippy
• Clean up docs Sass code. #27443: Clean up docs Sass code.
• Combine examples and simple layouts #27444: Combine examples and simple layouts
• webpack page: Remove precss reference #27484: Remove precss reference in webpack page
• download page: add Yarn #27544: download page: add Yarn
• Remove the obsolete tooltip-viewport example and redirect it. #27546: Remove the obsolete tooltip-viewport example and redirect it.
• Make meaning of tooltip's 'selector' option more clear #27573: Make meaning of tooltip's selector option clearer
• Add japanese to translations #27599: Add Japanese to translations
• Increase readability card columns docs #27609: Increase readability card columns docs
• Docs: Improve accessibility of disabled link example #27614: Improve accessibility of disabled link example
• Replace holder.js with inline SVG #27633: Replace holder.js with inline SVG
• Redirect /extend/ to /extend/approach/. #27641: Redirect /extend/ to /extend/approach/
• Replace data-src with src="..." in docs. #27649: Replace data-src with src="..."
• docs: image updates #27672: Use an SVG for the homepage stack image and srcset for the non-vector images
• Update autoprefixer link to .browserslistrc file #27675: Update autoprefixer link to .browserslistrc file
• Add documentation about .text-decoration-none #27686: Add documentation about .text-decoration-none
• Use wrapping span instead of div #27695: Use wrapping span instead of div in anchors
• docs: fix path to assets. #27696: docs: fix path to assets
• reboot: Fix mailto address #27700: reboot: Fix mailto address
• Placeholders: use our gray colors #27701: Placeholders: use gray colors instead of old holder.js color defaults
• Sass precision documentation #27705: Document Sass precision
• Update DocSearch.js to latest version #27710: Update DocSearch.js to latest version
• Update Scrollspy doc to include missing method options #27754: Add missing Scrollspy method options
• Update grid doc for consistent use of container wrapper. #27776: Update grid doc for consistent use of container
• Update docs vendor JS #27810: Update clipboard.js to v2.0.4 and bs-custom-file-input to v1.3.1
• SVG accessibility fixes #27826: SVG accessibility fixes

Examples

• Example dashboard: Responsive padding-top of the main content #26332: Example dashboard: Responsive padding-top of the main content
• Flexbox based sticky footer example #26674: Rebuild the sticky footer example with flexbox and our utility classes
• Improve grid example #26808: Improve grid example
• Switch to .btn-secondary for the search button so that it's accessible #27255: Switch to .btn-secondary for the search button so that it's accessible
• Remove custom properties from examples so that they work in IE #27634: Remove custom properties from examples so that they work in IE
• prevent text selection for floating labels example #27719: prevent text selection for floating labels example
• 339311d: fix invalid selector

Build / Meta

• Add transition to property-blacklist #26922: Add transition to property-blacklist
• Update devDependencies and gems. #26960, Update devDependencies and gems. #27043, Update devDependencies and gems. #27103, Update devDependencies. #27130, Update devDependencies. #27199, Update devDependencies and gems #27367, Update devDependencies and gems. #27446, Update devDependencies and gems. #27540, Update devDependencies and gems. #27584, Update devDependencies and gems. #27637, Update devDependencies. #27764: Update devDependencies and gems
• Move to BrowserStack #27007: Move to BrowserStack
• package.json: be more explicit with the files we include. #27013: package.json: be more explicit with the files we include
• add babel plugin proposal object rest spread to our dev deps #27056: add babel plugin proposal object rest spread to our devDependencies
• Refactor karma config #27217: Refactor karma config
• Switch to find-unused-sass-variables for finding unused Sass variables. #27251: Switch to find-unused-sass-variables package for finding unused Sass variables
• Make release-zip include the root folder. #27272: Make release-zip include the root folder
• Tweak build/build-plugins.js. #27318: Tweak build/build-plugins.js
• Tighten stylelint config. #27336: Tighten Stylelint config
• Rename docs production script to production. #27410: Rename docs production script to production and use JEKYLL_ENV
• Add a release npm script. #27413: Add a release npm script
• Remove sri-toolbox dependency. #27414: Remove sri-toolbox dependency
• Delete sache.json #27530: Delete sache.json
• Jekyll: switch to localhost #27552: Jekyll: switch to localhost
• Remove htmllint. #27603: Remove htmllint
• Reorganize npm scripts. #27604: Reorganize npm scripts
• Jekyll: Add wdm gem for Windows. #27658: Jekyll: Add wdm gem for Windows
• enforce lowercase class name in .stylelintrc #27668: Enforce lowercase class name in .stylelintrc