bootstrap: swap BS4 (alexwine) CSS for bootstrap@5 npm

Completes the Bootstrap 4->5 migration now that every jQuery/BS4 widget is React
(navbar, carousel, dropdowns) — plus the feedback toggle here (Feedback.js:
global `$('#feedback-form').toggle()` -> React state).

- Load Bootstrap 5 CSS from the `bootstrap` npm package in client/index.js
  (imported first so app + component styles and react-bootstrap override it).
- Remove the `alexwine:bootstrap-4` meteor package (BS4 CSS + jQuery + BS4 JS).
  jQuery for jquery-validation still comes from the npm `jquery` dep.
- Utility renames to BS5: ml-auto->ms-auto, float-right->float-end,
  btn-block->w-100, data-toggle->data-bs-toggle (FromNow tooltip).
- forms.scss `.form-label` is no longer a shim (BS5 ships it); comment updated.

Full-app build boots clean; server suite 36 passing. Needs a visual staging pass
across all pages (BS4->5 shifts grid gutters/typography); forms should improve
since react-bootstrap v2 already emitted BS5 markup.
This commit is contained in:
vjrj 2026-07-22 05:55:34 +02:00
parent 9ff9abacc3
commit bddfb392c1
12 changed files with 63 additions and 38 deletions

View file

@ -1,11 +1,10 @@
@use './mixins' as *;
@use './colors' as *;
// react-bootstrap v2 emits Bootstrap 5 form markup (`.form-label`) while we
// still ship the Bootstrap 4 stylesheet (alexwine:bootstrap-4), which has no
// `.form-label`. Shim it until the Bootstrap 4 -> 5 CSS jump lands (tracked as
// debt in UPGRADE.md). v2's Form.Group is a plain div, so restore the old
// per-field bottom margin the removed `.form-group` used to give.
// Bootstrap 5 now provides `.form-label` natively, so this is no longer a shim
// we keep it only for the explicit `display: block` (v2's Form.Group is a plain
// div and some fields render the label inline otherwise). The bottom margin
// matches BS5's own `.form-label`.
.form-label {
display: block;
margin-bottom: 0.5rem;