[WIP] Bootstrap version to Bootstrap 5.3.7 (the latest stable release)

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original description:

@j143/systemds/files/docs

Migrate the Apache SystemDS documentation site (apache.github.io/systemds) from its current Bootstrap version to Bootstrap 5.3.7 (the latest stable release).

Repository Details
Target Repository: apache/systemds (docs folder)
Documentation Site: apache.github.io/systemds
Current Framework: Bootstrap (version to be determined)
Target Framework: Bootstrap 5.3.7

Migration Steps

1. Assessment Phase

Analyze the current documentation structure in /docs folder
Identify current Bootstrap version and dependencies
Catalog all HTML templates, CSS customizations, and JavaScript components
Document current responsive breakpoints and grid usage
List all Bootstrap components currently in use (navbars, cards, modals, etc.)

2. Dependency Updates

Update Bootstrap CDN links to version 5.3.7:
html

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"></script>

Remove jQuery dependency (Bootstrap 5 uses vanilla JavaScript)
Update any package.json dependencies if using npm/yarn

3. HTML Structure Updates

Update class names for Bootstrap 5 compatibility:

ml-* → ms-* (margin-left to margin-start)
mr-* → me-* (margin-right to margin-end)
pl-* → ps-* (padding-left to padding-start)
pr-* → pe-* (padding-right to padding-end)
text-left → text-start
text-right → text-end
float-left → float-start
float-right → float-end

4. Component-Specific Updates

Navigation: Update navbar structure for Bootstrap 5
Cards: Review card component usage and spacing
Modals: Update modal data attributes (data-bs-* instead of data-*)
Tooltips/Popovers: Update initialization code for vanilla JS
Forms: Update form control classes and validation styles
Buttons: Review button styles and sizing classes

5. JavaScript Migration

Replace jQuery-dependent code with vanilla JavaScript
Update Bootstrap JavaScript component initialization:
javascript// Old: $('#myModal').modal('show')
// New: new bootstrap.Modal(document.getElementById('myModal')).show()

Update event listeners for Bootstrap 5 events

6. CSS Customizations

Review and update custom CSS overrides for Bootstrap 5 compatibility
Update SCSS variables if using custom builds
Test responsive behavior across all breakpoints
Ensure color scheme compatibility with Bootstrap 5's updated palette

7. Documentation-Specific Considerations

Update syntax highlighting integration if used
Ensure code block styling remains consistent
Verify table responsiveness with Bootstrap 5 table classes
Check sidebar/navigation functionality
Maintain accessibility improvements from Bootstrap 5

8. Testing & Validation

Test across modern browsers (Chrome, Firefox, Safari, Edge)
Validate responsive design on mobile, tablet, and desktop
Check accessibility compliance with Bootstrap 5 improvements
Verify all interactive components work correctly
Test documentation build process

9. Performance Optimization

Leverage Bootstrap 5's improved performance
Minify custom CSS and JavaScript
Optimize asset loading order
Consider using Bootstrap 5's utility classes to reduce custom CSS

10. Documentation Updates

Update any documentation that references Bootstrap usage
Add migration notes for future developers
Update build instructions if applicable

Files to Focus On

All HTML templates in /docs
Custom CSS files
JavaScript files with Bootstrap dependencies
Configuration files (if using build tools)
Any Jekyll or static site generator configuration

Success Criteria

Site loads correctly with Bootstrap 5.3.7
All pages maintain visual consistency and functionality
Responsive design works across all devices
No JavaScript errors in browser console
Documentation build process completes successfully
Performance metrics equal or better than previous version

Additional Notes

Maintain backward compatibility where possible
Document any breaking changes for future reference
Consider creating a staging branch for testing before merging to main
Ensure the migration doesn't break the automated documentation generation process

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[j143]

@copilot work on this please

[Copilot]

@j143 Unfortunately I hit an unexpected error while processing your comment. I've automatically reported this to GitHub.

You can ask me to try again later by mentioning me in a new comment.

If you want to contact GitHub about this error, please mention the following identifier so they can better serve you: f9532eeb-7a42-4d3f-8890-998fea6d4da9

Sorry for the inconvenience!