Skip to content

Bootstrap 3 and 4 leftovers in the fix stylesheets #118

Description

@malberts

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions