NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →
npm · #3571 most downloaded on npm
The most popular front-end framework for developing responsive, mobile first projects on the web.
Last release 1 years ago
26 Aug 2025
Release timing varies
gaps range from 9 days to 1.1 years
Nearly every release is documented
notes for 20 of 20 stable releases
44 versions withdrawn
withdrawn after publishing
15 years old
68 releases · first in 2011
Streamline release prep script by @mdo in https://github.com/twbs/bootstrap/pull/41539
.bd-example class by @julien-deramond in https://github.com/twbs/bootstrap/pull/41556color-contrast() function for WCAG 2.1 compliance by @julien-deramond in https://github.com/twbs/bootstrap/pull/41585<Example> is used, not just <Code> by @louismaximepiton in https://github.com/twbs/bootstrap/pull/41582Full Changelog: https://github.com/twbs/bootstrap/compare/v5.3.7...v5.3.8
One column per quarter.
Fixed broken "View on GitHub" URLs
<head> content generated by the "Download examples" buttonintegrity and crossorigin attributes in introduction pageplaceholder usage description'none' values in the box-shadow Sass mixin for cleaner outputtrigger: "hover click" configurationdocs: add Sass deprecations notice in docs by @MaxLardenois in https://github.com/twbs/bootstrap/pull/41283
.visually-hidden overflowing children to become focusable.card-group selectors to immediate children to fix some inheritance issuesnpm install and npm run dist in CONTRIBUTING.md by @mdo in https://github.com/twbs/bootstrap/pull/41340.card-group to immediate children to fix border-radius bug by @mscdex in https://github.com/twbs/bootstrap/pull/41298devDependencies by @julien-deramond in https://github.com/twbs/bootstrap/pull/41383image-size from 1.0.2 to 2.0.2 by @julien-deramond in https://github.com/twbs/bootstrap/pull/41384.md and .mdx files. by @Jason3S in https://github.com/twbs/bootstrap/pull/41398files configuration from .cspell.json by @julien-deramond in https://github.com/twbs/bootstrap/pull/41400// Private comment and method by @MohamadSalman11 in https://github.com/twbs/bootstrap/pull/41218Full Changelog: https://github.com/twbs/bootstrap/compare/v5.3.5...v5.3.6
Hot fix for a regression from upstream in Autoprefixer.
Hot fix for a regression from upstream in Autoprefixer.
Full Changelog: https://github.com/twbs/bootstrap/compare/v5.3.4...v5.3.5
## Changes - #40888: Dependabot: switch to grouped updates ## 🚀 Features - #41299: Typo fixed - #41187: Docs: mention removal of util.js in migration
util.js in migration guide<article> element for example cards.grid where it shouldn't be used.order-* classes in 'Layout > Columns'.justify-content-start class in homepage.bi-exclamation-triangle-fill classborder-radius rulemax-width and background-colorbtn-group-vertical by using same rules as btn-groupborder-radius ruleutil.js in migration guide<article> element for example cards.order values in the migration guide.grid where it shouldn't be used.order-* classes in 'Layout > Columns'.justify-content-start class in homepage$enable-css-grid → $enable-cssgrid in 'Customize > Options'$enable-css-grid in options.mdaria-hidden="true" to decorative SVGsaria-hidden='true' to decorative SVGs.bi-exclamation-triangle-fill classdata-bs-theme="light" in navbars color schemes markupimageConfigurls.JoinPath in more placesrel="noopener" target="_blank"data-bs-scroll="true" from navbarhugo.IsProduction<article> element for example cardsaria-hidden="true" to decorative SVGsaria-hidden='true' to decorative SVGsFixed a breaking change introduced with color modes where it was required to manually import variables-dark.scss when building Bootstrap with Sass. No…
variables-dark.scss when building Bootstrap with Sass. Now, _variables.scss will automatically import _variables-dark.scss. If you were already importing _variables-dark.scss manually, you should keep doing it as it won't break anything and will be the way to go in v6..text-bg-* text utilities to be certain that the text is always readable (especially when the customized colors are different in light and dark modes).color-modes.js script to handle the case where the OS is set to light mode and the auto color mode is used on the website. If you copied the script from our docs, you should apply this change to your own script.color-scheme() only accept light and dark values as parameters.<dl>, <dt> and <dd> in the sanitizer.--bs-accordion-btn-focus-border-color and deprecate $accordion-button-focus-border-colorcolor-mode.jsdl, dt and dd in sanitizer.text-bg-{color} for all badgesgetOrCreateInstance() doc example.table-light from table foot exampledispose() to Offcanvas methodsshift-color() usage example in sass customization page.card-img-* description.theme-icon classPassing a percentage unit to the global abs() is deprecated since Dart Sass v1.65.0. It resulted in a deprecation warning when compiling Bootstrap wit…
abs() is deprecated since Dart Sass v1.65.0. It resulted in a deprecation warning when compiling Bootstrap with Dart Sass. This has been fixed internally by changing the values passed to the divide() function. The divide() function has not been fixed itself so that we can keep supporting node-sass cross-compatibility. In v6, this won't be an issue as we plan to drop support for node-sass.ids in a collapse target wasn't working anymore and has been fixed.<mark> color customization for color modes.box-shadow CSS variables shadow utilities$btn-link-focus-shadow-rgb to allow customization<mark> dark mode bg colorids callsdetails element.left- and .right- utilities from migration guideIncreased color contrast for dark mode by replacing $gray-500 with $gray-300 for the body color
$gray-500 with $gray-300 for the body color.nav-links, providing .disabled and :disabled for use with anchors and buttonsHome and End keys for navigating tabs by keyboard.text-bg-* utilities now use CSS variables$navbar-dark-icon-color Sass variable$alert Sass variables$vr-border-width to customize the vertical rule helper width.text-bg-* helpers now use theme CSS variables$navbar-dark-icon-color$alert-*-scale Sass varsHome and End keys in tabsnoopener rel to footer external linksaria-disabled='true' to disabled anchorsaria-describedby.d-none instead of inline stylingclearfixHome and End keys in tabsaria-disabled='true' to disabled anchorscolor-modes.js to bootstrap-x.y.z-examples.zipv5.3.0 Compare # Choose a tag to compare
v5.3.0
Compare
Fixed wrong interpolated variables with node-sass/Hugo.
calc() functions.--bs-border-radius variables across more components..d-inline-grid utility class..tooltip-inner placement when using variations in fallbackPlacements.$color-mode-type: media-query.background-color to help with multiple lines of text in textareas. This also fixes the colors when form elements are disabled in floating forms.Full Changelog: https://github.com/twbs/bootstrap/compare/v5.3.0-alpha2...v5.3.0-alpha3
Updated numerous devDependencies: https://github.com/twbs/bootstrap/pulls?q=is%3Apr+label%3Adependencies+project%3Atwbs%2F13+is%3Aclosed
.nav-underline modifier class.nav-underline modifier class--bs-body-font-family. Keep quotes in the font stack.position: absolute for captions$prefix to the whole assets--bs-form-check-bg definition$color-mode-type is set to media-querycolor-scheme to dark root selectorproperty-blacklist to property-disallowed-list--bs-emphasis-color set valuescss/_maps.scss.highlight-toolbar def--bs-highlight-bg in scss/_root.scss.btn-clipboard and .btn-edit link hover color.bg-body-emphasis.link-body-emphasis helper_variables.scss--bs-body-bg-rgb declaration + reorder props$input-border-color variable.form-control in dark mode.*-text-emphasislist-style reset on .carousel-indicators*-text-emphasis CSS vars in Sass loop$grid-breakpoints SCSS unit tests initscss/_nav.scsscolor and border-color-moz-padding-start from .form-select$btn-close-focus-shadow definition$nav-link-disabled-color declaration--bs-focus-ring-box-shadow and add documentation for --bs-focus-ring-{x|y|blur}scss/_utilities.scss--bs-{color}-text was changed to --bs-{color}-text-emphasisimport inside bootstrap-gridoffcanvas keydown event logic with modalaria-labelledby in tab navigation.btn classcheck2 SVG iconfirstElementChild$prefix to the whole assetstwbs/bootstrap-npm-starter by twbs/examples/tree/main/icons-font.btn-*-dark from Button group docs to avoid issues in dark modetwbs/examples repo examples in the Examples pageid/aria-labelledby from accordion examples.highlight-toolbar def.btn-clipboard and .btn-edit link hover colorlist-group-item-variant() mixin.fw-medium utility class example.text-*-left changespopover to tooltip.text-muteddebug references from DocSearch v2.focused style--bs-focus-ring-box-shadow and add documentation for --bs-focus-ring-{x|y|blur}.text-muted deprecation messages.text-body-secondary appears two times in Utilities > Colorsbootstrap-social-logo.pngutilities/colors.mdhref and tabindex="-1"scss-docs: link enhancementscroll-margin-top instead padding and marginvar(--bs-emphasis-color)placeholder shortcode color and background params when 'img' markupv from docs-versions.ymlscss-docs unindent automatically the code inside shortcodeid/aria-labelledby from cheatsheet accordionstwbs/examples repo examples in the Examples pageposition: absolute for captionsaria-labelledby to associate form-text (helper) with input field when it contains mandatory info (e.g. data format)id/aria-labelledby from accordion examplesid/aria-labelledby from collapse unit testsaria-labelledby in tab navigation$grid-breakpoints SCSS unit tests init$grid-breakpoints SCSS unit tests initid/aria-labelledby from collapse unit testsdocs workflowUpdated numerous devDependencies: https://github.com/twbs/bootstrap/pulls?q=is%3Apr+label%3Adependencies+project%3Atwbs%2F13+is%3Aclosed
Full changelog: https://github.com/twbs/bootstrap/compare/v5.3.0-alpha1...v5.3.0-alpha2
Updated numerous devDependencies:
getSelector() to handle weird IDs (#35565)border-radius utilitiesfont-weight-medium (500) / fw-mediumz-index utilities, .z-*.alert-link.btn-closeborder-radius utilitiesfont-weight-medium (500) / fw-medium$enable-important-utilities condition in colored linksz-index utilities, .z-*--bs-border-width for some componentsborder-width on inputgroup and buttongroup--bs-body-font-family; keep quotes in the font stack$prefix to the whole assets--bs-form-check-bg definitionlist-group-border-width variables$color-mode-type is set to media-querygetElementFromSelector & getSelectorFromElementexecute function, being able to handle argumentsgetSelector not to be exportedreplaceAll usage introduced in #35566Object.entries in more placesprefer-template rule<kbd><button> for dropdown/popover examples, explain preference over <a> for dropdowns, tweak collapse prosecheck2 SVG iconfirstElementChild$prefix to the whole assets<button> for dropdown/popover examples, explain preference over <a> for dropdowns, tweak collapse prose## Fixes ### 🎨 CSS - #37377: Import root in bootstrap-utilities - #37425: Fix deprecation warning with sass 1.56.0 - #37266: Carousel: Fix RTL transla
translate() directionUse Sass variable for the accordion color instead of an invalid CSS variable
.btn:hover from v5.2.1. We now explicitly target .btn-check styles instead.data attribute (will be removed again in v6)<h1> for all .modal-title instances in our docs$border-color in table-variant() mixintab.show().active class toggling of tabs within dropdownsz-index on .toast-container as opposed to individual .toasts that don't receive any other positioningtitle attribute on dynamically created elements.btn-check and undo :hover$border-color in table-variant mixin<h1> for all modal-title examples/usesview in GitHub links inside main<h1> for all modal-title examples/usesUpdate color value to use the $accordion-button-color Sass variable instead of our color contrast function
color value to use the $accordion-button-color Sass variable instead of our color contrast functiontransparent default hover border color CSS variable for buttons to fix a visual regression.btn-link no longer has a gradient when $enable-gradients is set to truez-index values to ensure proper rendering of validated form fieldstext-align to ensure consistent stylingborder-radiuslist-group-item selectors to better support nested imports of Bootstrap's CSSborder-radius values inside pagination componentsselector, dynamic content, and disposed tooltips using titleoutline for docs code samples, buttons when :not(:focus-visible)$popover-header-color.text-centerz-index CSS variables..btn-link.form-checkbox -> .form-checkexamples/features page.outline for docs code samples, buttons when :not(:focus-visible)Updated numerous devDependencies:
smooth-scroll behaviorsmooth-scroll behavior.form-control-color sizing and styles.showingbtn-linkcustom-property-empty-line-before.table-group-divider border.dropdown-item border-radius when $dropdown-padding-y is 0readonly inputs as disabled--bs-headings-color CSS variable due to backward compatibility issues$text-muted default value.navbar-nav--bs-btn-disabled-border-color in button-outline-variant mixin$display-font-family and $display-font-stylesmooth-scroll behavior.show from panels dependent-less on the existence of .fade class.is-invalid from textarea validation exampleinterval=false from docs & testsdata-bs-title instead of titletype="button" to Bootstrap versions dropdowntype="button" to Bootstrap versions dropdownspyOn usageUpdated numerous devDependencies:
.form-check-reverse modifier classmake-col-ready(): remove the unused $gutter variablecolor and border-color CSS variables to tablesz-index on .navbar-expand .offcanvas and prevent box-shadow when collapseddata-bs-content.text-bg-{color} helpers.form-check-reverse modifier classdata-bs-contentisShown method.form-control-plaintext.form-check-reverse modifier classmake-col-ready(): remove the unused $gutter variablecolor and border-color CSS variables to tablescursor: default on disabled .form-check-labelmedia-breakpoint-onlyz-index on .navbar-expand .offcanvas and prevent box-shadow when collapseddirection in code elementsaccordion-item::file-selector-button:root CSS variable for $body-font-size$purplesborder-radius for btn-groupborder-width for <hr> sizegap utility API from "Flex" to "Spacing"!important property to colored links.list-group-item-action--bs-btn-padding by --bs-btn-padding-{x|y}.text-muted on body color$variable-prefix to $prefix$border-color to use rgba().navbar-light deprecationcalc() for manipulating new CSS variable version of border-width.dropstart@include font-size when not.navbar-navborder-color property instead of the CSS variable in border color utilities$input-disabled-color Sass variable$variable-prefix usagesborder-color change.text-bg-{color} helpersimports on plugins buildpinch eventssetContent additionESC buttonclassList callsdata-bs-content_getConfig()new Event with new CustomEventparents method to utilize newer JS native methodsisShown method<abbr> tagrole="search" and type="search" in navbar doc and examplesaria-label in the select examplealign-content-betweenparam to set Bootstrap version in Contents pagesticky-xxl utils<form>autocomplete attributes.navbar-light classes.bd-bg-purple-bright → .bd-bg-violet and drop unused .bd-text-purple-bright.dropup in dropup centered example.dropstart.border-right to .border-endrole="group" from some split drop* buttons@popperjs/core in parcel.md.border-right rule from modal example CSS filerole="search" and type="search" in navbar doc and examples.rounded-* and .fw-semibold defs in examplesrole="search" and type="search" in navbar doc and examplesaccordion-itempinch eventsimports on plugins builddetails elementworkflow_dispatch## Fixes ### 🎨 CSS - #35143: Revert "Add align-self: center to buttons for improved rendering in flex containers"
align-self: center to buttons for improved rendering in flex containers"Temporarily patched a postcss-values-parser issue by rearranging our calc() functions that use negative numbers. This should restore the ability to im
calc() functions that use negative numbers. This should restore the ability to import and compile Bootstrap's Sass in create-react-app.border-radius sizes to small and large .form-selectsalign-self: center to buttons for improved rendering in flex containerssms in the SAFE_URL_PATTERN.img-fluidrole="switch" to our form switches in our docsalign-self: center to buttons for improved rendering in flex containersborder-radius sizes to small and large .form-selectssms in the SAFE_URL_PATTERNrole="switch" to switches.img-fluid in docscontents.mdrole="switch" to switchesgeneratedCode: 'es2015'Updated numerous devDependencies:
rgba-css-var function for body or bg$dropdown-link-hover-color variable color value in _variable.scss filebs-toggle, to hide other open instancesdata-bs-original-title issuedata-bs-original-title issue$enable-smooth-scroll to Sass options page.hstack example and placeholder 'How it works' example.Site.Params.docs_version variableAdded experimental, opt-in CSS Grid support
.bg-* and .text-* utilities to use CSS variables and new RGB CSS variables for real-time customization.col-* classes to override .row-cols-* classes for now until we can fix some critical bugsdata-dismiss so that it can be outside of a modal using bs-target.hstack, .vstack, and .vrgetInstance method.hstack, .vstack, and .vradd() and subtract()$card-box-shadow variable$accordion-icon-color default value consistent with the $accordion-button-color.row-cols"$input-bg to use $body-bgdata-dismiss so that it can be outside of a modal using bs-targetManipulator.offset()display:none by defaultswitch statement instead of ifgetInstance methodSelector.findOne() dependencyUtil.reflow function and add documentationhr in v5_root.scss being requiredmedia-breakpoint-down breakpoints.text-white-50 CSS rule from Offcanvas Exampleaggregate-outputactions/setup-node's cache optionUpdated numerous devDependencies: https://github.com/twbs/bootstrap/pulls?q=is%3Apr+is%3Aclosed+label%3Adependencies+project%3Atwbs%2Fbootstrap%2F41
.row-cols.form-selectadd() & subtract()--bs-table-bg and --bs-table-accent-bg.dropdown-menu-*line-height for floating labels<ul><li>/ division with multiplication and custom divide() functiondivide() function and RFSgetOrCreateInstance method in base-componentdispose/hide methods usage through jQueryIntrefacegetNextActiveElement helper functiondata-dismiss="modal" is setisVisible false positives from deep nesting or alternate meanselement.parentNode.removeChild(element) to element.remove()DOMContentLoaded event listener in onDOMContentLoadedquerySelectorAllBlinkMacSystemFont in docs<ul><li>sass:math module callsetActiveItem()Updated numerous devDependencies: https://github.com/twbs/bootstrap/pulls?q=is%3Apr+is%3Aclosed+label%3Adependencies+project%3Atwbs%2Fbootstrap%2F38
.modal-open to affect the <body> scroll.input-group shouldn't be behind sibling elementaccent-bg from leaking in nested table$list-group-color in loop:read-only selector back to [readonly]config property to start with underscoretransitionend listener callbacks into one methodDATA_KEY & EVENT_KEY to base-componentrootElement not initialized in ModalDATA_KEY & EVENT_KEY to base-componentoverflow valueUpdated numerous devDependencies
#32155: Updated make-col() mixin to generate equal columns when no size is specified
#32763: Added new color-scheme() mixin
#33389: Dropdown menus now have option become clickable
#33453: Added new docs footer
#33548: Offcanvas header components are now vertically aligned
#33549: Added offcanvas-top modifier
#33634: Added support for .dropdown-items wrapped in <li>s
#33626: Fix v5 regressions in tab dropdown functionality
color-scheme mixincolor-scheme mixin.nav-link color consistent when using buttons:read-only css selector instead [readonly] for consistencyborder-top on Firefoxhide method of dropdownisDisabled util on dropdownnoop functionselectMenuItem method private.dropdown-item wrapped in <li> tagsaltBoundary optionrel=noopener attributeboundary optionboundary optionboundary option descriptiondata-bs-backdrop="static" from modal testsAdded new offcanvas component for left, right, and bottom-aligned hidden content
.list-group-numbered variation to list groups that uses pseudo-elements for numbering list group items..nav-fill and .nav-justified.border-0 utility.browserslistrc to drop Android and add Safari/iOS 12 as the new minimum version (completing our two latest major releases guideline for supported browsers).ol.list-group with pseudo-element numbersborder-0ol.list-group with pseudo-element numbersselect:disabled opacity for Chrome.list-group-item colorisRTL to a functionisAnimated method.dropupSAFE_URL_PATTERN regex for use with test method of regexes.flip optiondisabled elementOffcanvas constructorshow method to accept relatedTarget as an argumentDATA_KEY--silent with --verbositypreventAssignment: trueUpdated numerous devDependencies https://github.com/twbs/bootstrap/pulls?q=is%3Apr+is%3Aclosed+label%3Adependencies+project%3Atwbs%2Fbootstrap%2F34
Updated dropdown plugin to add data-bs-popper="static" via JS to the .dropdown-menu when the trigger has add data-bs-display="static" and data-bs-popp
data-bs-popper="static" via JS to the .dropdown-menu when the trigger has add data-bs-display="static" and data-bs-popper="none" when in navbars..navbar-nav-scroll class to enable vertical scrolling when a collapsed navbar is opened. It's customizable via Sass and a CSS variable. Read more in the docs.flex-grow to the .navbar-collapse to restore the flexbox behaviors from v4 and prevent some content from being inadvertently squished.vertical-align from .form-select.form-selectword-break to .toast-body<button>s wherever possible instead of <a> elements.<button>s as indicators (from .carousel-indicators li to .carousel-indicators [data-bs-target])..dropdown-toggle instead of the .dropdown.data-bs-toggle="modal"..js file.getSelector from returning URLs as selector which caused errors in dropdown and scrollspy plugins..navbar-nav-scroll for vertical scrolling of navbar content.navbar-nav-scroll for vertical scrolling of navbar contentvertical-align from .form-select.form-select paddingvisually-hidden-focusable so it can be used on a container, ….ratio missing variable prefix.toast-bodyoutline:0 rather than outline:none$gray-500.form-check background to $input-bg and change transitionsflex-grow to .navbar-collapse.navbar-nav-scroll.accordion-button stays left-aligned.navbar-collapse behaves as intendedSelectorEngine.matches().TRANSITION_END from utilsif/elsefallbackPlacementsA nested tag is clickedTypeError instead of the generic ErrorgetSelector from returning URLs as selector.dropdown-toggle buttondata-bs-toggle="modal"fallbackPlacements from the dropdownpopperConfig option$carousel-transition-duration reference(current) textfallbackPlacementssystem-ui to the native font stack documentation:focus, not just :hoverhas-validation in checkout examplespointer-events: none override for tooltip and popover disabled buttons.form-group classnav-linkdata-bs-touch="false" example in the carousel docs$enable-shadows option in our docs.rounded-sm/lg utilities.form-text changes$enable-deprecation-messages(current) text.nav-item to .nav-linkversion_short variable under the config object14⚠ Please check our migration guide for more info!
⚠ Please check our migration guide for more info!
.btn in vertical button groupmake-container()scale-color() function to shift-color()$variable-prefixaria-label for tooltips_fixTitle().close instancesconfig.keyboard is falseshow config option from the modal plugin.has-validation class for input group exampleexpanded Sass output style for development.btn-block instances.show appliedtitleevent instead of ealt attributeevent instead of earia-label for tooltipsFORCE_COLOR:2css-prefix-examples-rtl scriptUpdated numerous devDependencies
.fs-* utilities for font-size and rename font-weight/-style utilities.btn-block with utilities.d-grid to our display utilities.gap utilities.fs-* utilities for font-size and rename font-weight/-style utilities.rounded utilitiesz-index for close button.bg-infoprefers-reduced-motion: no-preferenceprefers-reduced-motion: reduce.btn-block with utilitiescursor:pointer to color inputs.fw utilities::file-selector-button margin.d-grid to our display utilities.gap utilitiesManipulator.toggleClassheadtoContain() to check for substring presencesearch-input element earlytextContentarticle og:type when it's a page.btn-close-white docs to filter (not backdrop-filter)to description and fix nextwhenvisible descriptionhref attribute first.bg-infop…search-input element earlychomp$dark to $gray-900.bg-infoprefers-reduced-motion: no-preferenceprefers-reduced-motion: reduce--rd flagUpdated numerous devDependencies https://github.com/twbs/bootstrap/pulls?q=is%3Apr+is%3Aclosed+label%3Adependencies+project%3Atwbs%2Fbootstrap%2F21
box-shadow() mixin: allow 'null' and drop support 'none' with multiple argssr-only/sr-only-focusable to visually-hidden/visually-hidden-focusableflex: 1 0 100% from rows.d-nonerem unitdelegateTarget)postcssOptions key.svg from shields.io badges🎉 The first Bootstrap 5 alpha has landed!
🎉 The first Bootstrap 5 alpha has landed!
We've replaced the deprecated color-adjust with print-color-adjust in our Sass files as part of the Autoprefixer v10.4.6 issues. This should quiet the…
color-adjust with print-color-adjust in our Sass files as part of the Autoprefixer v10.4.6 issues. This should quiet the issues folks have seen from that dependency change. If you're using our distribution CSS files, like bootstrap.min.css, you may still see the warning.small and .small to compute to a whole pixel value (was 12.8px and now is 14px).role attributes.color-adjust with print-color-adjust by @AdrianCurtin in https://github.com/twbs/bootstrap/pull/36283role="group" from some split drop* buttons by @julien-deramond in https://github.com/twbs/bootstrap/pull/36254accessibility.md by @patrickhlauke in https://github.com/twbs/bootstrap/pull/36492Full Changelog: https://github.com/twbs/bootstrap/compare/v4.6.1...v4.6.2
Replace Sass division with multiplication and custom divide() function by @mdo in https://github.com/twbs/bootstrap/pull/34571
divide() function by @mdo in https://github.com/twbs/bootstrap/pull/34571moz-focusring by @kremit in https://github.com/twbs/bootstrap/pull/32821SAFE_URL_PATTERN regex for use with test method of regexes by @nikonthethird in https://github.com/twbs/bootstrap/pull/33153sms in the SAFE_URL_PATTERN for sanitizer by @XhmikosR in https://github.com/twbs/bootstrap/pull/35074select.form-control by @mdo in https://github.com/twbs/bootstrap/pull/33206add() & subtract() by @ffoodd in https://github.com/twbs/bootstrap/pull/34047add() and subtract() by @ffoodd in https://github.com/twbs/bootstrap/pull/34432aria-haspopup from dropdowns by @patrickhlauke in https://github.com/twbs/bootstrap/pull/33624.dropdown-item wrapped in <li> tags by @cpsievert in https://github.com/twbs/bootstrap/pull/33649vertical-align in spinners by @XhmikosR in https://github.com/twbs/bootstrap/pull/338070.x with negative margins in utilities by @k-utsumi in https://github.com/twbs/bootstrap/pull/33593thead rule by @coliff in https://github.com/twbs/bootstrap/pull/34426show event disabling modals with fade class from being displayed again by @alpadev in https://github.com/twbs/bootstrap/pull/34087Tooltips and popovers can have custom clases via customClass option.
customClass option..navbar-nav-scroll class for scrolling expanded navbar contents on mobile devices.prefers-reduced-motion is enabled.background-color of .dropdown-item for improved hover state contrast, and ligthened the disabled .dropdown-item color..navbar-nav-scroll for vertical scrolling of navbar contentoutline:0 rather than outline:none; backport of #32751$gray-500customClass optionjs/src/index.js one folder upconfig.keyboard is falsebugreport.apple.com since it doesn't work.visually-hiddenloading=lazy from snippets.text-left in Layout / Overview:focus, not just :hoverdata-touch="false" example in the carousel docsrole="button" from CTA links in carousel example.show applied.has-validation for input groups with validation$enable-shadows option in our docs; backport of #32685titleversion_short variable under the config object; backport of #32737Updated devDependencies versions
escape-svg function to note that data URIs must be quoted.custom-control shadow variable instead of the generic input-focus-box-shadow.th styling in Reboot, custom form field styling when printing, and improvements to .text-break).
th updates: Inherit font-weight: bold that comes from user agent stylesheets..text-break changes to drop overflow-wrap and use word-wrap once again.close buttons in dismissible .alerts.hidePrevented.bs.modal can be prevented.$dropdown-padding-x variable from v5.dispose method more appropriately.to and nextwhenvisible methods.…rest of v4 with today's release. We've added a deprecation notice as well.
This release addresses the following two issues:
make-container-max-widths mixin. We won't be using the mixin ourselves, but it will remain in the codebase for the rest of v4 with today's release. We've added a deprecation notice as well.flex: 1 0 100% from .rows. This was added to address shrinking rows inside the navbar component after our responsive containers were added in v4.4.0. Removing this rolls us back to the expected grid and flex behavior—your row will shrink unfortunately without further changes. We could add extra custom CSS to address this, but it seems shortsighted to rush into that. Instead, apply .flex-fill to the .row and your row will behave as usual.### CSS - #30808: Simplify list-group borders in cards - #30810: Add z-index to .custom-check to fix their rendering in CSS columns - #30817: Add bord
list-group borders in cardsz-index to .custom-check to fix their rendering in CSS columnsborder-radius to .card-img-overlayword-break: break-word; on .text-break utility..row from shrinking in flex containersbox-shadowmin-width: 0 on .col due to unforeseen side effectsbackdrop-filter from docs subnav and toastsoverflow: hidden from toastsrole="dialog" in modals via JavaScriptextend/icons.md page.nav-item from .nav-link to be more consistentDeprecated bg-gradient-variant mixin as it's being removed in v5.
user-select with the new utilities and Sass map.role="button" selector in Reboot to set cursor: pointer on non-<button> element buttons.bg-gradient-variant mixin as it's being removed in v5.display: flex on .breadcrumb-item.btn cursor.btn-linkpre is present by setting min-width: 0word-wrap in .text-break for IE and Edge compatibilityborder-radius functions returning negative values$enable-transition: falsetransition: none in transition()` mixinspinner-grow animation in Safari.card-footer colorbox-shadow mixin for .form-select, .btn, and other form controlsuser-select and a new - role="button" in Reboot to set cursor: pointer.appearance: none from button.closebg-gradient-variant mixin$grid-columns > 0$grid-breakpoints map list to remove all breakpointskeyboard=true & backdrop=staticsrcset in the allowed attributestotype always return stringified null when null passedloading="lazy" for imagesmake-container() mixindata-target usage and morerole="document" from the modal dialogFix Dart Sass compatibility (#29755, #29763)
…doc for guidelines on reporting potential vulnerabilities.
Here's what you need to know about v4.4.0. Remember that with every minor and major release of Bootstrap, we ship a new URL for our hosted docs to ensure URLs continue to work.- New responsive containers! Over a year in the making, fluid up to a particular breakpoint, available for all responsive tiers.
.row-cols classes for quickly specifying the number of columns across breakpoints. This one is huge for those of you who have asked for responsive card decks.escape-svg() function for simplifying our embedded background-image SVGs for forms and more.add() and subtract() functions for avoiding errors and zero values from CSS's built in calc feature.make-col-auto() mixin to make our .col-auto class available with custom HTML.:disabled styles by moving selectors to [disabled].bg-variant(), nav-divider(), and form-control-focus() mixins are now deprecated as they're going away in v5.:invalid validation icon to be an alert instead of an × to avoid confusion with browser functionality for clearing the form field value.Security: Fixed an XSS vulnerability (CVE-2019-8331) in our tooltip and popover plugins by implementing a new HTML sanitizer
Deprecated: img-retina, invisible, float, and size mixins are now deprecated and will be removed in v5.
.stretched-link utility to make any anchor the size of it's nearest position: relative parent, perfect for entirely clickable cards!.text-break utility for applying word-break: break-word.rounded-sm and .rounded-lg for small and large border-radius..modal-dialog-scrollable modifier class for scrolling content within a modal..list-group-horizontal modifier classes for displaying list groups as a horizontal row.null for variables that by default inherit their values from other elements (e.g., $headings-color was inherit and is now null until you modifier it in your custom CSS).background-color like our buttons.href HTML attribute to avoid JavaScript errors. Please try to use valid selectors or the data-target HTML attribute/target option where available.white-space: nowrap to .dropdown-toggle (before v4.2.1 it was on all .btns) so carets don't wrap to new lines.img-retina, invisible, float, and size mixins are now deprecated and will be removed in v5.Bump to v4.2.1 to republish package on npm. See v4.2.0 release notes for changes introduced in v4.2.
Bump to v4.2.1 to republish package on npm. See v4.2.0 release notes for changes introduced in v4.2.
Fixed: Removed the :not(:root) selector from our svg Reboot styles, resolving an issue that caused all inline SVGs ignore vertical-align styles via si
:not(:root) selector from our svg Reboot styles, resolving an issue that caused all inline SVGs ignore vertical-align styles via single class due to higher specificity.package.json to a separate file to avoid unintended inherited browser settings across npm projects..form-controls now have a fixed height to compensate for differences in computed height across different types. This also fixes some IE alignment issues.Noto Color Emoji to our system font stack for better rendering in Linux OSes.Fixed an XSS vulnerability in tooltip, collapse, and scrollspy plugins
Checkout the v4.1.2 ship list and GitHub project for the full details.
Suppressed that text-hide deprecation notice by default
Our first patch release for Bootstrap 4! Here's a quick rundown of some of the changes:
text-hide deprecation notice by defaultCheckout the v4.1.1 ship list and GitHub project for the full details.
Deprecated .text-hide—you'll see a warning during compilation—as it's a dated and undocumented feature.
.carousel-fade modifier to switch carousel from horizontal sliding to crossfade..dropdown-item-text for plaintext dropdown items..flex-fill, .flex-grow-*, and .flex-shrink-* utilities..table-borderless variant for tables..text-monospace utility..text-body (default body color), .text-black-50 (50% opacity black), and .text-white-50 (50% opacity white) utilities..shadow-* utilities for quickly adding box-shadows..text-hide—you'll see a warning during compilation—as it's a dated and undocumented feature.Be sure to look at the ship list and project board for more details on all our fixes.
Brand new examples and overhauls for existing ones.
Our first stable v4 release! 🎉
border-color for them darkened from $gray-200 to $gray-300..order-0 classes to reset column order.For more details, visit https://github.com/twbs/bootstrap/issues/25098.
As mentioned in our Beta 2 release, we needed to make a few more breaking changes in Beta 3. We've summarized them here and in our migration docs—be s…
As mentioned in our Beta 2 release, we needed to make a few more breaking changes in Beta 3. We've summarized them here and in our migration docs—be sure to read them!
Rewrote native and custom check controls. Both browser default and custom checkboxes and radios now have simpler markup after removing the <input> from the <label>. Now, all checkboxes and radios have a parent <div> and sibling <input> and <label> pair. This is essential for form validation and disabled inputs because we can use the input's state to style the label.
In addition, custom checkbox and radio elements no longer have a .custom-control-indicator. This is generated from the new .custom-control-label.
Input groups were rewritten with specific .input-group-{prepend|append} classes. The new approach allows us to support validation styles and messages within input groups, while also adding support for custom selects, custom file inputs, and multiple .form-controls.
Responsive tables are once again parent classes to avoid accessiblity issues with changing a <table>'s display.
Deleted the .col-form-legend class, consolidating it's styles into the .col-form-label class.
Read the Migration page for further details.
In addition to the breaking changes, we've addressed a few more general issues that may impact your project.
Restored cursor: pointer to non-disabled links, buttons, .close, navbar toggler, and pagination links.
Added a new vertically centered modal option with .modal-dialog-centered.
Added new dropleft and dropright variants for dropdowns in #23860.
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.
Print styles have moved to bottom of the import stack to properly override styles.
For more details on this release's changes, take a look at the Beta 3 ship list issue, as well as the Beta 3 project.
Dropped support for Bower as they've deprecated the package manager. See #23568.
Beta 2 is here! Read the full ship list for details on what issues were closed and PRs merged.
.offset- modifiers in #23445. Originally our intent was to supplement this with our margin utilities, but we underestimated the appeal of fixed number column offsets.color from .badge, and it's associated $badge-color variable, in #23529.grayscale function to gray to avoid breaking CSS native grayscale filter in #23579..table-inverse, .thead-inverse, and .thead-default to .*-dark and .*-light, matching our color schemes used elsewhere in #23560..table-responsive-{sm,md,lg,xl} to the already present .table-responsive. You might need to adjust your usage depending on when you want a table to resize. See #22804.bootstrap.bundle.js and bootstrap.bundle.min.js. See #23735.float to flexbox in #23683.color-yiq from a mixin that included the color property to a function that returns a value, allowing you to use it for any CSS property. For example, instead of color-yiq(#000), you'd write color: color-yiq(#000);.It's a beta! Holy crap this took forever. Thanks for sticking with me on this one—means a lot, y'all <3.
It's a beta! Holy crap this took forever. Thanks for sticking with me on this one—means a lot, y'all <3.
.navbar-expand instead 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.order utilities to better match utility naming scheme of .property-value._custom.scss in our import order.peerDependencies as they're not requirements for every part of Bootstrap.Happy New Year! It's our final alpha for Bootstrap 4.
Happy New Year! It's our final alpha for Bootstrap 4.
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.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..no-gutters.col-xs-6, col-md-auto, and col-xl-4 to a single element).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..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.<progress> element due to lack of animations, no support for multiple bars, and no support for labels on the progress bars.#s in our SVG data URLs that are used to add vector background-images..tag back to .badge, like v3, to avoid conflicts with common WordPress styles.background-images, and more..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._animation.scss to _transitions.scss for clarity.$blue) for additional customization.Fifth alpha! View the milestone for details: https://github.com/twbs/bootstrap/issues/20630.
Fifth alpha! View the milestone for details: https://github.com/twbs/bootstrap/issues/20630.
See the closed milestone for details.
Fourth alpha release!
See the closed milestone for details.
See the closed milestone for details.
Third alpha release!
See the closed milestone for details.
See the closed milestone or the blog post for more details.
Second alpha release!
See the closed milestone or the blog post for more details.
Security: Fixed an XSS vulnerability (CVE-2019-8331) in our tooltip and popover plugins by implementing a new HTML sanitizer
#) in data-target for DropdownsNew: Added a .row-no-gutters class.
.row-no-gutters class..navbar-fixed-* on modal open<abbr> elements.baseurl, /docs/3.4/, to version the v3.x documentation like we do with v4.Release announcement blog post: https://blog.getbootstrap.com/2016/07/25/bootstrap-3-3-7-released/
Release announcement blog post: https://blog.getbootstrap.com/2016/07/25/bootstrap-3-3-7-released/
$element to prevent leaking memoryjQuery('#') since it's a syntax error in jQuery 3$.offset() on SVGs since it gives incorrect results in jQuery 3No significant changes.
aria-label and callout about labeling pagination components### CSS - #16492: Use @input-border-radius variables on input groups. - #16529: Un-style the caret on s in IE10+. - #16562, #16563: Create and impleme
@input-border-radius variables on input groups.<select>s in IE10+.@dl-horizontal-breakpoint variable to replace the @grid-float-breakpoint on .dl-horizontal.border-radius not being set on two corners of vertical btn group.min-height on modal headers and replace with a clearfix to avoid collapsing when no title exists.padding on jumbotrons within containers.padding on containers to match the new rounding of negative margins on rows.padding-top of .control-labels in large and small horizontal forms.@carousel-control-font-size for in specific pixel values.shown.bs.dropdown & hidden.bs.dropdown events so that relatedTarget property gets set properly.CHANGELOG.md file that points to GitHub Releases and our blog.<label> and input group addon..container-fluid..icon-next, .icon-prev alternative classes for carousel..col-offset-0 example addition to docs..in to the .fade of the initially-open Tab.container: 'body' should be used for tooltips/popovers on tabular elements.panel-title overrides the font size of <h1>–<h6> tagsstyle attributes of .progress bars, and available workaroundsbootstrap.min.css.## CSS - #15074, #16159: Manually handle .input-group-* sizing instead of using mixins, which causes a bug in our compiled code due to nesting - #1594
.input-group-* sizing instead of using mixins, which causes a bug in our compiled code due to nestingz-index to avoid border overlapping in input groups.form-control-feedback across within input groupsborder on pagination links on hover.text-emphasis-variant adjust a:focus color in addition to a:hover color@jumbotron-heading-font-size variablepointer-events on disabled <a> .btnsmax-width: none to .media > .img-thumbnail to prevent malformed images.bg-variant mixin adjust :focus color in addition to :hover color.visible* mixin to use !important on <table> elementsborder-radius on list group items in collapsible panels<button> support to .list-group-items..btn[disabled] styles in the theme.px unit to perspective property value.caret not display in IE8<select> printing bug that's been fixed in recent Chrome@btn-border-radius variables based on global variables for better customization..btns that are direct children of .btn-toolbarpadding and margin.form-control-feedback in .form-group-* size variations..form-control uses.padding to prevent double negative spacing and overflowing containers.bootstrap.less..pagination-sm height by specifying line-height.border-radius variable to theme's inverse navbar..focus and :focus:hover on .active buttons.btn-group (plus removal of obsolete unit test)role="menu"inserted.bs.tooltip/popover event fired after tooltip/popover DOM is inserted into the documentviewport option to be a functionaria-hidden usage that's redundant to display: none.dropdown-menu instead of ARIA roles for Dropdown keydown event handlerrole="button" to a[data-toggle="collapse"].alert change to v2 -> v3 migration guidearia-expanded to navbar toggles$(...).tab('show') methodrole="tabpanel" from docspadding in .bs-docs-header that would sometimes cause horizontal scrollingvertical-align on badges from baseline to middle for improvement alignment across more elements.form-inline in non-responsive example doesn't stack.dropdown and .dropup for more accurate examplesrole="button" from download linkscheckPosition method'manual' trigger is mutually exclusive of other tooltip/popover triggers#panels-footer to components nav in docs$(...).button('reset') is asyncheight and overflow.role="separator"bower.json to comply with Bower's new spec for the main field"moduleType": "globals" in bower.jsonversion field from and add license field to bower.json/grunt/ folder in npm package so that grunt dist worksYour coding agent can read these notes before it upgrades. Set up the MCP server →