How Do I Migrate a large Rails 6/7 App from Zurb Foundation to Bootstrap 5?

Question

I'm working on a Rails 6 (soon to be 7) app that is built on Zurb Foundation. I've decided that it makes sense to move to Bootstrap 5 because the support and maintenance of Foundation is getting less and less, whereas Bootstrap is still very active.

The plan would be to install BS5 and slowly start moving each page from Zurb markup to Bootstrap. Let's say the app have 150 unique pages. I'd slowly start migrating each page from Zurb code to Bootstrap code and eventually remove the Foundation gem and be done with it.

The only issue is, they're not going to play nicely if they're both installed at the same time since both depend heavily on the 'row' class.

Any suggestions how I can do this? I thought it might be possible to set a instance variable at the top of each page, telling the layout to use either Bootstrap or Foundation files like below. Does this even make sense?

!!! 5
%html(lang="en-US")
  %head
    %title HostelFunTimes | Free Hostel Booking Software
    %meta(charset="UTF-8")
    %meta(name="viewport" content="width=device-width, initial-scale=1.0")
    %meta{:name => 'description', :content => "HostelFunTimes is a free website for booking cheap hostels."}
    %link{rel:"shortcut icon", href:"/favicon.ico"}
    = csrf_meta_tag

    - if @use_bootstrap_js_and_css == true
      // these would have to be the Bootstrap5 JS and CSS files
      = javascript_include_tag "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
      = stylesheet_link_tag "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css", media: "all"
    
    - else
      // these would be the default Foundation JS and CSS
      = javascript_include_tag "vendor/modernizr"
      = javascript_include_tag "application"
      = stylesheet_link_tag "application", media: "all"

and then at the top of each page it would look like this:

  - @use_bootstrap_js_and_css = true 
    
  <div class="row g-3">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name" aria-label="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
    </div>
  </div>

I'm sure there is a smarter way to do this.