diff --git a/apps/docs/.vitepress/theme/Layout.vue b/apps/docs/.vitepress/theme/Layout.vue
index e34fb4e00..ed2fed884 100644
--- a/apps/docs/.vitepress/theme/Layout.vue
+++ b/apps/docs/.vitepress/theme/Layout.vue
@@ -314,14 +314,6 @@ watch(
     color: var(--white);
   }
 
-  @mixin hover-focus-active() {
-    &:hover,
-    &:focus,
-    &:active {
-      @content;
-    }
-  }
-
   .doc-content > div > {
     h2,
     h3,
diff --git a/apps/docs/src/data/components/modal.data.ts b/apps/docs/src/data/components/modal.data.ts
index c0a364db7..ab6a548ba 100644
--- a/apps/docs/src/data/components/modal.data.ts
+++ b/apps/docs/src/data/components/modal.data.ts
@@ -349,10 +349,10 @@ export default {
           description: 'CSS class (or classes) to apply to the title',
         },
         {
-          prop: 'titleSrOnly',
+          prop: 'titleVisibilityHiddenOnly',
           type: 'boolean',
           default: false,
-          description: "Wraps the title in an '.sr-only' wrapper",
+          description: "Wraps the title in an '.visually-hidden' wrapper",
         },
         {
           prop: 'titleTag',
diff --git a/apps/docs/src/docs/components/form-input.md b/apps/docs/src/docs/components/form-input.md
index 7b5eea6aa..2380215a7 100644
--- a/apps/docs/src/docs/components/form-input.md
+++ b/apps/docs/src/docs/components/form-input.md
@@ -123,7 +123,7 @@ If the `type` prop is set to an input type that is not supported (see above), a
 
 ### Range type input
 
-Inputs with type `range` render using Bootstrap v5's `.custom-range` class. The track (the
+Inputs with type `range` render using Bootstrap v5's `.form-range` class. The track (the
 background) and thumb (the value) are both styled to appear the same across browsers.
 
 Range inputs have implicit values for `min` and `max` of `0` and `100` respectively. You may specify
diff --git a/apps/docs/src/docs/components/form.md b/apps/docs/src/docs/components/form.md
index 812c89313..07495f279 100644
--- a/apps/docs/src/docs/components/form.md
+++ b/apps/docs/src/docs/components/form.md
@@ -280,7 +280,7 @@ Custom form controls and selects are also supported.
 ### Alternatives to hidden labels
 
 Assistive technologies such as screen readers will have trouble with your forms if you do not include
-a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class.
+a label for every input. For these inline forms, you can hide the labels using the `.visibility-hidden` class.
 There are further alternative methods of providing a label for assistive technologies, such as the
 `aria-label`, `aria-labelledby` or `title` attributes. If none of these are present, assistive
 technologies may resort to using the `placeholder` attribute, if present, but note that use of
diff --git a/apps/docs/src/docs/components/input-group.md b/apps/docs/src/docs/components/input-group.md
index a54f70342..36be86737 100644
--- a/apps/docs/src/docs/components/input-group.md
+++ b/apps/docs/src/docs/components/input-group.md
@@ -67,8 +67,6 @@ Easily extend form controls by adding text, buttons, or button groups on either
 
 You can attach addons using either props, named slots and/or sub-components.
 
-**Note** Bootstrap 5 dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups. The sub-components are added for compatibility reasons.
-
 ### Using `prepend` and `append` props
 
 Values will be internally wrapped by a `BInputGroupText` to display correctly.
@@ -334,23 +332,42 @@ the control and the hidden label.
 Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
 
 <HighlightCard>
+  <div class="mb-2">
+    <BInputGroup prepend="Item">
+      <BInputGroupPrepend is-text>
+        <input type="checkbox" aria-label="Checkbox for following text input">
+      </BInputGroupPrepend>
+      <BInputGroupPrepend is-text><b>$</b></BInputGroupPrepend>
+      <BFormInput type="number" aria-label="Text input with checkbox" />
+    </BInputGroup>
+  </div>
+  <div>
+    <BInputGroup append="Item">
+      <BFormInput type="number" aria-label="Text input with checkbox" />
+      <BInputGroupAppend is-text>
+        <input type="checkbox" aria-label="Checkbox for following text input">
+      </BInputGroupAppend>
+      <BInputGroupAppend is-text><b>$</b></BInputGroupAppend>
+    </BInputGroup>
+  </div>
+  <template #html>
+
+```vue-html
   <BInputGroup prepend="Item">
     <BInputGroupPrepend is-text>
-      <input type="checkbox" aria-label="Checkbox for following text input">
+      <input type="checkbox" aria-label="Checkbox for following text input" />
     </BInputGroupPrepend>
     <BInputGroupPrepend is-text><b>$</b></BInputGroupPrepend>
     <BFormInput type="number" aria-label="Text input with checkbox" />
   </BInputGroup>
-  <template #html>
 
-```vue-html
-<BInputGroup prepend="Item">
-  <BInputGroupPrepend is-text>
-    <input type="checkbox" aria-label="Checkbox for following text input" />
-  </BInputGroupPrepend>
-  <BInputGroupPrepend is-text><b>$</b></BInputGroupPrepend>
-  <BFormInput type="number" aria-label="Text input with checkbox" />
-</BInputGroup>
+  <BInputGroup append="Item">
+    <BFormInput type="number" aria-label="Text input with checkbox" />
+    <BInputGroupAppend is-text>
+      <input type="checkbox" aria-label="Checkbox for following text input">
+    </BInputGroupAppend>
+    <BInputGroupAppend is-text><b>$</b></BInputGroupAppend>
+  </BInputGroup>
 ```
 
   </template>
diff --git a/apps/docs/src/docs/components/navbar.md b/apps/docs/src/docs/components/navbar.md
index 7d81662e9..d36d2d8d5 100644
--- a/apps/docs/src/docs/components/navbar.md
+++ b/apps/docs/src/docs/components/navbar.md
@@ -397,7 +397,7 @@ Note that the expanded scope property only works when supplying the target prop
       </template>
     </BNavbarToggle>
     <BCollapse id="navbar-toggle-collapse" is-nav>
-      <BNavbarNav class="ml-auto">
+      <BNavbarNav class="ms-auto">
         <BNavItem href="#">Link 1</BNavItem>
         <BNavItem href="#">Link 2</BNavItem>
         <BNavItem href="#" disabled>Disabled</BNavItem>
@@ -418,7 +418,7 @@ Note that the expanded scope property only works when supplying the target prop
   </BNavbarToggle>
 
   <BCollapse id="navbar-toggle-collapse" is-nav>
-    <BNavbarNav class="ml-auto">
+    <BNavbarNav class="ms-auto">
       <BNavItem href="#">Link 1</BNavItem>
       <BNavItem href="#">Link 2</BNavItem>
       <BNavItem href="#" disabled>Disabled</BNavItem>
diff --git a/apps/docs/src/docs/reference/accessibility.md b/apps/docs/src/docs/reference/accessibility.md
index 92bfc2890..51eff991a 100644
--- a/apps/docs/src/docs/reference/accessibility.md
+++ b/apps/docs/src/docs/reference/accessibility.md
@@ -51,7 +51,7 @@ Content which should be visually hidden, but remain accessible to assistive tech
 
 </BCard>
 
-For visually hidden interactive controls, such as traditional “skip” links, use the `.visually-hidden-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). Watch out, compared to the equivalent `.sr-only` and `.sr-only-focusable` classes in past versions, Bootstrap 5’s `.visually-hidden-focusable` is a standalone class, and must not be used in combination with the `.visually-hidden` class.
+For visually hidden interactive controls, such as traditional “skip” links, use the `.visually-hidden-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). Watch out, compared to the equivalent `.visibility-hidden` and `.visibility-hidden-focusable` classes in past versions, Bootstrap 5’s `.visually-hidden-focusable` is a standalone class, and must not be used in combination with the `.visually-hidden` class.
 
 <BCard class="bg-body-tertiary">
 
diff --git a/apps/playground/src/components/Comps/TTable.vue b/apps/playground/src/components/Comps/TTable.vue
index a012a5030..dbc3f7281 100644
--- a/apps/playground/src/components/Comps/TTable.vue
+++ b/apps/playground/src/components/Comps/TTable.vue
@@ -314,7 +314,7 @@
           </template>
 
           <template #cell(actions)="row">
-            <BButton size="sm" class="mr-1" @click="info(row.item, row.index)">
+            <BButton size="sm" class="me-1" @click="info(row.item, row.index)">
               Info modal
             </BButton>
             <BButton size="sm" @click="row.toggleDetails">
diff --git a/packages/bootstrap-vue-next/src/components/BInputGroup/_input-group.scss b/packages/bootstrap-vue-next/src/components/BInputGroup/_input-group.scss
index 6ebcecaba..a566163a4 100644
--- a/packages/bootstrap-vue-next/src/components/BInputGroup/_input-group.scss
+++ b/packages/bootstrap-vue-next/src/components/BInputGroup/_input-group.scss
@@ -20,18 +20,17 @@ $bv-input-group-dropdown-patched: false !default;
   // Workaround for https://github.com/bootstrap-vue/bootstrap-vue/issues/2114 */
   // Based on: `~bootstrap/scss/_input-group.scss`
   .input-group {
-    > .input-group-prepend > .btn-group,
-    > .input-group-append:not(:last-child) > .btn-group,
-    > .input-group-append:last-child > .btn-group:not(:last-child):not(.dropdown-toggle) {
+    > .input-group-text:not(:last-child) > .btn-group,
+    > .input-group-text:last-child > .btn-group:not(:last-child):not(.dropdown-toggle) {
       > .btn {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
       }
     }
 
-    > .input-group-append > .btn-group,
-    > .input-group-prepend:not(:first-child) > .btn-group,
-    > .input-group-prepend:first-child > .btn-group:not(:first-child) {
+    > .input-group-text > .btn-group,
+    > .input-group-text:not(:first-child) > .btn-group,
+    > .input-group-text:first-child > .btn-group:not(:first-child) {
       > .btn {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
@@ -40,27 +39,18 @@ $bv-input-group-dropdown-patched: false !default;
   }
 }
 
-.input-group-lg .input-group-append > .form-control,
-.input-group-lg .input-group-append > .form-select,
-.input-group-lg .input-group-append > .input-group-text,
-.input-group-lg .input-group-append > .btn,
-.input-group-lg .input-group-prepend > .form-control,
-.input-group-lg .input-group-prepend > .form-select,
-.input-group-lg .input-group-prepend > .input-group-text,
-.input-group-lg .input-group-prepend > .btn {
+.input-group-lg .input-group-text > .form-control,
+.input-group-lg .input-group-text > .form-select,
+.input-group-lg .input-group-text > .btn {
   padding: $input-padding-y-lg $input-padding-x-lg;
   font-size: $font-size-lg;
   border-radius: $border-radius-lg;
 }
 
-.input-group-sm .input-group-append > .form-control,
-.input-group-sm .input-group-append > .form-select,
-.input-group-sm .input-group-append > .input-group-text,
-.input-group-sm .input-group-append > .btn,
-.input-group-sm .input-group-prepend > .form-control,
-.input-group-sm .input-group-prepend > .form-select,
-.input-group-sm .input-group-prepend > .input-group-text,
-.input-group-sm .input-group-prepend > .btn {
+.input-group-sm .input-group-text > .form-control,
+.input-group-sm .input-group-text > .form-select,
+.input-group-sm .input-group-text > .input-group-text,
+.input-group-sm .input-group-text > .btn {
   padding: $input-padding-y-sm $input-padding-x-sm;
   font-size: $font-size-sm;
   border-radius: $border-radius-sm;
@@ -71,10 +61,6 @@ $bv-input-group-dropdown-patched: false !default;
     border-start-end-radius: 0px;
     border-end-end-radius: 0px;
   }
-  .btn-group:not(:last-child) > :not(:last-child) {
-    border-start-start-radius: 0px;
-    border-end-start-radius: 0px;
-  }
   .btn-group:not(:last-child) > :not(:last-child) {
     border-start-end-radius: 0px;
     border-end-end-radius: 0px;
diff --git a/packages/bootstrap-vue-next/src/components/BModal/BModal.vue b/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
index 7717d7b31..230845772 100644
--- a/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
+++ b/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
@@ -184,7 +184,7 @@ const props = withDefaults(defineProps<BModalProps>(), {
   teleportTo: 'body',
   title: undefined,
   titleClass: undefined,
-  titleSrOnly: false,
+  titleVisibilityHiddenOnly: false,
   titleTag: 'h5',
   transProps: undefined,
 })
@@ -342,7 +342,7 @@ const footerClasses = computed(() => [
 const titleClasses = computed(() => [
   props.titleClass,
   {
-    ['visually-hidden']: props.titleSrOnly,
+    ['visually-hidden']: props.titleVisibilityHiddenOnly,
   },
 ])
 const disableCancel = toRef(() => props.cancelDisabled || props.busy)
diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
index 4ae115c8f..7d7fba0e5 100644
--- a/packages/bootstrap-vue-next/src/types/ComponentProps.ts
+++ b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -337,7 +337,7 @@ export interface BModalProps {
   teleportTo?: string | Readonly<RendererElement> | null | undefined
   title?: string
   titleClass?: ClassValue
-  titleSrOnly?: boolean
+  titleVisibilityHiddenOnly?: boolean
   titleTag?: string
   transProps?: Readonly<BTransitionProps>
 }