Skip to content

Bump bootstrap to 5.3.8 and fix breaking changes#6022

Merged
mononaut merged 20 commits intomasterfrom
natsoni/bootstrap-5
Mar 31, 2026
Merged

Bump bootstrap to 5.3.8 and fix breaking changes#6022
mononaut merged 20 commits intomasterfrom
natsoni/bootstrap-5

Conversation

@natsoni
Copy link
Copy Markdown
Contributor

@natsoni natsoni commented Aug 28, 2025

This PR is an attempt to fix all breaking changes introduced by next major version 5 of bootstrap which is needed to resolve deprecated transitive dependency [email protected].

Migration guide: https://getbootstrap.com/docs/5.3/migration/#v500

@cla-bot cla-bot bot added the cla-signed label Aug 28, 2025
@softsimon
Copy link
Copy Markdown
Member

softsimon commented Aug 28, 2025 •
edited
Loading

Padding missing on the Nav in small/medium, and some horizontal scroll showing up in a medium/small size width.

Screenshot 2025-08-28 at 22 46 33

@natsoni natsoni force-pushed the natsoni/bootstrap-5 branch from 5970b2f to ac12222 Compare August 29, 2025 08:41
@softsimon
Copy link
Copy Markdown
Member

softsimon commented Aug 30, 2025

Black instead of white text

Screenshot 2025-08-30 at 15 07 51 Screenshot 2025-08-30 at 15 07 45

@wiz
Copy link
Copy Markdown
Member

wiz commented Aug 30, 2025

maybe ask @knorrium to try and break this PR as well, or at least find breaking changes

@natsoni natsoni force-pushed the natsoni/bootstrap-5 branch from ac12222 to 055d388 Compare September 9, 2025 13:19
@natsoni natsoni force-pushed the natsoni/bootstrap-5 branch from 5ba23cf to 09b36a2 Compare January 6, 2026 22:40
@wiz wiz added this to the v3.4.0 milestone Jan 6, 2026
@orangesurf orangesurf assigned nymkappa and natsoni and unassigned nymkappa Jan 22, 2026
@natsoni natsoni marked this pull request as ready for review March 16, 2026 17:15
Copilot AI review requested due to automatic review settings March 16, 2026 17:15
@natsoni
Copy link
Copy Markdown
Contributor Author

natsoni commented Mar 16, 2026

This is ready for review, I applied latest fixes I could find thanks to @knorrium's nice tool

Copilot AI reviewed Mar 16, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Updates the Angular frontend to Bootstrap v5 to remove deprecated transitive dependencies (notably Popper v1) and align markup/styles with Bootstrap 5 class and component changes.

Changes:

  • Bump Bootstrap from 4.6.x to 5.3.x (and update lockfile dependencies accordingly).
  • Migrate templates from Bootstrap 4 utility/classes to Bootstrap 5 equivalents (e.g., ml-*→ms-*, text-right→text-end, badge class changes, btn-close, etc.).
  • Refactor several radio/toggle button groups to Bootstrap 5 btn-check patterns and adjust theme SCSS variables for Bootstrap 5.

Reviewed changes

Copilot reviewed 123 out of 124 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
frontend/src/theme-softsimon.scss Bootstrap 5 theme var updates (form-select indicator, add --pink).
frontend/src/theme-contrast.scss Bootstrap 5 theme var updates (form-select indicator, add --pink).
frontend/src/theme-bukele.scss Bootstrap 5 theme var updates (form-select indicator, add --pink).
frontend/src/app/shared/components/testnet-alert/testnet-alert.component.scss Update close button styling for Bootstrap 5.
frontend/src/app/shared/components/testnet-alert/testnet-alert.component.html Use Bootstrap 5 dismissible alert + btn-close.
frontend/src/app/shared/components/global-footer/global-footer.component.scss Footer layout overrides to compensate for Bootstrap 5 grid changes.
frontend/src/app/shared/components/global-footer/global-footer.component.html Replace left/right margin utilities with start/end.
frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html Convert toggle radios to Bootstrap 5 btn-check pattern.
frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html Replace Bootstrap 4 alignment/float utilities with Bootstrap 5 equivalents.
frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html Replace Bootstrap 4 alignment/float utilities with Bootstrap 5 equivalents.
frontend/src/app/lightning/nodes-ranking/oldest-nodes/oldest-nodes.component.html Replace Bootstrap 4 alignment/float utilities with Bootstrap 5 equivalents.
frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html Replace Bootstrap 4 spacing/alignment utilities with Bootstrap 5 equivalents.
frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html Replace Bootstrap 4 spacing/alignment utilities with Bootstrap 5 equivalents.
frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html Replace Bootstrap 4 spacing/alignment utilities with Bootstrap 5 equivalents.
frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html Replace Bootstrap 4 spacing/alignment utilities with Bootstrap 5 equivalents.
frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html Convert toggle radios to Bootstrap 5 btn-check pattern.
frontend/src/app/lightning/nodes-list/nodes-list.component.html Replace Bootstrap 4 alignment utilities with Bootstrap 5 equivalents.
frontend/src/app/lightning/node/node.component.html Replace Bootstrap 4 spacing/badge classes with Bootstrap 5 equivalents.
frontend/src/app/lightning/node/node-preview.component.html Replace Bootstrap 4 badge classes with Bootstrap 5 equivalents.
frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html Replace Bootstrap 4 padding utilities with Bootstrap 5 equivalents.
frontend/src/app/lightning/justice-list/justice-list.component.html Replace Bootstrap 4 alignment/float utilities with Bootstrap 5 equivalents.
frontend/src/app/lightning/group/group.component.html Replace Bootstrap 4 spacing/alignment utilities with Bootstrap 5 equivalents.
frontend/src/app/lightning/channels-list/channels-list.component.html Replace Bootstrap 4 alignment/badge classes with Bootstrap 5 equivalents.
frontend/src/app/lightning/channel/closing-type/closing-type.component.html Update badge markup for Bootstrap 5.
frontend/src/app/lightning/channel/channel.component.html Replace Bootstrap 4 badge classes with Bootstrap 5 equivalents.
frontend/src/app/lightning/channel/channel-preview.component.html Replace Bootstrap 4 badge classes with Bootstrap 5 equivalents.
frontend/src/app/lightning/channel/channel-box/channel-box.component.html Replace Bootstrap 4 badge classes with Bootstrap 5 equivalents.
frontend/src/app/docs/api-docs/api-docs.component.html Replace Bootstrap 4 text alignment with Bootstrap 5 equivalents.
frontend/src/app/dashboard/dashboard.component.html Replace Bootstrap 4 spacing/badge classes; update radio toggle markup.
frontend/src/app/components/wallet/wallet.component.html Replace Bootstrap 4 text alignment with Bootstrap 5 equivalents.
frontend/src/app/components/tx-fee-rating/tx-fee-rating.component.html Replace Bootstrap 4 badge classes with Bootstrap 5 equivalents.
frontend/src/app/components/twitter-widget/twitter-widget.component.html Replace Bootstrap 4 margin utility with Bootstrap 5 equivalent.
frontend/src/app/components/twitter-login/twitter-login.component.html Replace Bootstrap 4 margin utility with Bootstrap 5 equivalent.
frontend/src/app/components/treasuries/treasuries.component.html Replace Bootstrap 4 padding utilities with Bootstrap 5 equivalents.
frontend/src/app/components/transactions-list/transactions-list.component.html Replace Bootstrap 4 spacing/alignment/badge classes with Bootstrap 5 equivalents.
frontend/src/app/components/transaction/transaction.component.html Replace Bootstrap 4 spacing/float/text alignment with Bootstrap 5 equivalents.
frontend/src/app/components/transaction/transaction-raw.component.html Replace Bootstrap 4 spacing/float/text alignment with Bootstrap 5 equivalents.
frontend/src/app/components/transaction/transaction-preview.component.html Replace Bootstrap 4 spacing/alignment/badge classes with Bootstrap 5 equivalents.
frontend/src/app/components/transaction/transaction-details/transaction-details.component.scss Adjust button active-state variables for Bootstrap 5.
frontend/src/app/components/transaction/transaction-details/transaction-details.component.html Replace Bootstrap 4 spacing/badge/float utilities with Bootstrap 5 equivalents.
frontend/src/app/components/transaction/cpfp-info.component.html Replace Bootstrap 4 text alignment/badge classes with Bootstrap 5 equivalents.
frontend/src/app/components/trademark-policy/trademark-policy.component.html Replace Bootstrap 4 text alignment with Bootstrap 5 equivalents.
frontend/src/app/components/tracker/tracker.component.scss Update theme color var usage to new naming.
frontend/src/app/components/tracker/tracker.component.html Replace Bootstrap 4 margin utility; adjust header layout behavior.
frontend/src/app/components/timezone-selector/timezone-selector.component.html Migrate custom-select to Bootstrap 5 form-select.
frontend/src/app/components/theme-selector/theme-selector.component.scss Migrate selector styles from custom-select to form-select.
frontend/src/app/components/theme-selector/theme-selector.component.html Migrate custom-select to Bootstrap 5 form-select.
frontend/src/app/components/test-transactions/test-transactions.component.html Replace Bootstrap 4 text alignment/margin with Bootstrap 5 equivalents.
frontend/src/app/components/terms-of-service/terms-of-service.component.html Replace Bootstrap 4 text alignment with Bootstrap 5 equivalents.
frontend/src/app/components/stratum/stratum-list/stratum-list.component.html Replace Bootstrap 4 float utility with Bootstrap 5 equivalent.
frontend/src/app/components/statistics/statistics.component.scss Adjust selectors for Bootstrap 5 .btn-check markup.
frontend/src/app/components/statistics/statistics.component.html Convert toggle radios to Bootstrap 5 btn-check pattern.
frontend/src/app/components/stale-list/stale-list.component.html Replace Bootstrap 4 spacing/badge classes with Bootstrap 5 equivalents.
frontend/src/app/components/simpleproof-widget/simpleproof-widget.component.html Replace Bootstrap 4 spacing/alignment/badge classes with Bootstrap 5 equivalents.
frontend/src/app/components/simpleproof-widget/simpleproof-cubo-widget.component.html Replace Bootstrap 4 spacing/alignment/badge classes with Bootstrap 5 equivalents.
frontend/src/app/components/search-form/search-form.component.scss Rename submit button class and keep layout width constraint.
frontend/src/app/components/search-form/search-form.component.html Replace Bootstrap 4 margin utility; update submit button class.
frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html Replace Bootstrap 4 spacing/badge classes with Bootstrap 5 equivalents.
frontend/src/app/components/rbf-list/rbf-list.component.html Replace Bootstrap 4 float/spinner spacing and badge classes; start using btn-check.
frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.html Migrate custom-select to Bootstrap 5 form-select.
frontend/src/app/components/push-transaction/push-transaction.component.html Replace Bootstrap 4 text alignment/margins with Bootstrap 5 equivalents.
frontend/src/app/components/privacy-policy/privacy-policy.component.html Replace Bootstrap 4 text alignment with Bootstrap 5 equivalents.
frontend/src/app/components/price-chart/price-chart.component.html Replace Bootstrap 4 padding utility with Bootstrap 5 equivalent.
frontend/src/app/components/pool/pool.component.scss Update skeleton bg var and add badge padding helper.
frontend/src/app/components/ord-data/ord-data.component.html Replace Bootstrap 4 margin utility with Bootstrap 5 equivalent.
frontend/src/app/components/ngx-bootstrap-multiselect/ngx-bootstrap-multiselect.component.html Remove deprecated input-group prepend/append markup for Bootstrap 5.
frontend/src/app/components/mining-dashboard/mining-dashboard.component.html Replace Bootstrap 4 padding utilities with Bootstrap 5 equivalents.
frontend/src/app/components/menu/menu.component.html Replace Bootstrap 4 margin utilities with Bootstrap 5 equivalents.
frontend/src/app/components/mempool-block/mempool-block.component.html Replace Bootstrap 4 float utility with Bootstrap 5 equivalent.
frontend/src/app/components/master-page/master-page.component.html Replace Bootstrap 4 spacing/badge classes with Bootstrap 5 equivalents.
frontend/src/app/components/master-page-preview/master-page-preview.component.html Replace Bootstrap 4 margin utilities with Bootstrap 5 equivalents.
frontend/src/app/components/loading-indicator/loading-indicator.component.html Replace Bootstrap 4 spacing/badge pill usage with Bootstrap 5 equivalents.
frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html Replace Bootstrap 4 alignment/float utilities with Bootstrap 5 equivalents.
frontend/src/app/components/liquid-master-page/liquid-master-page.component.html Replace Bootstrap 4 spacing/badge classes with Bootstrap 5 equivalents.
frontend/src/app/components/language-selector/language-selector.component.html Migrate custom-select to Bootstrap 5 form-select.
frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html Convert toggle radios to Bootstrap 5 btn-check pattern.
frontend/src/app/components/hashrate-chart/hashrate-chart.component.html Convert toggle radios to Bootstrap 5 btn-check pattern.
frontend/src/app/components/github-login.component/github-login.component.html Replace Bootstrap 4 margin utility with Bootstrap 5 equivalent.
frontend/src/app/components/footer/footer.component.html Replace Bootstrap 4 badge pill usage with Bootstrap 5 equivalents.
frontend/src/app/components/fiat-selector/fiat-selector.component.html Migrate custom-select to Bootstrap 5 form-select.
frontend/src/app/components/faucet/faucet.component.html Remove deprecated input-group prepend markup; replace spacing/alignment utilities.
frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.component.html Replace Bootstrap 4 text alignment utilities with Bootstrap 5 equivalents.
frontend/src/app/components/custom-dashboard/custom-dashboard.component.html Replace Bootstrap 4 padding utilities; update radio toggle markup.
frontend/src/app/components/clipboard/clipboard.component.ts Default button spacing class updated to Bootstrap 5 ms-1.
frontend/src/app/components/calculator/calculator.component.scss Add calculator-specific layout classes and datepicker overrides.
frontend/src/app/components/calculator/calculator.component.html Remove deprecated input-group prepend markup; update spacing utilities.
frontend/src/app/components/block/block.component.scss Adjust block subtitle layout positioning for Bootstrap 5 changes.
frontend/src/app/components/block/block.component.html Replace Bootstrap 4 badge/spacing/alignment utilities with Bootstrap 5 equivalents.
frontend/src/app/components/block/block-transactions.component.html Replace Bootstrap 4 text alignment/float utilities with Bootstrap 5 equivalents.
frontend/src/app/components/block/block-preview.component.html Replace Bootstrap 4 badge classes with Bootstrap 5 equivalents.
frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.html Convert toggle radios to Bootstrap 5 btn-check pattern.
frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html Convert toggle radios to Bootstrap 5 btn-check pattern.
frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html Replace Bootstrap 4 badge/spacing classes with Bootstrap 5 equivalents.
frontend/src/app/components/block-overview-graph/block-overview-graph.component.html Replace Bootstrap 4 spinner margin utility with Bootstrap 5 equivalent.
frontend/src/app/components/block-health-graph/block-health-graph.component.html Convert toggle radios to Bootstrap 5 btn-check pattern.
frontend/src/app/components/block-filters/block-filters.component.ts Adjust click-away handling for updated toggle markup.
frontend/src/app/components/block-filters/block-filters.component.scss Update theme color var usage to new naming.
frontend/src/app/components/block-filters/block-filters.component.html Convert toggle radios to Bootstrap 5 btn-check pattern and update floats.
frontend/src/app/components/block-fees-graph/block-fees-graph.component.html Convert toggle radios to Bootstrap 5 btn-check pattern.
frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html Convert toggle radios to Bootstrap 5 btn-check pattern.
frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.html Remove deprecated input-group append markup.
frontend/src/app/components/assets/assets-nav/assets-nav.component.html Remove deprecated input-group append markup.
frontend/src/app/components/amount-selector/amount-selector.component.html Migrate custom-select to Bootstrap 5 form-select.
frontend/src/app/components/address/address.component.html Replace Bootstrap 4 typography/alignment utilities with Bootstrap 5 equivalents.
frontend/src/app/components/address-labels/address-labels.component.html Replace Bootstrap 4 badge pill usage with Bootstrap 5 equivalents.
frontend/src/app/components/address-group/address-group.component.html Replace Bootstrap 4 float utility with Bootstrap 5 equivalent.
frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html Replace Bootstrap 4 float utility with Bootstrap 5 equivalent.
frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html Replace Bootstrap 4 padding utilities with Bootstrap 5 equivalents.
frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.html Convert toggle radios to Bootstrap 5 btn-check pattern.
frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html Replace Bootstrap 4 badge classes with Bootstrap 5 equivalents.
frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html Replace Bootstrap 4 badge classes with Bootstrap 5 equivalents.
frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss Adjust row child sizing; ensure .form-text block display.
frontend/package.json Bump Bootstrap dependency to ~5.3.6.
frontend/package-lock.json Lockfile updated for Bootstrap 5.x (+ Popper v2) dependency tree.
Files not reviewed (1)
  • frontend/package-lock.json: Language not supported

You can also share your feedback on Copilot code review. Take the survey.

@natsoni natsoni force-pushed the natsoni/bootstrap-5 branch from a39e8de to d7afdbf Compare March 16, 2026 17:30
@natsoni natsoni force-pushed the natsoni/bootstrap-5 branch from d7afdbf to 54540a8 Compare March 16, 2026 17:32
@natsoni natsoni changed the title Bump bootstrap to 5.3.6 and fix breaking changes Bump bootstrap to 5.3.8 and fix breaking changes Mar 16, 2026
@natsoni natsoni force-pushed the natsoni/bootstrap-5 branch from 04322fc to b04cede Compare March 20, 2026 15:20
@natsoni natsoni force-pushed the natsoni/bootstrap-5 branch from b04cede to b0939f3 Compare March 26, 2026 08:28
@natsoni natsoni mentioned this pull request Mar 30, 2026
Open
@mononaut
Copy link
Copy Markdown
Contributor

mononaut commented Mar 30, 2026 •
edited
Loading

a few differences I noticed during initial review:

Old New
Screenshot 2026-03-30 at 7 37 58 AM Screenshot 2026-03-30 at 7 38 06 AM
Screenshot 2026-03-30 at 7 36 28 AM Screenshot 2026-03-30 at 7 36 22 AM
Screenshot 2026-03-30 at 7 36 41 AM Screenshot 2026-03-30 at 7 36 47 AM
Screenshot 2026-03-30 at 7 37 01 AM Screenshot 2026-03-30 at 7 36 58 AM
Screenshot 2026-03-30 at 7 38 46 AM Screenshot 2026-03-30 at 7 38 51 AM
Screenshot 2026-03-30 at 7 39 28 AM Screenshot 2026-03-30 at 7 39 33 AM
Screenshot 2026-03-30 at 7 40 33 AM Screenshot 2026-03-30 at 7 40 29 AM
Screenshot 2026-03-30 at 7 41 11 AM Screenshot 2026-03-30 at 7 41 07 AM
Screenshot 2026-03-30 at 7 44 19 AM Screenshot 2026-03-30 at 7 44 25 AM
Screenshot 2026-03-30 at 8 03 06 AM Screenshot 2026-03-30 at 8 03 02 AM
Screenshot 2026-03-30 at 7 57 56 AM missing active/selected CSS state?
Screenshot 2026-03-30 at 9 07 27 AM Screenshot 2026-03-30 at 9 07 32 AM
Screenshot 2026-03-30 at 9 07 55 AM Screenshot 2026-03-30 at 9 08 00 AM
Screenshot 2026-03-30 at 9 13 12 AM Screenshot 2026-03-30 at 9 13 16 AM

some of these are improvements, some are regressions, but in either case we should make sure the changes are deliberate

@natsoni
Copy link
Copy Markdown
Contributor Author

natsoni commented Mar 31, 2026 •
edited
Loading

Addressed some of the above:

  • CPFP button active state
  • lightning address bar
Screenshot 2026-03-31 at 09 49 46
  • form label margin
Screenshot 2026-03-31 at 09 24 56
  • remaining italic style mismatch
Screenshot 2026-03-31 at 09 23 52

Once this gets merged I'll come up with a short migration guide with the main classname changes since some are non obvious (e.g. font-italic -> fst-italic)

@mononaut
Copy link
Copy Markdown
Contributor

mononaut commented Mar 31, 2026

form labels & italic style are fixed

this got worse somehow lol
Screenshot 2026-03-31 at 1 21 58 AM

the rest doesn't seem super important

@mononaut
Copy link
Copy Markdown
Contributor

mononaut commented Mar 31, 2026

although it would be nice to fix the alignment of this checkbox
Screenshot 2026-03-30 at 7 36 22 AM

@natsoni
Copy link
Copy Markdown
Contributor Author

natsoni commented Mar 31, 2026

this got worse somehow lol Screenshot 2026-03-31 at 1 21 58 AM

That was caused by a global override on the hybrid frontend styles that I just removed, should be fixed on latest commits

@mononaut
Copy link
Copy Markdown
Contributor

mononaut commented Mar 31, 2026

getting closer (time span buttons are still slightly taller than the others)

Screenshot 2026-03-31 at 1 36 40 AM

@natsoni natsoni force-pushed the natsoni/bootstrap-5 branch from de97dc3 to 246c46b Compare March 31, 2026 02:04
@natsoni
Copy link
Copy Markdown
Contributor Author

natsoni commented Mar 31, 2026

Should be fixed now:
Screenshot 2026-03-31 at 11 03 13

Screenshot 2026-03-31 at 11 03 38

mononaut
mononaut approved these changes Mar 31, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@mononaut mononaut left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested ACK @ [246c46b]

@mononaut mononaut merged commit bcba5fb into master Mar 31, 2026
14 checks passed
@mononaut mononaut deleted the natsoni/bootstrap-5 branch March 31, 2026 02:16
@natsoni natsoni mentioned this pull request Mar 31, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@mononaut mononaut mononaut approved these changes

Assignees

@natsoni natsoni

Labels

cla-signed

Projects

None yet

Milestone

v3.4.0

Development

Successfully merging this pull request may close these issues.

7 participants

@natsoni @softsimon @wiz @mononaut @nymkappa @orangesurf