It's very strange to see the word beta in a ship list title, but oh so awesome!
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 Inconsistency in variable naming pattern V4 #22414 Standardize header, footer, and content language #22092
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.
CSS
Remove unused scss variables #21579 [v4 css] Collapsed navbar toggle moves to awkward position #21590 Centering Logo with Alpha 6 Navbar #21605 Fix container within navbar on smallest breakpoint #21722 Segmented buttons broken in Alpha 6 docs #21593 <input type="date"> inside .input-group renders incorrectly in Chrome. #21651 fix segmented buttons #21716 _custom.scss should be the first include #21603 _custom.scss file, moving it back to the top before variables and mixins again..navbar-brand is too wide #21621 Add align self to navbar brand #21626 .navbar-brand from growing too wide.<a> button :focus styles not overridden correctly. #21625 v4: Remove focus styles from anchors in Reboot #21633 :focus state of links the same styles as the :hover state in Reboot.Remove filter: alpha(opacity = 0); #21648 filter from custom forms given dropping of IE9.Remove list-group-item-heading and list-group-item-text #21653 Navs not wrapping? #21660 Allow flex-based navs to wrap like they used to #21824 flex-wrap: wrap to .navs so they behave like they used to before the move to flexbox.btn-toolbar - btn-group - content doesn't fit to content on mobile view #21699 Allow button toolbars to wrap #21826 flex-wrap: wrap to button toolbars to restore previous behavior.Rename order utilities to intended class names #21739 order utilities.Drop Normalize.css in v4 #21740 Drop Normalize, port relevant parts to Reboot #21741 btn-group-vertical gaps with labels toggle buttons #21793 Fix gaps between vertical grouped buttons when using labels (#21793) #21796 <label>-based buttons in button groups.Progress line height #21805 line-height to height in progress bars.Remove cursor: pointer; #21812 cursor: pointer.Pixel perfect navbar toggler #21821 Update _custom.scss imports in other builds #21825 Remove vendor prefixes from appearance: none. #22039 appearance: none.Remove 'hover' from nav-tabs-active-link-hover-color et al #22073 Remove 'hover' from nav-tabs-active-link-hover-color et al #22087 -hover from the $nav-tabs-active-link-hover-* variables as it no longer applies to the hover state.Select uses wrong border variable for height calculation #22011 Fix border width calculation for custom-select #22068 Change sticky order #22027 z-index order for sticky and fixed elements.hidden class added by Modernizr causes blank page when combined with bootstrap #21762 Rename responsive utilities to visibility utilities #21965 Overhaul responsive, display, and visibility utilities #22113 .hidden-* classes in favor of our newer .d-* display utilities. Rewrote some docs and consolidated CSS, too.Audit spacer variables #21836 Update spacer utilities #22123 Clean up spacers a bit more #22125 $spacer-x and $spacer-y, consolidating into just one $spacer and the Sass map.Mixins in scss/_mixins.scss make importing into CodePen hard #22012 Move box-shadow and transition mixins out of the main mixins file #22124 Use btn-$variant-color variables for outlined btns #22164 Inconsistent button/dropdown outline #17573 Dropdown focus #21977 Flex display on list group items causing incorrect spacing within #21584 display: flex from .list-group-items to avoid unexpected layout glitches. Instead, use utilities as needed..nav-fill and .nav-justified don't work on the div-based navs #21927 .nav-justified to fix the broken styles; also update docs examples for <nav>-based variants.Update _screen-reader.scss #22154 sr-only mixin and class to use latest clipping technique.v4 table updates #22217 v4 grid tweaks #22271 position: relative from .container, fix broken only and between mixins, and give .col-auto classes some horizontal padding.Card images distorted #21650 Card image fixes #22288 Card Deck - Flexbox: Set images per card-deck row. (Good in A5. Broken in A6) #21976 card-deck, Mobile screen, Unexpected margins behavior and separations in rows #22007 Fix wrapping card decks #22289 Revamp button and input vars while fixing #21587 #22287 $btn- and $input- variables for padding and line-height to be shared like the $input-btn-border-width variable. Also increases $line-height-lg and adds a line-height parameter to the button-size mixin.(v4) unable to override popover text color #22153 ability to change text color in popovers #22221 color.Add dropdown-item-padding-y var #22387 .dropdown-item-padding-y variable.Add transition to .progress-bar #22386 Carousel fixes #22392 Card headers / footers not inheriting styling from .card-outline-variant #22056 Update card outline mixin #22394 .card-columns .card should have margin-bottom regardless of screen size #22135 Always apply margin to cards in columns #22393 margin-bottom to cards in .card-columns.Remove cursor: not-allowed styles #22403 cursor: not-allowed styles.Package grunt #22396 fix popover arrow color #22433 Rename variable $input-border-focus to $input-border-color-focus #22413 border-color to include color in their namesAdd shim for "new" HTML5 structural elements #22573 Removed several unused scss variables #22539 Dropdown must be displayed in position static for navbar, to override Popper css #22630 fix(css): force .navbar .dropdown-menu positioning #22644 Add box-shadow to .progress-bar #22579 Rename $navbar-*-toggler-bg to $navbar-*-toggler-icon-bg since it's placed on .navbar-toggler-icon #22564 $navbar-*-toggler-bg to $navbar-*-toggler-icon-bg.Rename $card-border-radius-inner to $card-inner-border-radius #22741 $card-border-radius-inner to $card-inner-border-radius.Fix overflowing text in Cards with word-wrap: break-word #22740 word-wrap: break-word.Inconsistency in variable naming pattern V4 #22414 Rename $font-size-h* to $h*-font-size for consistency (#22414) #22805 Rename for consistency $table-sm-cell-padding, $table-bg-accent, $table-bg-hover, $table-bg-active, $table-inverse-bg-accent, $table-inverse-bg-hover to $table-cell-padding-sm, $table-accent-bg, $table-hover-bg, $table-active-bg, $table-inverse-accent-bg, $table-inverse-hover-bg, respectively (#22414) #22806 (#22414) Rename for consistency $input-bg-disabled, $input-bg-focus, $input-border-color-focus, $input-box-shadow-focus, $input-color-focus, $input-color-placeholder to $input-disabled-bg, $input-focus-bg, $input-focus-border-color, $input-focus-box-shadow, $input-focus-color, $input-placeholder-color, respectively #22807 (#22414) Rename for consistency `$custom-control-disabled-indicator-b… #22808 (#22414) Renamed for consistency $nav-disabled-link-color, `$nav-ta… #22809 (#22414) Renamed for consistency $modal-dialog-sm-up-margin-y, `$mo… #22810 Mention variable naming scheme in source files #22814 (Fixes #22414) Rename for consistency $custom-checkbox-radius, `$cu… #22818 (#22414) Rename for consistency $list-group-link-*-* to `$list-grou… #22843 Standardize header, footer, and content language #22092 Rename .card-block to .card-body #22828 Rename popover classes #22829 v4: Colors redux #22836 Unship grid gutters #22940 $grid-gutter-widths Sass map. It generated the wrong code and is no longer the method we'd prefer for setting custom grid gutters. A replacement will come soon.Update browser support #22943 Drop offsets and push/pull for new order variants #22942 .order- modifiers and margin utilities.Redesign blockquote #22949 .blockquote-reverse.Card styles #22950 .bg-, .text-, and .border- utilities for greater flexibility.Small reorg to rearrange utilities SCSS and docs #22961 _responsive-helpers.scss in the process.Ability to choose how much darker the button is on active #19353 Button mixin update #22966 Remove box-shadow from .btn-link:focus #22998 box-shadow from .btn-link:focusRemove ::first-letter and ::first-line selectors from print styles #23044 ::first-letter and ::first-line selectors from print styles
JS
Use existing key code constants in dropdown #21697 Carousel: fix reference to non-existing constant #21709 Direction.PREV constant.v4 list-group not work correctly with tabs #20620 Allow to use Tab.js with list-group #21756 Dropdowns don't close when tapping outside the menu on mobile #21572 Fix backdrop for dropdown menu on mobile #21578 Dropdown: jQuery throws with empty ID selector #21328 Fix getSelectorFromElement when # is a selector #21615 # in data-targets to avoid throwing errors.Stop using HTMLElement.offset* properties? #19774 HTMLElement.offset* by getBoundingClientRect() #21788 HTMLElement.offset* by getBoundingClientRect().Detach accordion from card #22138 Reverse #22138 and detach accordion from card without requiring 'data-children' #22251 Carousel - Add attributes from and to for Slid and Slide events #21668 from and to for Slid and Slide eventsCollapse - do not prevent event for input #22272 Collapse - Fix check to not prevent event for input and textarea #22297 Fix different tooltips offset when hovering #22276 Fix JS components console error "Error: <Component> is transitioning" #21743 Popover + Tooltip - fix error when content or title is a number #22316 Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...) #21807 Rewrite Modals.setScrollbar() and Modals.resetScrollbar() to properly handle padding-right of body and fixed elements #18441 Fix #22332: Adjust tests for hidden scrollbar #22337 Prevent default for ESC in modal.js #22398 Only change aria-pressed if it's not an input-based radio or checkbox group #22400 aria-pressed if it's not an input-based radio or checkbox groupFix collapse.js aria-expanded behavior #22397 aria-expanded behaviorremove dropdown.js reliance on roles and fix keyboard navigation #21535 Replace dropdown backdrop hack with cleaner JS-only hack #22426 Tweak iOS hack for dropdown #22482 Fix carousel "hover" behavior on touch-enabled devices #22442 Add iOS hack to tooltips #22481 Fix for copy/paste error in iOS hack to tooltips #22483 Fixed #21237 - Toggle buttons don't honor [disabled] or .disabled #22499 Fix typo #22480 removeData for Tabs pluginv4 - Remove Tether for Popper #22444 Use popper to align dropdown menu instead of using css with important #22640 Better management of dropdown/dropup with alignment #22664 Use Popper.js to manage arrow position #22681 Update Popper.js to 1.11.0 #23162 Placement auto for Tooltips and Popovers #22687 Collapse supports multi-target #22713 Add semicolon for our dist files in stamp.js #23182
Docs
Build tooling
Packaging
It's very strange to see the word beta in a ship list title, but oh so awesome!
Highlights
.navbar-expandinstead of.navbar-toggleable, remove toggler position modifiers (relies on flex utils now), and fix a handful of bugs..order-modifiers and margin utilities.cursor: pointers to restore browser defaults and better indicate actions vs hyperlinks.orderutilities to better match utility naming scheme of.property-value._custom.scssin our import order.peerDependenciesas they're not requirements for every part of Bootstrap.CSS
_custom.scssfile, moving it back to the top before variables and mixins again..navbar-brandfrom growing too wide.:focusstate of links the same styles as the:hoverstate in Reboot.filterfrom custom forms given dropping of IE9.flex-wrap: wrapto.navs so they behave like they used to before the move to flexbox.flex-wrap: wrapto button toolbars to restore previous behavior.orderutilities.<label>-based buttons in button groups.line-heighttoheightin progress bars.cursor: pointer;#21812: Removecursor: pointer.appearance: none.-hoverfrom the$nav-tabs-active-link-hover-*variables as it no longer applies to the hover state.z-indexorder for sticky and fixed elements..hidden-*classes in favor of our newer.d-*display utilities. Rewrote some docs and consolidated CSS, too.$spacer-xand$spacer-y, consolidating into just one$spacerand the Sass map.display: flexfrom.list-group-items to avoid unexpected layout glitches. Instead, use utilities as needed..nav-justifiedto fix the broken styles; also update docs examples for<nav>-based variants.sr-onlymixin and class to use latest clipping technique.position: relativefrom.container, fix brokenonlyandbetweenmixins, and give.col-autoclasses some horizontal padding.$btn-and$input-variables forpaddingandline-heightto be shared like the$input-btn-border-widthvariable. Also increases$line-height-lgand adds a line-height parameter to thebutton-sizemixin.color..dropdown-item-padding-yvariable.margin-bottomto cards in.card-columns.cursor: not-allowedstyles #22403: Removecursor: not-allowedstyles.border-colorto includecolorin their names$navbar-*-toggler-bgto$navbar-*-toggler-icon-bgsince it's placed on .navbar-toggler-icon #22564: Rename$navbar-*-toggler-bgto$navbar-*-toggler-icon-bg.$card-border-radius-innerto$card-inner-border-radius#22741: Rename$card-border-radius-innerto$card-inner-border-radius.word-wrap: break-word#22740: Fix overflowing text in Cards withword-wrap: break-word.$font-size-h*to$h*-font-sizefor consistency (#22414) #22805, Rename for consistency$table-sm-cell-padding,$table-bg-accent,$table-bg-hover,$table-bg-active,$table-inverse-bg-accent,$table-inverse-bg-hoverto$table-cell-padding-sm,$table-accent-bg,$table-hover-bg,$table-active-bg,$table-inverse-accent-bg,$table-inverse-hover-bg, respectively (#22414) #22806, (#22414) Rename for consistency$input-bg-disabled,$input-bg-focus,$input-border-color-focus,$input-box-shadow-focus,$input-color-focus,$input-color-placeholderto$input-disabled-bg,$input-focus-bg,$input-focus-border-color,$input-focus-box-shadow,$input-focus-color,$input-placeholder-color, respectively #22807, (#22414) Rename for consistency `$custom-control-disabled-indicator-b… #22808, (#22414) Renamed for consistency$nav-disabled-link-color, `$nav-ta… #22809, (#22414) Renamed for consistency$modal-dialog-sm-up-margin-y, `$mo… #22810, Mention variable naming scheme in source files #22814, (Fixes #22414) Rename for consistency$custom-checkbox-radius, `$cu… #22818, (#22414) Rename for consistency$list-group-link-*-*to `$list-grou… #22843: Rename dozens of variables for consistent naming scheme.$grid-gutter-widthsSass map. It generated the wrong code and is no longer the method we'd prefer for setting custom grid gutters. A replacement will come soon..order-modifiers and margin utilities..blockquote-reverse..bg-,.text-, and.border-utilities for greater flexibility._responsive-helpers.scssin the process.box-shadowfrom.btn-link:focus::first-letterand::first-lineselectors from print stylesJS
Direction.PREVconstant.#indata-targets to avoid throwing errors.HTMLElement.offset*bygetBoundingClientRect().fromandtofor Slid and Slide eventsaria-pressedif it's not aninput-based radio or checkbox grouparia-expandedbehaviorremoveDatafor Tabs pluginDocs
<hr>s in alerts..cards for accordion behavior.aria-labelto placeholder-only inputsrole="tabpanel"from navs docsrole="listbox"from carousels<button>s in copy buttons<input ... readonly>for static form controls example)<main>element to documentationrole="main"to<main>elementsBuild tooling
htmllinttask to npm scripts.jekylltask to npm scripts.Packaging
v4-devbranch.peerDependencies.