The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
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-color
color-mode.js
dl
, 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
classabs()
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.id
s 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 colorid
s callsdetails
element.left-
and .right-
utilities from migration guide$gray-500
with $gray-300
for the body color.nav-link
s, 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 stylingclearfix
Home
and End
keys in tabsaria-disabled='true'
to disabled anchorscolor-modes.js
to bootstrap-x.y.z-examples.zip
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 textarea
s. 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
.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-query
color-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-emphasis
list-style
reset on .carousel-indicators
*-text-emphasis
CSS vars in Sass loop$grid-breakpoints
SCSS unit tests initscss/_nav.scss
color
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-emphasis
import
inside bootstrap-grid
offcanvas
keydown
event logic with modal
aria-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-muted
debug
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.png
utilities/colors.md
href
and tabindex="-1"
scss-docs
: link enhancementscroll-margin-top
instead padding
and margin
var(--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
getSelector()
to handle weird IDs (#35565)border-radius
utilitiesfont-weight-medium
(500) / fw-medium
z-index
utilities, .z-*
.alert-link
.btn-close
border-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-query
getElementFromSelector
& getSelectorFromElement
execute
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.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 .toast
s 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/usescolor
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 true
z-index
values to ensure proper rendering of validated form fieldstext-align
to ensure consistent stylingborder-radius
list-group-item
selectors to better support nested imports of Bootstrap's CSSborder-radius
values inside pagination componentsselector
, dynamic content, and disposed tooltips using title
outline
for docs code samples, buttons when :not(:focus-visible)
$popover-header-color
.text-center
z-index
CSS variables..btn-link
.form-checkbox
-> .form-check
examples/features
page.outline
for docs code samples, buttons when :not(:focus-visible)