Bump bootstrap from 3.4.1 to 5.3.8 #20
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Updated bootstrap from 3.4.1 to 5.3.8.
Release notes
Sourced from bootstrap's releases.
5.3.8
What's Changed
.bd-example
class by @julien-deramond in Docs: use Example shortcode instead of divs with only.bd-example
class twbs/bootstrap#41556color-contrast()
function for WCAG 2.1 compliance by @julien-deramond in Fixcolor-contrast()
function for WCAG 2.1 compliance twbs/bootstrap#41585<Example>
is used, not just<Code>
by @louismaximepiton in Docs: Add tooltips to buttons when<Example>
is used, not just<Code>
twbs/bootstrap#41582Dependencies
New Contributors
Full Changelog: twbs/bootstrap@v5.3.7...v5.3.8
5.3.7
📚 Documentation
<head>
content generated by the "Download examples" buttonintegrity
andcrossorigin
attributes in introduction pageplaceholder
usage description🎨 Sass
'none'
values in thebox-shadow
Sass mixin for cleaner output🤖 JavaScript
trigger: "hover click"
configuration🤝 Contributions
5.3.6
Highlights
.visually-hidden
overflowing children to become focusable.card-group
selectors to immediate children to fix some inheritance issuesChanges
npm install
andnpm run dist
in CONTRIBUTING.md by @mdo in Mentionnpm install
andnpm run dist
in CONTRIBUTING.md twbs/bootstrap#41340.card-group
to immediate children to fixborder-radius
bug by @mscdex in Limit selectors in.card-group
to immediate children to fixborder-radius
bug twbs/bootstrap#41298devDependencies
by @julien-deramond in UpdatedevDependencies
twbs/bootstrap#41383image-size
from 1.0.2 to 2.0.2 by @julien-deramond in Bumpimage-size
from 1.0.2 to 2.0.2 twbs/bootstrap#41384.md
and.mdx
files. by @Jason3S in chore: Spell check.md
and.mdx
files. twbs/bootstrap#41398files
configuration from.cspell.json
by @julien-deramond in Removefiles
configuration from.cspell.json
twbs/bootstrap#41400// Private
comment and method by @MohamadSalman11 in Removed line break between// Private
comment and method twbs/bootstrap#41218New Contributors
.card-group
to immediate children to fixborder-radius
bug twbs/bootstrap#41298... (truncated)
5.3.5
Hot fix for a regression from upstream in Autoprefixer.
What's Changed
Full Changelog: twbs/bootstrap@v5.3.4...v5.3.5
5.3.4
Changes
🚀 Features
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
rule🎨 CSS
max-width
andbackground-color
btn-group-vertical
by using same rules asbtn-group
border-radius
rule☕️ JavaScript
... (truncated)
5.3.3
Highlights
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.Color modes
.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 acceptlight
anddark
values as parameters.Miscellaneous
<dl>
,<dt>
and<dd>
in the sanitizer.🎨 CSS
--bs-accordion-btn-focus-border-color
and deprecate$accordion-button-focus-border-color
☕️ JavaScript
color-mode.js
dl
,dt
anddd
in sanitizer📖 Docs
.text-bg-{color}
for all badges... (truncated)
5.3.2
Highlights
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 thedivide()
function. Thedivide()
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.Color modes
<mark>
color customization for color modes.Docs
🎨 CSS
box-shadow
CSS variables shadow utilities$btn-link-focus-shadow-rgb
to allow customization<mark>
dark mode bg color☕️ JavaScript
id
s calls📖 Docs
details
element.left-
and.right-
utilities from migration guide... (truncated)
5.3.1
Highlights
$gray-500
with$gray-300
for the body color.nav-link
s, providing.disabled
and:disabled
for use with anchors and buttonsHome
andEnd
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🎨 CSS
.text-bg-*
helpers now use theme CSS variables$navbar-dark-icon-color
$alert-*-scale
Sass vars☕️ JavaScript
Home
andEnd
keys in tabs📖 Docs
noopener
rel to footer external links... (truncated)
5.3.0
5.3.0-alpha3
calc()
functions.--bs-border-radius
variables across more components..d-inline-grid
utility class..tooltip-inner
placement when using variations infallbackPlacements
.$color-mode-type: media-query
.background-color
to help with multiple lines of text intextarea
s. This also fixes the colors when form elements are disabled in floating forms.Full Changelog: twbs/bootstrap@v5.3.0-alpha2...v5.3.0-alpha3
5.3.0-alpha2
🚀 Features
.nav-underline
modifier class🎨 CSS
.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 tomedia-query
color-scheme
to dark root selectorproperty-blacklist
toproperty-disallowed-list
--bs-emphasis-color
set valuescss/_maps.scss
.highlight-toolbar
def--bs-highlight-bg
inscss/_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... (truncated)
5.3.0-alpha1
🚀 Highlights
getSelector()
to handle weird IDs (#35565)🚀 Features
border-radius
utilitiesfont-weight-medium
(500) /fw-medium
z-index
utilities,.z-*
🎨 CSS
.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 tomedia-query
☕️ JavaScript
getElementFromSelector
&getSelectorFromElement
execute
function, being able to handle argumentsgetSelector
not to be exportedreplaceAll
usage introduced in #35566Object.entries
in more places... (truncated)
5.2.3
Fixes
🎨 CSS
translate()
direction☕️ JavaScript
5.2.2
Highlights
.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
intable-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🎨 CSS
.btn-check
and undo:hover
$border-color
intable-variant
mixin☕️ JavaScript
📖 Docs
<h1>
for allmodal-title
examples/usesview in GitHub
links insidemain
🌎 Accessibility
... (truncated)
5.2.1
🚀 Highlights
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 totrue
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 usingtitle
🚀 Features
🎨 CSS
outline
for docs code samples, buttons when:not(:focus-visible)
$popover-header-color
.text-center
z-index
CSS variables..btn-link
... (truncated)
5.2.0
🚀 Highlights
smooth-scroll
behavior🚀 Features
smooth-scroll
behavior🎨 CSS
.form-control-color
sizing and styles.showing
btn-link
custom-property-empty-line-before
.table-group-divider
border.dropdown-item
border-radius
when$dropdown-padding-y
is0
readonly
inputs asdisabled
--bs-headings-color
CSS variable due to backward compatibility issues$text-muted
default value.navbar-nav
--bs-btn-disabled-border-color
inbutton-outline-variant
mixin$display-font-family
and$display-font-style
☕️ JavaScript
... (truncated)
5.2.0-beta1
🚀 Highlights
.form-check-reverse
modifier classmake-col-ready()
: remove the unused$gutter
variablecolor
andborder-color
CSS variables to tablesz-index
on.navbar-expand .offcanvas
and preventbox-shadow
when collapseddata-bs-content
.text-bg-{color}
helpers🚀 Features
.form-check-reverse
modifier classdata-bs-content
isShown
method🎨 CSS
.form-control-plaintext
.form-check-reverse
modifier classmake-col-ready()
: remove the unused$gutter
variable... (truncated)
5.1.3
Fixes
🎨 CSS
align-self: center
to buttons for improved rendering in flex containers"5.1.2
Highlights
calc()
functions that use negative numbers. This should restore the ability to import and compile Bootstrap's Sass increate-react-app
.border-radius
sizes to small and large.form-select
salign-self: center
to buttons for improved rendering in flex containerssms
in theSAFE_URL_PATTERN
.img-fluid
role="switch"
to our form switches in our docsChanges
🎨 CSS
align-self: center
to buttons for improved rendering in flex containersborder-radius
sizes to small and large.form-select
s☕️ JavaScript
sms
in theSAFE_URL_PATTERN
📖 Docs
role="switch"
to switches.img-fluid
in docscontents.md
🛠 Examples
role="switch"
to switches🧰 Misc
... (truncated)
5.1.1
Highlights
🎨 CSS
rgba-css-var
function for body or bg$dropdown-link-hover-color
variable color value in _variable.scss file☕️ JavaScript
bs-toggle
, to hide other open instancesdata-bs-original-title
issue📖 Docs
data-bs-original-title
issue$enable-smooth-scroll
to Sass options page.hstack
example and placeholder 'How it works' example.Site.Params.docs_version
variable🛠 Examples
🌎 Accessibility
🏭 Tests
📦 Dependencies
5.1.0
Highlights
.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 bugs🚀 Features
data-dismiss
so that it can be outside of a modal usingbs-target
.hstack
,.vstack
, and.vr
getInstance
method🎨 CSS
.hstack
,.vstack
, and.vr
add()
andsubtract()
$card-box-shadow
variable$accordion-icon-color
default value consistent with the$accordion-button-color
.row-cols
"$input-bg
to use$body-bg
☕️ JavaScript
data-dismiss
so that it can be outside of a modal usingbs-target
Manipulator.offset()
display:none
by default... (truncated)
5.0.2
🚀 Features
🎨 CSS
.row-cols
.form-select
add()
&subtract()
--bs-table-bg
and--bs-table-accent-bg
.dropdown-menu-*
line-height
for floating labels<ul><li>
/
division with multiplication and customdivide()
functiondivide()
function and RFS☕️ JavaScript
getOrCreateInstance
method in base-componentdispose
/hide
methods usage throughjQueryIntreface
getNextActiveElement
helper functiondata-dismiss="modal"
is setisVisible
false positives from deep nesting or alternate meanselement.parentNode.removeChild(element)
toelement.remove()
DOMContentLoaded
event listener inonDOMContentLoaded
📖 Docs
querySelectorAll
BlinkMacSystemFont
in docs... (truncated)
5.0.1
🎨 CSS
.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]
☕️ JavaScript
config
property to start with underscoretransitionend
listener callbacks into one methodDATA_KEY
&EVENT_KEY
to base-componentrootElement
not initialized in Modal📖 Docs
🛠 Examples
🌎 Accessibility
🏭 Tests
... (truncated)
5.0.0
Highlights
#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
🚀 Features
color-scheme
mixin🎨 CSS
color-scheme
mixin.nav-link
color consistent when using buttons:read-only
css selector instead[readonly]
for consistencyborder-top
on Firefox☕️ JavaScript
hide
method of dropdownisDisabled
util on dropdownnoop
function... (truncated)
5.0.0-beta3
Highlights
.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).🚀 Features
ol.list-group
with pseudo-element numbers🎨 CSS
border-0
ol.list-group
with pseudo-element numbersselect:disabled
opacity for Chrome.list-group-item
color☕️ JavaScript
... (truncated)
5.0.0-beta2
Highlights
data-bs-popper="static"
via JS to the.dropdown-menu
when the trigger has adddata-bs-display="static"
anddata-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.🚀 Features
.navbar-nav-scroll
for vertical scrolling of navbar content⚡ Performance Improvements
🎨 CSS
.navbar-nav-scroll
for vertical scrolling of navbar contentvertical-align
from.form-select
... (truncated)
5.0.0-beta1
⚠ Please check our migration guide for more info!
🚀 Features
🎨 CSS
.btn
in vertical button groupmake-container()
scale-color()
function toshift-color()
$variable-prefix
☕️ JavaScript
aria-label
for tooltips_fixTitle()
.close
instancesconfig.keyboard
is falseshow
config option from the modal plugin📖 Docs
... (truncated)
5.0.0-alpha3
Changes
🚀 Features
.fs-*
utilities for font-size and rename font-weight/-style utilities.btn-block
with utilities.d-grid
to our display utilities.gap
utilities🎨 CSS
.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
utilities☕️ JavaScript
... (truncated)
5.0.0-alpha2
Changes
🚀 Features
🎨 CSS
box-shadow()
mixin: allow 'null' and drop support 'none' with multiple argssr-only
/sr-only-focusable
tovisually-hidden
/visually-hidden-focusable
flex: 1 0 100%
from rows.d-none
rem
unit... (truncated)
5.0.0-alpha1
🎉 The first Bootstrap 5 alpha has landed!
4.6.2
Highlights
color-adjust
withprint-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, likebootstrap.min.css
, you may still see the warning.small
and.small
to compute to a whole pixel value (was12.8px
and now is14px
).role
attributes.What's Changed
color-adjust
withprint-color-adjust
by @AdrianCurtin in Replace the deprecatedcolor-adjust
withprint-color-adjust
twbs/bootstrap#36283role="group"
from some split drop* buttons by @julien-deramond in [v4] Doc: removerole="group"
from some split drop* buttons twbs/bootstrap#36254Description has been truncated
[![Dependabot compatibilit...
Description has been truncated