Report 17: Bootstrap 4 CSS Pattern Audit¶
Date: 2026-02-27
Phase: 4E
Status: COMPLETE -- All 1,142 patterns replaced (commit a6a776e)
Summary¶
159 of 163 CSS files contained Bootstrap 4 patterns. All 1,142 occurrences (1,125 from initial audit + 17 additional patterns found during replacement) have been replaced with Bootstrap 5 equivalents across all 159 affected files.
The dominant patterns were badge-primary (397 occurrences in 158 files) and form-group (389 occurrences in 141 files), both of which appeared in nearly every client theme file as part of shared styling blocks (news boxes, form layouts).
Scope¶
- Directory:
dbl.Progress/src/www/wwwroot/cssCreditUnion/ - File count: 163 CSS files
- Target: Identify all BS4 class references that need renaming for BS5
Pattern Inventory¶
| # | Pattern | BS5 Replacement | Files Affected | Total Occurrences |
|---|---|---|---|---|
| 1 | .sr-only |
.visually-hidden |
144 | 158 |
| 2 | .form-group |
.mb-3 |
141 | 389 |
| 3 | .badge-primary (and variants) |
.bg-primary |
158 | 397 |
| 4 | .col-xs-* |
.col-* |
53 | 76 |
| 5 | .text-left / .text-right |
.text-start / .text-end |
11 | 35 |
| 6 | .float-left / .float-right |
.float-start / .float-end |
0 | 0 |
| 7 | .ml-N / .mr-N / .pl-N / .pr-N |
.ms-N / .me-N / .ps-N / .pe-N |
14 | 67 |
| 8 | .media (Bootstrap component) |
d-flex pattern |
0 | 0 |
| 9 | .card-deck |
row + row-cols-* |
0 | 0 |
| 10 | .font-weight-bold / .font-weight-normal |
.fw-bold / .fw-normal |
0 | 0 |
| TOTAL | 159 | 1,125 |
Pattern Breakdown¶
.sr-only (144 files, 158 occurrences)¶
Nearly universal. Most files have exactly 1 occurrence, a few (Ansac, Blackrock, Blackraven, Boom, Clonmel, Cooley, Dromara, Heritage, Into, Killarney, MtB, Moyola, Tara) have 2-3.
.form-group (141 files, 389 occurrences)¶
The highest-count individual pattern. Average ~2.8 per file. Files like ClonmelStyles (8), KillarneyStyles (8), BlackravenStyles (6), BoomStyles (6), MoyolaStyles (6), NenaghStyles (6) have the most.
.badge-primary and variants (158 files, 397 occurrences)¶
All are badge-primary specifically (no badge-danger, badge-success, etc. found). Used in news box category badge styling. This is effectively a shared code block duplicated across all client themes.
.col-xs-* (53 files, 76 occurrences)¶
Used in very specific selectors (e.g., div.col-8.col-xs-9.col-sm-10.col-lg-10.imageListText:after). Note: 2 files (AccessStyles, AffinityStyles) only have it in a CSS comment, not as an actual selector.
.text-left / .text-right (11 files, 35 occurrences)¶
.text-left: 10 files, 33 occurrences (DumbartonStyles has 11 alone).text-right: 1 file, 2 occurrences (ProgressIEStyle)
.pl-N / .pr-N (14 files, 67 occurrences)¶
.ml-N: 0 files, 0 occurrences.mr-N: 0 files, 0 occurrences.pl-N: 13 files, 35 occurrences.pr-N: 10 files, 33 occurrences
Most are .pl-0 / .pr-0 overrides on specific elements.
Patterns with Zero Matches¶
.float-left/.float-right: not used in any client CSS.media(Bootstrap component class): not used (.media-column-reverseexists in 3 files but is a custom class).card-deck: not used.font-weight-bold/.font-weight-normal: not used
Top 20 Most Affected Files¶
| Rank | File | Total BS4 Patterns |
|---|---|---|
| 1 | CastlecomerStyles.css | 18 |
| 2 | BallyconnellStyles.css | 16 |
| 3 | KillarneyStyles.css | 15 |
| 4 | DumbartonStyles.css | 15 |
| 5 | ClonmelStyles.css | 15 |
| 6 | BoomStyles.css | 15 |
| 7 | NenaghStyles.css | 14 |
| 8 | TallaghtStyles.css | 13 |
| 9 | MoyolaStyles.css | 13 |
| 10 | FirstTechStyles.css | 13 |
| 11 | CoalislandStyles.css | 13 |
| 12 | BridgendStyles.css | 13 |
| 13 | HeritageStyles.css | 12 |
| 14 | PentecostalStyles.css | 11 |
| 15 | CairdeStyles.css | 11 |
| 16 | BusinessPrinterStyles.css | 11 |
| 17 | BlackravenStyles.css | 11 |
| 18 | progressCu.css | 10 |
| 19 | SynergyStyles.css | 10 |
| 20 | ManorhamiltonStyles.css | 10 |
Unaffected Files (4 of 163)¶
These files contain no Bootstrap 4 patterns:
CambrianStyles-cy.css(Welsh language variant)PremierStyles.cssSmartMoneyStyles-cy.css(Welsh language variant)ThurlesStyles.css
Remediation -- COMPLETE (commit a6a776e)¶
Approach: Automated Find-and-Replace¶
All replacements applied via automated script across all 159 affected files:
| Find | Replace | Occurrences | Status |
|---|---|---|---|
.sr-only |
.visually-hidden |
158 | DONE |
.form-group |
.mb-3 |
389 | DONE |
.text-left |
.text-start |
33 | DONE |
.text-right |
.text-end |
2 | DONE |
.pl- (followed by digit) |
.ps- |
35 | DONE |
.pr- (followed by digit) |
.pe- |
33 | DONE |
.badge-primary |
.bg-primary |
397 | DONE |
.col-xs-N |
.col-N |
76 | DONE |
Zero-occurrence patterns (no action needed): .float-left/right, .media, .card-deck, .font-weight-bold/normal
Coordination with HTML Templates¶
HTML templates were updated in Phase 4B-4D commits (4cfa267, 7cd8ee8, f7f697c, 08e9a5d). Both HTML and CSS selectors now use BS5 class names. The badge-primary to bg-primary rename was coordinated -- both HTML <span class="badge bg-primary"> and CSS .bg-primary selectors are aligned.
Risk Assessment¶
Low risk -- all changes applied. The replacements are 1:1 renames with no semantic change. CSS selectors now match the BS5 class names used in the updated HTML templates.