diff --git a/js/tests/visual/menu-submenu.html b/js/tests/visual/menu-submenu.html
index 9b68c168ce18..f29f74f97664 100644
--- a/js/tests/visual/menu-submenu.html
+++ b/js/tests/visual/menu-submenu.html
@@ -413,7 +413,7 @@ <h2>With Disabled Items</h2>
       <section class="test-section">
         <h2>Feature Summary</h2>
         <div class="row">
-          <div class="col-md-6">
+          <div class="md:col-6">
             <h5>Mouse Interaction</h5>
             <ul class="feature-list">
               <li>✅ Hover to open submenus</li>
@@ -423,7 +423,7 @@ <h5>Mouse Interaction</h5>
               <li>✅ Sibling submenus auto-close</li>
             </ul>
           </div>
-          <div class="col-md-6">
+          <div class="md:col-6">
             <h5>Keyboard Navigation</h5>
             <ul class="feature-list">
               <li>✅ Arrow Up/Down - navigate items</li>
@@ -434,7 +434,7 @@ <h5>Keyboard Navigation</h5>
               <li>✅ Home/End - jump to first/last item</li>
             </ul>
           </div>
-          <div class="col-md-6">
+          <div class="md:col-6">
             <h5>Viewport Detection</h5>
             <ul class="feature-list">
               <li>✅ Default: opens to inline-end (right in LTR)</li>
@@ -443,7 +443,7 @@ <h5>Viewport Detection</h5>
               <li>✅ Auto-update on scroll/resize</li>
             </ul>
           </div>
-          <div class="col-md-6">
+          <div class="md:col-6">
             <h5>Mobile Mode</h5>
             <ul class="feature-list">
               <li>✅ Slide-over animation</li>
@@ -452,7 +452,7 @@ <h5>Mobile Mode</h5>
               <li>✅ Configurable breakpoint</li>
             </ul>
           </div>
-          <div class="col-md-6">
+          <div class="md:col-6">
             <h5>Accessibility</h5>
             <ul class="feature-list">
               <li>✅ aria-haspopup on submenu triggers</li>
@@ -461,7 +461,7 @@ <h5>Accessibility</h5>
               <li>✅ Focus returns to trigger on close</li>
             </ul>
           </div>
-          <div class="col-md-6">
+          <div class="md:col-6">
             <h5>Configuration Options</h5>
             <ul class="feature-list">
               <li>✅ submenuTrigger: 'click' | 'hover' | 'both'</li>
diff --git a/js/tests/visual/menu.html b/js/tests/visual/menu.html
index 7e9ecba1516d..373fe7a7a42c 100644
--- a/js/tests/visual/menu.html
+++ b/js/tests/visual/menu.html
@@ -60,7 +60,7 @@ <h1>Menu <small>Bootstrap Visual Test</small></h1>
       </ul>
 
       <div class="row">
-        <div class="col-sm-12 mt-4">
+        <div class="sm:col-12 mt-4">
           <div>
             <button type="button" class="btn-solid theme-secondary" data-bs-toggle="menu" aria-expanded="false">Menu</button>
             <div class="menu">
@@ -80,7 +80,7 @@ <h1>Menu <small>Bootstrap Visual Test</small></h1>
           </div>
         </div>
 
-        <div class="col-sm-12 mt-4">
+        <div class="sm:col-12 mt-4">
           <div class="btn-group">
             <button type="button" class="btn-solid theme-secondary" data-bs-toggle="menu" data-bs-placement="top-start" aria-expanded="false">Menu (top)</button>
             <div class="menu">
@@ -102,7 +102,7 @@ <h1>Menu <small>Bootstrap Visual Test</small></h1>
           </div>
         </div>
 
-        <div class="col-sm-12 mt-4">
+        <div class="sm:col-12 mt-4">
           <div class="btn-group">
             <a href="#" class="btn-solid theme-secondary">Menu (top) split align end</a>
             <button type="button" id="menu-page-subheader-button-3" class="btn-solid theme-secondary menu-toggle-split" data-bs-toggle="menu" data-bs-placement="top-end" aria-expanded="false">
@@ -124,7 +124,7 @@ <h1>Menu <small>Bootstrap Visual Test</small></h1>
           </div>
         </div>
 
-        <div class="col-sm-12 mt-4">
+        <div class="sm:col-12 mt-4">
           <div class="btn-group">
             <a href="#" class="btn-solid theme-secondary">Menu (end) split</a>
             <button type="button" id="menu-page-subheader-button-4" class="btn-solid theme-secondary menu-toggle-split" data-bs-toggle="menu" data-bs-placement="right-start" aria-expanded="false">
@@ -171,7 +171,7 @@ <h1>Menu <small>Bootstrap Visual Test</small></h1>
       </div>
 
       <div class="row">
-        <div class="col-sm-3 mt-4">
+        <div class="sm:col-3 mt-4">
           <div class="btn-group">
             <button type="button" class="btn-solid theme-secondary">Menu reference</button>
             <button type="button" class="btn-solid theme-secondary" data-bs-toggle="menu" aria-expanded="false" data-bs-reference="parent">
@@ -184,7 +184,7 @@ <h1>Menu <small>Bootstrap Visual Test</small></h1>
             </div>
           </div>
         </div>
-        <div class="col-sm-3 mt-4">
+        <div class="sm:col-3 mt-4">
           <div>
             <button class="btn-solid theme-secondary" type="button" data-bs-toggle="menu" data-bs-display="static" aria-expanded="false">
               Menu with static display