Description Highlights
New vertically centered modal option in Add .modal-dialog-centered for optional vertically centered modal #24510 .
Added new dropleft and dropright variants for dropdowns in Add dropright and dropleft (right and left placements for our dropdown) #23860 .
Rewrote background-images for custom checkboxes and radios to account for better multiple backgrounds. Now the opt-in background-image gradient is on the .custom-control-indicator and the icon is a pseudo-element, .custom-control-indicator::before.
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.
Input groups rewritten to have specific .input-group-{prepend|append} classes, support validation styles and messages, and add custom select and file support.
Rewrite and unify default and custom checkboxes and radios to have simpler markup, un-nesting the inputs from the labels so we can style the label based on the input's state. This is essential for form validation and disabled inputs.
Responsive tables are once again parent classes to avoid a11y issues with changing a <table>'s display.
Print styles have moved to bottom of the import stack to properly override styles.
Restored cursor: pointer to non-disabled buttons, .close, navbar toggler, and pagination links.
CSS
Convert px values to rem on tooltip variables #23468 : Convert tooltip units to rem.
v4 - Modal align vertical center #23638 , Add .modal-dialog-centered for optional vertically centered modal #24510 : Add new .modal-dialog-centered modifier to vertically center shorter modals.
Consider alternative method of styling toggle buttons (don't use data-toggle="buttons" for styling) #23728 , Make styling of grouped option buttons class-based #24733 : Change selector for styling input-based button groups.
Converts modal px units to rem #23782 : Convert modal's px units to rem.
Outline button hover should apply same darken as filled button. #24144 , Darken outline hover color to match default button hover #24150 : Add ability to customize outline button hover state via mixin with two additional parameters.
Custom Checkboxes/Radios Do Not Display Correct Color on :focus For Validation #24173 , Issue #24173 Custom checkboxes radios correct color #24401 : Fix validation focus styles for custom checks and file inputs.
Add support for fractional viewport widths (zoom/high-dpi displays) #24299 : Add support for fractional viewport widths (zoom/high-dpi displays).
Reduce z-indexes in button-group, input-group, list-group, and pagination to the minimum necessary #24315 : Reduce z-indexes in button-group, input-group, list-group, and pagination to the minimum necessary.
Removes margin for pre on _code.scss since it's already set on _reboot.scss #24366 : Remove margin for pre in _code.scss since it's already set in _reboot.scss.
Add variable to configure the $dropdown-border-radius. #24376 : Added variable for $dropdown-border-radius.
Refactor a few selectors. #24404 : Refactor a few selectors.
Add vars for yiq color contrast function #24426 : Added two new variables for our color contrast function, $yiq-text-dark and $yiq-text-light, for easier customization.
Remove background-image: none; on .form-control #24454 : Remove background-image: none; on .form-control.
Add input group support for custom selects and custom files #24455 : Add support for custom selects and file inputs to input groups.
Adds animation to color on outlined btns #24465 : Add animation to color on outlined btns
Remove thumbnail-transition from .img-thumbnail. #24467 : Remove unused transition from .img-thumbnail (and it's associated variable).
Dismissible alert - long text overlaps close button #24469 , Fix for right padding in dismissible alerts #24481 : Fix padding on dismissible alerts to prevent overlapping close button.
.form-control-plaintext not 100% width #24473 , match form-control width to form-control-plaintext #24486 : Match .form-control-plaintext display and width to the .form-control.
Card headers and footers maintain border radius inside a card group #24488 , fix card-group border radii #24491 : Round corners of card headers and footers in card groups.
Vertical button style radios/checkboxes bottom label margin not removed #24496 , fix vertical input button group margin #24498 : Remove margin-bottom on <label>-based buttons in button groups.
Variable $enable-rounded doesn't disable border-radius in buttons #24503 , Add fallback border-radius to .btn #24505 : Override the border-radius on all .btns when $enable-rounded is disabled.
Custom-select doesn't support single select with size attribute set above 1 #24504 , .c-select-sm and .c-select-lg missing #20316 , Add a mention and/or example of .custom-select-sm to Custom Select section #23823 , Custom Select Border and Custom File Browser when active or focus not displaying properly #24597 , Custom select updates #24699 : Improve custom selects and document their sizes.
Horizontal rule hard-coded margin introduced in Beta #24517 , Adds margin variables for the hr element #24520 : Add margin variables for the hr element.
Progress bar doesn't handle 0% case #24538 , Progress bar text #24544 : Improve .progress-text rendering for 0% use case.
valid/invalid custom select reverts to default border color on focus #24553 , Custom select focus border #24695 : Override the border-color on .custom-select:focus when the form control is valid or invalid.
Custom Radio and Checkbox broken when $enable-gradients is true #24598 , Rewrite custom form check backgrounds #24697 : Rewrite custom checkbox and radio backgrounds.
Removes hardcoded colors references on variables.scss #24603 : Remove hardcoded colors references in our variables for colors, tabs, and more.
Changes $list-inline-padding from px to rem #24618 : Convert .list-inline padding to rem units.
z-index of custom file input #24632 , Reduce custom file z-index #24633 : Reduce z-index on custom file input.
Nav Tabs use single variable to style `$nav-tabs-link-hover-border-co… #24639 : Add new variable to consolidate border variables on nav tabs.
V4.beta.2 missing transition for progress-bar #24643 , Restore .progress-bar transition #24694 : Restore transition on .progress-bar.
Move hardcoded opacity value in .btn:disabled to variable `$btn-dis… #24680 : Add new variable for disable button opacity.
Adds underline back to btn-link on focus #24723 : Add underline back to btn-link on focus.
Fix nested cards on card group #24766 : Fix nested cards on card group.
Adds variables for form validation messages #24767 : Add variables for form validation messages.
Fixes centered modal vertical overflow #24803 : Improve support for vertically centered modals.
adds hover state to the button element for background color utilities #24813 : Add hover state to <button> elements for .bg- utilities to match <a> elements.
Adds variable for color yiq threshold #24886 : Adds variable for color yiq threshold.
Feature request: col-form-label should have optional size classes #24917 , Remove .col-form-legend in favor of .col-form-label #24932 : Drop .col-form-legend in favor of .col-form-label, enabling size modifier classes to be used on <legend> elements.
Rewrite input group component #25020 : Rewrite input group component with specific prepends/appends, form validation, and more custom control support.
Form check markup v2 #25050 : Rewrite and unify default and custom checkboxes and radios to have simpler markup, un-nesting the inputs from the labels so we can style the label based on the input's state. This is essential for form validation and disabled inputs.
Restyle code element, remove docs example overflow, improve docs examples #25054 : Made file inputs 100% wide, updated examples in docs to prevent horizontal scrolling.
Restore .table-responsive as a parent class #25058 : Responsive tables are once again parent classes to avoid a11y issues with changing a <table>'s display.
Full width custom select and file inputs #25059 : Make custom selects and custom files full width to match their browser defaults.
Fix tooltip/popover arrow size and position #25062 : Refactor tooltip and popover arrow sizing and positioning.
Update SCSS import order to have print styles last #25064 : Update SCSS import order to have print styles last.
Darken table border-color #25066 : Darken table border-color to avoid matching with background-color.
Rewrite custom file input #25068 : Rewrite custom file input to move <label> to sibling of <input> and replace outer wrapper with a <div>, matching other inputs. Also adds validation support.
Opinionated: reintroduce cursor:pointer #25082 : Restored cursor: pointer to non-disabled buttons, .close, navbar toggler, and pagination links.
Update button focus and active styles #25070 : Separated .btn focus and active styles so that multiple .active buttons do not appear to all have focus.
Set cursor:pointer for <summary> #24630 : Set cursor:pointer for <summary>.
JS
Docs
Build tools
Packaging
Reactions are currently unavailable
You can’t perform that action at this time.
Highlights
.modal-dialog-centeredfor optional vertically centered modal #24510.background-images for custom checkboxes and radios to account for better multiple backgrounds. Now the opt-inbackground-imagegradient is on the.custom-control-indicatorand the icon is a pseudo-element,.custom-control-indicator::before.node_modulesfolder, you'll need to update your build tools..input-group-{prepend|append}classes, support validation styles and messages, and add custom select and file support.<table>'sdisplay.cursor: pointerto non-disabled buttons,.close, navbar toggler, and pagination links.CSS
.modal-dialog-centeredfor optional vertically centered modal #24510: Add new.modal-dialog-centeredmodifier to vertically center shorter modals.preon _code.scss since it's already set on _reboot.scss #24366: Remove margin forprein _code.scss since it's already set in _reboot.scss.$dropdown-border-radius. #24376: Added variable for$dropdown-border-radius.$yiq-text-darkand$yiq-text-light, for easier customization.background-image: none;on.form-control.thumbnail-transitionfrom.img-thumbnail. #24467: Remove unusedtransitionfrom.img-thumbnail(and it's associated variable)..form-control-plaintextdisplay and width to the.form-control.margin-bottomon<label>-based buttons in button groups.border-radiuson all.btns when$enable-roundedis disabled.hrelement..progress-textrendering for0%use case.border-coloron.custom-select:focuswhen the form control is valid or invalid..list-inlinepadding to rem units.z-indexon custom file input..progress-bar..btn:disabledto variable `$btn-dis… #24680: Add new variable for disable buttonopacity.btn-linkon focus #24723: Add underline back tobtn-linkon focus.buttonelement for background color utilities #24813: Add hover state to<button>elements for.bg-utilities to match<a>elements..col-form-legendin favor of.col-form-label, enabling size modifier classes to be used on<legend>elements.<table>'sdisplay.border-colorto avoid matching withbackground-color.<label>to sibling of<input>and replace outer wrapper with a<div>, matching other inputs. Also adds validation support.cursor:pointer#25082: Restoredcursor: pointerto non-disabled buttons,.close, navbar toggler, and pagination links..btnfocus and active styles so that multiple.activebuttons do not appear to all have focus.cursor:pointerfor<summary>#24630: Setcursor:pointerfor<summary>.JS
transitionEndproperties.jQuery.noConflictmodecontentonce if it's a function.Util.getSelectorFromElement.Docs
max-heighttoheightin documentation sidebars.navbar-expand-smin our navbar bottom example for small devices.site.descriptioninstead ofpage.descriptionin meta description.table-rowin documentation #24551: Addtable-rowin documentation.role="button"#24725: Add missingrole="button"in collapse examples.smartifyfilter when possible.<nav role="tablist">in docsBuild tools
function-comma-space-after. #24501: Enable stylelint'sfunction-comma-space-after.dist/css/*.min.cssfiles. #24676: Don't run postcss fordist/css/*.min.cssfiles.Packaging
bower.jsonfile entirely instead of providing a comment inside.