Prompt: Migrate Legacy Layout to Bootstrap 5

✅ Prompt: Migrate Legacy Layout to Bootstrap 5

Convert the provided legacy HTML/PHP layout (based on Bootstrap 3) to a modern, responsive Bootstrap 5 layout.

Requirements

1. 

Preserve All Original Functionality

  • Keep all PHP includes, shopping cart code, metadata, JavaScript, inline styles, and structured data intact.
  • Ensure all form submissions, interactive components, and shopping logic continue to work.

2. 

Use Clean, Responsive Bootstrap 5 Code

  • Replace deprecated Bootstrap 3 classes with Bootstrap 5 equivalents.
  • Implement mobile-first, accessible markup using semantic HTML5.

3. 

Retain All Page-Specific Content

  • Do not use placeholder content. Retain and format all original headings, text, images, buttons, and dynamic content.

Migration Checklist

Legacy Class (Bootstrap 3) New Class (Bootstrap 5)
.pull-left / .pull-right .float-start / .float-end
.visible-xs / .hidden-sm Use .d-* utilities
.btn-default .btn-secondary or .btn-outline-*
.panel .card
.navbar-toggle .navbar-toggler
.input-lg .form-control-lg

Include any additional component-specific mappings as needed.

Validation & Testing

  • ✅ Test responsiveness at all breakpoints (xs, sm, md, lg, xl, xxl)
  • ✅ Verify accessibility compliance (WCAG 2.1 AA minimum)
  • ✅ Confirm layout matches original visual structure and branding
  • ✅ Test JavaScript and PHP integration on all migrated pages

Deliverables

  • Fully converted, production-ready HTML/PHP layout using Bootstrap 5
  • No deprecated classes or unused scripts
  • Clean and maintainable markup
  • Documented list of all class replacements and layout modifications
Shares