diff --git a/packages/vue-components/src/Modal.vue b/packages/vue-components/src/Modal.vue
index 180fa74962..126d0df720 100644
--- a/packages/vue-components/src/Modal.vue
+++ b/packages/vue-components/src/Modal.vue
@@ -21,11 +21,10 @@
         </h5>
         <button
           type="button"
-          class="close"
+          class="btn-close"
           aria-label="Close"
           @click="close()"
         >
-          <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
diff --git a/packages/vue-components/src/TipBox.vue b/packages/vue-components/src/TipBox.vue
index c7c2e535f8..588aa13ecf 100644
--- a/packages/vue-components/src/TipBox.vue
+++ b/packages/vue-components/src/TipBox.vue
@@ -52,11 +52,10 @@
         <button
           v-if="dismissible"
           type="button"
-          class="close close-with-heading"
-          data-dismiss="alert"
+          class="btn-close close-with-heading"
+          data-bs-dismiss="alert"
           aria-label="Close"
         >
-          <span aria-hidden="true">&times;</span>
         </button>
       </div>
 
@@ -98,11 +97,10 @@
         <button
           v-if="dismissible && !headerBool()"
           type="button"
-          class="close"
-          data-dismiss="alert"
+          class="btn-close"
+          data-bs-dismiss="alert"
           aria-label="Close"
         >
-          <span aria-hidden="true">&times;</span>
         </button>
       </div>
     </div>
@@ -346,14 +344,20 @@ export default {
     }
 
     .close-with-heading {
-        top: auto;
-        padding: 0 1.25rem;
+        top: 0;
+        right: 0;
+        position: absolute;
+        padding: 1rem;
     }
 
     .close-with-heading > span {
         vertical-align: text-top;
     }
 
+    .alert-dismissible .btn-close {
+        padding: 1rem;
+    }
+
     .contents > :last-child {
         margin-bottom: 0;
     }
diff --git a/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap
index efe46193bb..a2cce49141 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap
@@ -51,15 +51,9 @@ exports[`Modal can be centered 1`] = `
              
             <button
               aria-label="Close"
-              class="close"
+              class="btn-close"
               type="button"
-            >
-              <span
-                aria-hidden="true"
-              >
-                ×
-              </span>
-            </button>
+            />
           </div>
            
           <div
@@ -129,15 +123,9 @@ exports[`Modal can be large 1`] = `
              
             <button
               aria-label="Close"
-              class="close"
+              class="btn-close"
               type="button"
-            >
-              <span
-                aria-hidden="true"
-              >
-                ×
-              </span>
-            </button>
+            />
           </div>
            
           <div
@@ -207,15 +195,9 @@ exports[`Modal can be small 1`] = `
              
             <button
               aria-label="Close"
-              class="close"
+              class="btn-close"
               type="button"
-            >
-              <span
-                aria-hidden="true"
-              >
-                ×
-              </span>
-            </button>
+            />
           </div>
            
           <div
@@ -285,15 +267,9 @@ exports[`Modal should be closable by clicking the backdrop by default 1`] = `
              
             <button
               aria-label="Close"
-              class="close"
+              class="btn-close"
               type="button"
-            >
-              <span
-                aria-hidden="true"
-              >
-                ×
-              </span>
-            </button>
+            />
           </div>
            
           <div
@@ -431,15 +407,9 @@ exports[`Modal should not be closable by clicking the backdrop if backdrop is se
              
             <button
               aria-label="Close"
-              class="close"
+              class="btn-close"
               type="button"
-            >
-              <span
-                aria-hidden="true"
-              >
-                ×
-              </span>
-            </button>
+            />
           </div>
            
           <div
@@ -509,15 +479,9 @@ exports[`Modal should not show footer when no footer is given 1`] = `
              
             <button
               aria-label="Close"
-              class="close"
+              class="btn-close"
               type="button"
-            >
-              <span
-                aria-hidden="true"
-              >
-                ×
-              </span>
-            </button>
+            />
           </div>
            
           <div
diff --git a/packages/vue-components/src/__tests__/__snapshots__/TipBox.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/TipBox.spec.js.snap
index 8d671b1b51..8bbc7e06ee 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/TipBox.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/TipBox.spec.js.snap
@@ -755,16 +755,10 @@ exports[`TipBox with dismissible option renders correctly 1`] = `
        
       <button
         aria-label="Close"
-        class="close"
-        data-dismiss="alert"
+        class="btn-close"
+        data-bs-dismiss="alert"
         type="button"
-      >
-        <span
-          aria-hidden="true"
-        >
-          ×
-        </span>
-      </button>
+      />
     </div>
   </div>
 </div>