Bootrstrap 4 to 5 migration

[s-sajid-ali]

Per Claude Code:

Based on my analysis of your codebase, here's a comprehensive breakdown of what changes are needed to adopt Bootstrap 5:

Current State Analysis

Your codebase is currently using Bootstrap 4.6.1 with the following setup:

• Static files: coldfront/static/bootstrap/bootstrap.min.css and bootstrap.bundle.min.js
• Django Crispy Forms with Bootstrap 4 template pack
• jQuery 3.6.0 dependency
• Custom NYU violet theme
• DataTables with Bootstrap 4 integration

Required Changes for Bootstrap 5 Migration

1. Dependency Updates

  pyproject.toml changes:
  # Replace
  crispy-bootstrap4>=2024.10
  # With
  crispy-bootstrap5>=2024.2

  Django settings (coldfront/config/base.py:147):
  # Change from
  CRISPY_TEMPLATE_PACK = "bootstrap4"
  # To
  CRISPY_TEMPLATE_PACK = "bootstrap5"

2. Static Files Replacement

  Replace Bootstrap 4.6.1 files in coldfront/static/bootstrap/ with Bootstrap 5.3.x:
  - Update bootstrap.min.css
  - Update bootstrap.bundle.min.js
  - Update DataTables files from dataTables.bootstrap4.min.* to dataTables.bootstrap5.min.*

3. Template Updates Required

  Data Attribute Changes (18+ files affected):
  <!-- Bootstrap 4 -->
  data-toggle="modal"
  data-target="#myModal"

  <!-- Bootstrap 5 -->
  data-bs-toggle="modal"
  data-bs-target="#myModal"

  CSS Class Updates:
  <!-- Bootstrap 4 → Bootstrap 5 -->
  ml-auto        → ms-auto
  mr-auto        → me-auto
  sr-only        → visually-hidden
  form-group     → mb-3 (or remove)
  card-deck      → row-cols-* (alternative approach)

4. JavaScript Updates

  Modal interactions (found in allocation templates):
  // Bootstrap 4
  $('#Modal').modal('show');
  $('#Modal').modal('toggle');

  // Bootstrap 5 (vanilla JS)
  var modal = new bootstrap.Modal(document.getElementById('Modal'));
  modal.show();
  modal.toggle();

  Collapse interactions:
  // Bootstrap 4
  $('#collapseOne').collapse();

  // Bootstrap 5
  var collapse = new bootstrap.Collapse(document.getElementById('collapseOne'));

5. Base Template Updates

  Update coldfront/templates/common/base.html:
  - Line 15: Update comment from "Load Bootstrap4" to "Bootstrap 5"
  - Consider removing jQuery dependency (line 20) if not needed elsewhere
  - Update Bootstrap CDN links or static file references

6. Custom Theme Verification

  Test your NYU violet theme (coldfront/static/branding/nyu_violet.css) for compatibility:
  - CSS custom properties may need updates
  - Button and alert styling may need adjustments
  - Form control styling requires review

7. Critical Files to Update

  Templates requiring data-attribute updates:
  - coldfront/templates/allocation/allocation_create.html
  - coldfront/templates/allocation/allocation_list.html
  - coldfront/templates/project/project_list.html
  - coldfront/templates/resource/resource_list.html
  - Plus ~14 other template files

  Static files:
  - coldfront/static/bootstrap/ (complete replacement)
  - coldfront/static/common/css/common.css (verify compatibility)
  - DataTables integration files

8. Optional jQuery Removal

  Since Bootstrap 5 doesn't require jQuery, you could:
  - Remove jQuery dependency entirely
  - Update any custom jQuery code to vanilla JavaScript
  - Reduce overall bundle size

Migration Strategy

1. Phase 1: Update dependencies and static files
2. Phase 2: Update all data-* attributes in templates
3. Phase 3: Replace deprecated CSS classes
4. Phase 4: Update JavaScript interactions
5. Phase 5: Test custom themes and DataTables integration
6. Phase 6: Consider jQuery removal

The migration affects approximately 20+ template files and requires careful testing of all interactive components, especially modals, collapses, and form validations.

⏺ Sources:

• https://getbootstrap.com/docs/5.3/migration/
• https://www.geeksforgeeks.org/bootstrap-5-migration-guide/
• https://bootstrapbay.com/blog/bootstrap-5-migration/
• https://www.creative-tim.com/blog/web-development/bootstrap-5-breaking-changes-migration-guide/
• https://www.section.io/engineering-education/bootstrap-5-vs-bootstrap-4/