Prompt – Bootstrap 5 Migration Instructions

Bootstrap 5 Migration Instructions

Overview

Migrate this HTML page from legacy Bootstrap to Bootstrap 5, maintaining all existing functionality while modernizing the codebase for production deployment.

Core Requirements

1. Framework Migration

  • Replace all Bootstrap 3/4 classes with Bootstrap 5 equivalents:
    • Grid: .col-xs-* → .col-*, .col-sm-*, etc.
    • Utilities: .pull-left → .float-start, .text-left → .text-start
    • Components: .panel → .card, .well → .card-body
  • Update CDN links to Bootstrap 5.3.x (latest stable)
  • Remove jQuery dependencies where possible (Bootstrap 5 is jQuery-free)
  • Verify all responsive breakpoints work with new grid system

2. Content & Functionality Preservation

  • DO NOT modify any text content, product descriptions, or data
  • PRESERVE all PHP includes, server-side code, and dynamic elements
  • MAINTAIN existing form field names, IDs, and values
  • KEEP all shopping cart functionality, checkout flows, and user interactions
  • RETAIN custom JavaScript unless it conflicts with Bootstrap 5

3. Code Standards

  • Use semantic HTML5 elements (<main>, <section>, <article>, <aside>)
  • Ensure WCAG 2.1 AA accessibility compliance
  • Apply mobile-first responsive design principles
  • Write valid, production-ready code with no placeholders or TODOs

4. Asset Management

  • Preserve all custom CSS, inline styles, and page-specific styling
  • Keep all meta tags, Open Graph, Schema.org structured data
  • Maintain existing image paths, links, and resource references
  • Only modify styles that conflict with Bootstrap 5 or break responsiveness

5. Quality Assurance

  • Test responsiveness across breakpoints: xs (<576px), sm, md, lg, xl, xxl
  • Validate all forms submit correctly with existing backend processing
  • Ensure shopping cart add/remove/update functions work
  • Check modal dialogs, dropdowns, and interactive components
  • Verify cross-browser compatibility (Chrome, Firefox, Safari, Edge)

Migration Checklist

Before Starting:

  • [ ] Identify current Bootstrap version in use
  • [ ] List all custom components and third-party plugins
  • [ ] Document existing JavaScript dependencies

During Migration:

  • [ ] Update HTML structure to Bootstrap 5 grid
  • [ ] Replace deprecated classes with current equivalents
  • [ ] Test each component as you migrate it
  • [ ] Validate responsive behavior at each breakpoint

After Migration:

  • [ ] Run HTML/CSS validators
  • [ ] Test all interactive elements
  • [ ] Verify mobile and desktop layouts
  • [ ] Check performance impact

Common Bootstrap 5 Changes to Address

Bootstrap 3/4 Bootstrap 5 Notes
.pull-left/right .float-start/end RTL support
.text-left/right .text-start/end RTL support
.ml-* .ms-* Logical properties
.mr-* .me-* Logical properties
data-toggle data-bs-toggle Namespaced attributes
data-target data-bs-target Namespaced attributes

Expected Deliverables

  1. Complete HTML file with Bootstrap 5 implementation
  2. Documentation of major changes made
  3. List of any functionality that couldn't be preserved (if any)
  4. Notes on browser compatibility or known issues

Success Criteria

  • Page loads and displays correctly on all devices
  • All original functionality works without errors
  • Code passes HTML5 validation
  • Performance is maintained or improved
  • No content or features are lost in migration

Important: This is a production migration. The output must be deployment-ready with no broken functionality or missing content.

Shares