The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
#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-item
s 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 tests.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-0
ol.list-group
with pseudo-element numbersselect:disabled
opacity for Chrome.list-group-item
colorisRTL
to a functionisAnimated
method.dropup
SAFE_URL_PATTERN
regex for use with test method of regexes.flip
optiondisabled
elementOffcanvas
constructorshow
method to accept relatedTarget
as an argumentDATA_KEY
--silent
with --verbosity
preventAssignment: true
Updated numerous devDependencies https://github.com/twbs/bootstrap/pulls?q=is%3Apr+is%3Aclosed+label%3Adependencies+project%3Atwbs%2Fbootstrap%2F34
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-select
word-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-body
outline: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/else
fallbackPlacements
A
nested tag is clickedTypeError
instead of the generic Error
getSelector
from returning URLs as selector.dropdown-toggle
buttondata-bs-toggle="modal"
fallbackPlacements
from the dropdownpopperConfig
option$carousel-transition-duration
reference(current)
textfallbackPlacements
system-ui
to the native font stack documentation:focus
, not just :hover
has-validation
in checkout examplespointer-events: none
override for tooltip and popover disabled buttons.form-group
classnav-link
data-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-link
version_short
variable under the config
object14
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-500
customClass
optionjs/src/index.js
one folder upconfig.keyboard
is falsebugreport.apple.com
since it doesn't work.visually-hidden
loading=lazy
from snippets.text-left
in Layout / Overview:focus
, not just :hover
data-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 #32685
title
version_short
variable under the config
object; backport of #32737
β Please check our migration guide for more info!
.btn
in vertical button groupmake-container()
scale-color()
function to shift-color()
$variable-prefix
aria-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
appliedtitle
event
instead of e
alt
attributeevent
instead of e
aria-label
for tooltipsFORCE_COLOR:2
css-prefix-examples-rtl
script.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-info
prefers-reduced-motion: no-preference
prefers-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.toggleClass
head
toContain()
to check for substring presencesearch-input
element earlytextContent
article
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-info
p
β¦search-input
element earlychomp
$dark
to $gray-900
.bg-info
prefers-reduced-motion: no-preference
prefers-reduced-motion: reduce
--rd
flagescape-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 .alert
s.hidePrevented.bs.modal
can be prevented.$dropdown-padding-x
variable from v5.dispose
method more appropriately.to
and nextwhenvisible
methods.box-shadow()
mixin: allow 'null' and drop support 'none' with multiple argssr-only
/sr-only-focusable
to visually-hidden
/visually-hidden-focusable
flex: 1 0 100%
from rows.d-none
rem
unitdelegateTarget
)postcssOptions
key.svg
from shields.io badgesThis 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 .row
s. 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.list-group
borders in cardsz-index
to .custom-check
to fix their rendering in CSS columnsborder-radius
to .card-img-overlay
word-break: break-word;
on .text-break
utility..row
from shrinking in flex containersbox-shadow
min-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 consistent