Version 6.0.0 migrated the emitted markup and the component JavaScript to Bootstrap 5, but the fix
stylesheets under modules/ still carry rules written for Bootstrap 3 and 4. Some are dead, some
apply but do the wrong thing under Bootstrap 5. This is the content-audit half of #90, split out so
that #90 can stay about the per-skin loading mechanism.
Every rule below was checked against a stock Bootstrap 5.3.8 build. Items noted "confirmed in a
browser" were also observed on a running MediaWiki 1.43 install with Extension:Bootstrap 6.0.0; items
noted "from the stylesheet" are read against Bootstrap 5 and were not exercised visually.
Dead rules (cannot match under Bootstrap 5)
| file |
selector |
why |
popover.vector-fix.css |
.popover .popover-title |
.popover-title is Bootstrap 3; Bootstrap 4 renamed it .popover-header, which is what Bootstrap 5 generates. That rule is the whole file, so the file is inert. |
carousel.fix.css |
.carousel-inner > .item > img, ... > a > img |
.item is Bootstrap 3; the carousel emits .carousel-item. |
carousel.fix.css |
.thumbnail > img, .thumbnail a > img |
.thumbnail is Bootstrap 3; nothing here emits it. |
card.fix.css |
.text-white .card-header .card-title { color: var(--white) } |
var(--white) is undefined in Bootstrap 5 (see below), so the declaration is dropped; the element inherits white from .text-white anyway. No effect either way. |
Button text colours use Bootstrap 4 variable names
button.fix.css sets anchor-button text colours with var(--white), var(--primary) and so on (16
declarations). Bootstrap 4 defined those bare custom properties; Bootstrap 5 renamed them all to
--bs-*. Under Bootstrap 5 the bare names resolve to nothing, the declaration is invalid, and the
colour falls back to inherited text. This worked in 5.x, and the 6.0.0 change to Bootstrap 5 broke it.
A straight rename to --bs-white would not be fully correct, because Bootstrap 5 also changed which
buttons take light versus dark text:
| solid button |
Bootstrap 4 text |
Bootstrap 5 text |
| primary, secondary, success, danger, dark |
white |
white |
| info |
white |
black |
| warning |
black |
black |
The file groups warning with the white buttons, so it was already wrong for warning before the
migration, and info now needs black where Bootstrap 4 used white. This wants a per-colour pass, not
a find and replace. (Checked against Bootstrap 4.6 and Bootstrap 5.3.8.)
Vector compatibility rules are heavy-handed
vector-fix.css, loaded only under Vector:
body.skin-vector * { box-sizing: initial } reverts Bootstrap 5's border-box to content-box
for every element under Vector. Confirmed in a browser: cards and buttons compute content-box
with the file present, border-box without it.
body.skin-vector { font-family: sans-serif !important } discards both Bootstrap's and Vector's
font stacks unconditionally. Confirmed in a browser.
- the selector
body.skin-vector *, *::before, *::after scopes only the first of the three; the two
pseudo-element selectors are global. The module only loads under Vector, so this is latent rather
than active, but it reads as a bug (the intent is body.skin-vector *::before, and so on).
Other stale rules (from the stylesheet)
| file |
rule |
issue |
carousel.fix.css |
.carousel .carousel-indicators { margin: 0 0 10px -30% } |
Bootstrap 3 positioned the indicators with a negative margin; Bootstrap 5 centres them with flexbox. The shorthand overrides that and shifts them left by 30% of the carousel width. |
modal.fix.css |
.modal-footer > button { margin-left: 0.5em } |
overrides Bootstrap 5's symmetric footer gap, producing asymmetric spacing. |
modal.fix.css |
.modal-title { color: black } |
Bootstrap 5.3 drives modal colour from --bs-body-color for dark mode support; a hardcoded black forces dark text on a dark-mode modal. |
Couplings worth noting
Cleared against Bootstrap 5.3.8
bootstrap.fix.css (its table.infobox reset is still needed against Bootstrap 5's reboot),
accordion.fix.css, tooltip.fix.css, and the .img-fluid rule in carousel.fix.css.
AI-authored, Claude Code, Opus 4.8 (max); audit directed by @malberts; each finding checked
against Bootstrap 5.3.8, several confirmed in a browser as noted, but not individually
human-reviewed.
Version 6.0.0 migrated the emitted markup and the component JavaScript to Bootstrap 5, but the fix
stylesheets under
modules/still carry rules written for Bootstrap 3 and 4. Some are dead, someapply but do the wrong thing under Bootstrap 5. This is the content-audit half of #90, split out so
that #90 can stay about the per-skin loading mechanism.
Every rule below was checked against a stock Bootstrap 5.3.8 build. Items noted "confirmed in a
browser" were also observed on a running MediaWiki 1.43 install with Extension:Bootstrap 6.0.0; items
noted "from the stylesheet" are read against Bootstrap 5 and were not exercised visually.
Dead rules (cannot match under Bootstrap 5)
popover.vector-fix.css.popover .popover-title.popover-titleis Bootstrap 3; Bootstrap 4 renamed it.popover-header, which is what Bootstrap 5 generates. That rule is the whole file, so the file is inert.carousel.fix.css.carousel-inner > .item > img,... > a > img.itemis Bootstrap 3; the carousel emits.carousel-item.carousel.fix.css.thumbnail > img,.thumbnail a > img.thumbnailis Bootstrap 3; nothing here emits it.card.fix.css.text-white .card-header .card-title { color: var(--white) }var(--white)is undefined in Bootstrap 5 (see below), so the declaration is dropped; the element inherits white from.text-whiteanyway. No effect either way.Button text colours use Bootstrap 4 variable names
button.fix.csssets anchor-button text colours withvar(--white),var(--primary)and so on (16declarations). Bootstrap 4 defined those bare custom properties; Bootstrap 5 renamed them all to
--bs-*. Under Bootstrap 5 the bare names resolve to nothing, the declaration is invalid, and thecolour falls back to inherited text. This worked in 5.x, and the 6.0.0 change to Bootstrap 5 broke it.
A straight rename to
--bs-whitewould not be fully correct, because Bootstrap 5 also changed whichbuttons take light versus dark text:
The file groups
warningwith the white buttons, so it was already wrong forwarningbefore themigration, and
infonow needs black where Bootstrap 4 used white. This wants a per-colour pass, nota find and replace. (Checked against Bootstrap 4.6 and Bootstrap 5.3.8.)
Vector compatibility rules are heavy-handed
vector-fix.css, loaded only under Vector:body.skin-vector * { box-sizing: initial }reverts Bootstrap 5'sborder-boxtocontent-boxfor every element under Vector. Confirmed in a browser: cards and buttons compute
content-boxwith the file present,
border-boxwithout it.body.skin-vector { font-family: sans-serif !important }discards both Bootstrap's and Vector'sfont stacks unconditionally. Confirmed in a browser.
body.skin-vector *, *::before, *::afterscopes only the first of the three; the twopseudo-element selectors are global. The module only loads under Vector, so this is latent rather
than active, but it reads as a bug (the intent is
body.skin-vector *::before, and so on).Other stale rules (from the stylesheet)
carousel.fix.css.carousel .carousel-indicators { margin: 0 0 10px -30% }modal.fix.css.modal-footer > button { margin-left: 0.5em }modal.fix.css.modal-title { color: black }--bs-body-colorfor dark mode support; a hardcoded black forces dark text on a dark-mode modal.Couplings worth noting
alert.fix.cssdefines.alert-default. It looks like dead Bootstrap 3 code, but it is not: theextension still accepts
color=defaultand emitsalert-default, so the rule is a live polyfillfor that value. It cannot be removed independently of the
color=defaultdecision in BS5 follow-up: color="default" attribute renders effectively-unstyled across components #94.vector-fix.cssrules above are about stylesheet content, but whether that file should loadper skin at all is the loading question in Revisit per-skin module loading mechanism #90.
Cleared against Bootstrap 5.3.8
bootstrap.fix.css(itstable.infoboxreset is still needed against Bootstrap 5's reboot),accordion.fix.css,tooltip.fix.css, and the.img-fluidrule incarousel.fix.css.