Upgrade Bootstrap 4 to Bootstrap 5 across monorepo#374
Closed
tlambert03 wants to merge 2 commits intomainfrom
Closed
Upgrade Bootstrap 4 to Bootstrap 5 across monorepo#374tlambert03 wants to merge 2 commits intomainfrom
tlambert03 wants to merge 2 commits intomainfrom
Conversation
This commit upgrades the entire application from Bootstrap 4.6.2 to Bootstrap 5.3.3. Changes include: - Updated Bootstrap dependency from 4.6.2 to 5.3.3 in package.json - Updated Bootstrap CDN link in base.html to version 5.3.3 - Replaced select2-theme-bootstrap4 with select2-bootstrap-5-theme - Updated all Bootstrap data attributes to use the new 'data-bs-' prefix: - data-dismiss → data-bs-dismiss - data-toggle → data-bs-toggle - data-target → data-bs-target - data-slide → data-bs-slide - data-ride → data-bs-ride - data-parent → data-bs-parent - data-spy → data-bs-spy - data-offset → data-bs-offset - Updated close button class from 'close' to 'btn-close' and removed × spans - Updated margin/padding utilities to RTL-friendly versions: - ml-/mr- → ms-/me- - pl-/pr- → ps-/pe- - text-left/text-right → text-start/text-end - float-left/float-right → float-start/float-end - Renamed bootstrap4 template directory to bootstrap5 for crispy forms - Updated Django crispy forms settings to use bootstrap5 template pack - Updated select2 theme imports in JavaScript files Frontend build verified successfully with new Bootstrap 5 assets.
This commit addresses all major Bootstrap 4 to 5 breaking changes that were missed in the initial migration. ## Django/Python Changes: - Installed crispy-bootstrap5==2025.6 package - Upgraded django-crispy-forms from 1.13.0 to 2.5 (required for BS5 support) - Added crispy_bootstrap5 to INSTALLED_APPS - Updated CRISPY_TEMPLATE_PACK from bootstrap4 to bootstrap5 ## SCSS/CSS Fixes (_bootstrap5-fixes.scss): - Removed default link underlines (BS5 adds them by default) - Restored .clearfix functionality (removed in BS5) - Restored .input-group-append and .input-group-prepend (removed in BS5) - Added compatibility classes for custom form controls: - .custom-control → .form-check - .custom-control-input → .form-check-input - .custom-control-label → .form-check-label - .custom-checkbox → .form-check - .custom-radio → .form-check - .custom-switch → .form-check .form-switch - .custom-select → .form-select - Restored .btn-block functionality (removed in BS5) - Restored .no-gutters → .g-0 compatibility - Added text utility aliases (font-weight-*, font-italic, text-monospace) - Recreated .media component (removed in BS5) - Recreated .jumbotron component (removed in BS5) - Fixed .badge-pill → .rounded-pill ## Select2 Theme Fixes (_forms.scss): - Fixed Select2 Bootstrap 5 theme width issues - Added .select2-container--bootstrap-5 styles - Ensured all select2 containers use 100% width - Fixed select2 selection heights for both single and multiple selects - Added min-width for dropdowns ## HTML Template Updates: - Replaced all .custom-control* classes with .form-check* - Replaced all .custom-checkbox with .form-check - Replaced all .custom-radio with .form-check - Replaced all .custom-switch with .form-check .form-switch - Replaced all .custom-select with .form-select ## Specific Issue Fixes: - Fixed .like_buttons alignment (clearfix issue) - Fixed .input-group-prepend styling with labels (PDB select) - Fixed list-group-item form-check layout (custom-control in lists) - Fixed form-control widths (ensure 100% width) ## Files Modified: - backend/config/settings/base.py - pyproject.toml - frontend/src/css/style.scss (added _bootstrap5-fixes.scss import) - frontend/src/css/_bootstrap5-fixes.scss (new file) - frontend/src/css/_forms.scss - Multiple HTML templates with custom-control usage
Owner
Author
|
fixed by #385 |
tlambert03
deleted the
claude/upgrade-bootstrap-4-to-5-016Yd8TPXRiVWhwprtHKBMnS
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This commit upgrades the entire application from Bootstrap 4.6.2 to Bootstrap 5.3.3.
Changes include:
Frontend build verified successfully with new Bootstrap 5 assets.