diff --git a/apps/docs/src/data/components/pagination.data.ts b/apps/docs/src/data/components/pagination.data.ts
index 2ff823a91..ca3ba9d10 100644
--- a/apps/docs/src/data/components/pagination.data.ts
+++ b/apps/docs/src/data/components/pagination.data.ts
@@ -2,6 +2,24 @@ import type {BvnComponentProps} from 'bootstrap-vue-next'
 import type {ComponentReference, PropertyReference} from '../../types'
 import {buildCommonProps, pick} from '../../utils'
 
+const sharedScope = [
+  {
+    prop: 'disabled',
+    type: 'Boolean',
+    description: 'Will be `true` if this button is disabled (non-clickable)',
+  },
+  {
+    prop: 'index',
+    type: 'Number',
+    description: 'Page number (indexed from `0` to `numberOfPages - 1`)',
+  },
+  {
+    prop: 'page',
+    type: 'Number',
+    description: 'Page number (from `1` to `numberOfPages`)',
+  },
+]
+
 export default {
   load: (): ComponentReference[] => [
     {
@@ -26,17 +44,17 @@ export default {
           firstClass: {
             type: 'ClassValue',
             default: undefined,
-            description: "Class(es) to apply to the 'Go to first page' button",
+            description: 'Class(es) to apply to the go to first page button',
           },
           firstNumber: {
             type: 'boolean',
             default: false,
-            description: 'Display first page number instead of Goto First button',
+            description: 'Display first page number instead of go to first page button',
           },
           firstText: {
             type: 'string',
             default: '\u00AB',
-            description: 'Content to place in the goto first page button',
+            description: 'Content to place in the go to first page button',
           },
           hideEllipsis: {
             type: 'boolean',
@@ -46,52 +64,52 @@ export default {
           hideGotoEndButtons: {
             type: 'boolean',
             default: false,
-            description: 'Hides the goto first and goto last page buttons',
+            description: 'Hides the go to first and go to last page buttons',
           },
           labelFirstPage: {
             type: 'string',
             default: 'Go to first page',
             description:
-              "Value to place in the 'aria-label' attribute of the goto first page button",
+              "Value to place in the 'aria-label' attribute of the go to first page button",
           },
           labelLastPage: {
             type: 'string',
             default: 'Go to last page',
             description:
-              "Value to place in the 'aria-label' attribute of the goto last page button",
+              "Value to place in the 'aria-label' attribute of the go to last page button",
           },
           labelNextPage: {
             type: 'string',
             default: 'Go to next page',
             description:
-              "Value to place in the 'aria-label' attribute of the goto next page button",
+              "Value to place in the 'aria-label' attribute of the go to next page button",
           },
           labelPage: {
             type: 'string',
             default: 'Go to page',
             description:
-              "Value to place in the 'aria-label' attribute of the goto page button. Page number will be prepended automatically",
+              "Value to place in the 'aria-label' attribute of the go to page button. Page number will be appended automatically",
           },
           labelPrevPage: {
             type: 'string',
             default: 'Go to previous page',
             description:
-              "Value to place in the 'aria-label' attribute of the goto previous page button",
+              "Value to place in the 'aria-label' attribute of the go to previous page button",
           },
           lastClass: {
             type: 'ClassValue',
             default: undefined,
-            description: "Class(es) to apply to the 'Go to last page' button",
+            description: 'Class(es) to apply to the go to last page button',
           },
           lastNumber: {
             type: 'boolean',
             default: false,
-            description: 'Display last page number instead of Goto Last button',
+            description: 'Display last page number instead of go to Last button',
           },
           lastText: {
             type: 'string',
             default: '\u00BB',
-            description: 'Content to place in the goto last page button',
+            description: 'Content to place in the go to last page button',
           },
           limit: {
             type: 'Numberish',
@@ -107,17 +125,17 @@ export default {
           nextClass: {
             type: 'ClassValue',
             default: undefined,
-            description: "Class(es) to apply to the 'Go to next page' button",
+            description: 'Class(es) to apply to the go to next page button',
           },
           nextText: {
             type: 'string',
             default: '\u203A',
-            description: 'Content to place in the goto next page button',
+            description: 'Content to place in the go to next page button',
           },
           pageClass: {
             type: 'ClassValue',
             default: undefined,
-            description: "Class(es) to apply to the 'Go to page #' buttons",
+            description: 'Class(es) to apply to the go to page # buttons',
           },
           perPage: {
             type: 'Numberish',
@@ -137,7 +155,7 @@ export default {
           prevText: {
             type: 'string',
             default: '\u2039',
-            description: 'Content to place in the goto previous page button',
+            description: 'Content to place in the go to previous page button',
           },
           totalRows: {
             type: 'Numberish',
@@ -195,71 +213,24 @@ export default {
         },
         {
           name: 'first-text',
-          description: "The 'Go to first page' button content",
-          scope: [
-            {
-              prop: 'disabled',
-              type: 'Boolean',
-              description: 'Will be `true` if this button is disabled (non-clickable)',
-            },
-            {
-              prop: 'index',
-              type: 'Number',
-              description: 'Page number (indexed from `0` to `numberOfPages - 1`)',
-            },
-            {
-              prop: 'page',
-              type: 'Number',
-              description: 'Page number (from `1` to `numberOfPages`)',
-            },
-          ],
+          description: 'The go to first page button content',
+          scope: sharedScope,
         },
         {
           name: 'last-text',
-          description: "The 'Go to last page' button content",
-          scope: [
-            {
-              prop: 'disabled',
-              type: 'Boolean',
-              description: 'Will be `true` if this button is disabled (non-clickable)',
-            },
-            {
-              prop: 'index',
-              type: 'Number',
-              description: 'Page number (indexed from `0` to `numberOfPages - 1`)',
-            },
-            {
-              prop: 'page',
-              type: 'Number',
-              description: 'Page number (from `1` to `numberOfPages`)',
-            },
-          ],
+          description: 'The go to last page button content',
+          scope: sharedScope,
         },
         {
           name: 'next-text',
-          description: "The 'Go to next page' button content",
-          scope: [
-            {
-              prop: 'disabled',
-              type: 'Boolean',
-              description: 'Will be `true` if this button is disabled (non-clickable)',
-            },
-            {
-              prop: 'index',
-              type: 'Number',
-              description: 'Page number (indexed from `0` to `numberOfPages - 1`)',
-            },
-            {
-              prop: 'page',
-              type: 'Number',
-              description: 'Page number (from `1` to `numberOfPages`)',
-            },
-          ],
+          description: 'The go to next page button content',
+          scope: sharedScope,
         },
         {
           name: 'page',
           description: 'Page number button content',
           scope: [
+            ...sharedScope,
             {
               prop: 'active',
               type: 'Boolean',
@@ -270,43 +241,12 @@ export default {
               type: 'String',
               description: 'Default button content',
             },
-            {
-              prop: 'disabled',
-              type: 'Boolean',
-              description: 'Will be `true` if this button is disabled (non-clickable)',
-            },
-            {
-              prop: 'index',
-              type: 'Number',
-              description: 'Page number (indexed from `0` to `numberOfPages - 1`)',
-            },
-            {
-              prop: 'page',
-              type: 'Number',
-              description: 'Page number (from `1` to `numberOfPages`)',
-            },
           ],
         },
         {
           name: 'prev-text',
-          description: "The 'Go to previous page' button content",
-          scope: [
-            {
-              prop: 'disabled',
-              type: 'Boolean',
-              description: 'Will be `true` if this button is disabled (non-clickable)',
-            },
-            {
-              prop: 'index',
-              type: 'Number',
-              description: 'Page number (indexed from `0` to `numberOfPages - 1`)',
-            },
-            {
-              prop: 'page',
-              type: 'Number',
-              description: 'Page number (from `1` to `numberOfPages`)',
-            },
-          ],
+          description: 'The go to previous page button content',
+          scope: sharedScope,
         },
       ],
     },
diff --git a/apps/docs/src/docs/components/demo/PaginationAlignment.vue b/apps/docs/src/docs/components/demo/PaginationAlignment.vue
new file mode 100644
index 000000000..54e10ea4c
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/PaginationAlignment.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <h6>Left alignment (default)</h6>
+    <BPagination v-model="currentPage" :total-rows="rows" />
+  </div>
+  <div class="mt-3">
+    <h6 class="text-center">Center alignment</h6>
+    <BPagination v-model="currentPage" :total-rows="rows" align="center" />
+  </div>
+  <div class="mt-3">
+    <h6 class="text-end">Right (end) alignment</h6>
+    <BPagination v-model="currentPage" :total-rows="rows" align="end" />
+  </div>
+  <div class="mt-3">
+    <h6 class="text-center">Fill alignment</h6>
+    <BPagination v-model="currentPage" :total-rows="rows" align="fill" />
+  </div>
+</template>
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const currentPage = ref(1)
+const rows = ref(100)
+</script>
diff --git a/apps/docs/src/docs/components/demo/PaginationButtonContent.vue b/apps/docs/src/docs/components/demo/PaginationButtonContent.vue
new file mode 100644
index 000000000..b9d5c8a95
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/PaginationButtonContent.vue
@@ -0,0 +1,50 @@
+<template>
+  <!-- Use text in props -->
+  <BPagination
+    v-model="currentPage"
+    :total-rows="rows"
+    :per-page="perPage"
+    first-text="First"
+    prev-text="Prev"
+    next-text="Next"
+    last-text="Last"
+  />
+
+  <!-- Use emojis in props -->
+  <BPagination
+    v-model="currentPage"
+    :total-rows="rows"
+    :per-page="perPage"
+    first-text="⏮"
+    prev-text="⏪"
+    next-text="⏩"
+    last-text="⏭"
+    class="mt-4"
+  />
+
+  <!-- Use HTML and sub-components in slots -->
+  <BPagination v-model="currentPage" :total-rows="rows" :per-page="perPage" class="mt-4">
+    <template #first-text><span class="text-success">First</span></template>
+    <template #prev-text><span class="text-danger">Prev</span></template>
+    <template #next-text><span class="text-warning">Next</span></template>
+    <template #last-text><span class="text-info">Last</span></template>
+    <template #ellipsis-text>
+      <BSpinner small type="grow" />
+      <BSpinner small type="grow" />
+      <BSpinner small type="grow" />
+    </template>
+    <template #page="{page, active}">
+      <b v-if="active">{{ page }}</b>
+      <i v-else>{{ page }}</i>
+    </template>
+  </BPagination>
+  Current page : {{ currentPage }}
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const currentPage = ref(1)
+const perPage = ref(10)
+const rows = ref(100)
+</script>
diff --git a/apps/docs/src/docs/components/demo/PaginationButtonSize.vue b/apps/docs/src/docs/components/demo/PaginationButtonSize.vue
new file mode 100644
index 000000000..5732add61
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/PaginationButtonSize.vue
@@ -0,0 +1,17 @@
+<template>
+  <h6>Small</h6>
+  <BPagination v-model="currentPage" :total-rows="rows" size="sm" />
+
+  <h6>Default</h6>
+  <BPagination v-model="currentPage" :total-rows="rows" />
+
+  <h6>Large</h6>
+  <BPagination v-model="currentPage" :total-rows="rows" size="lg" />
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const currentPage = ref(1)
+const rows = ref(100)
+</script>
diff --git a/apps/docs/src/docs/components/demo/PaginationFirstLast.vue b/apps/docs/src/docs/components/demo/PaginationFirstLast.vue
new file mode 100644
index 000000000..6167ab53f
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/PaginationFirstLast.vue
@@ -0,0 +1,24 @@
+<template>
+  <h6>Goto first button number</h6>
+  <BPagination v-model="currentPage" :total-rows="rows" :per-page="perPage" first-number />
+
+  <h6>Goto last button number</h6>
+  <BPagination v-model="currentPage" :total-rows="rows" :per-page="perPage" last-number />
+
+  <h6>Goto first and last button number</h6>
+  <BPagination
+    v-model="currentPage"
+    :total-rows="rows"
+    :per-page="perPage"
+    first-number
+    last-number
+  />
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const currentPage = ref(5)
+const perPage = ref(1)
+const rows = ref(100)
+</script>
diff --git a/apps/docs/src/docs/components/demo/PaginationOverview.vue b/apps/docs/src/docs/components/demo/PaginationOverview.vue
new file mode 100644
index 000000000..c66cf65a4
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/PaginationOverview.vue
@@ -0,0 +1,44 @@
+<template>
+  <BContainer>
+    <BRow>
+      <BCol>
+        <div class="overflow-auto">
+          <b-pagination
+            v-model="currentPage"
+            :total-rows="rows"
+            :per-page="perPage"
+            aria-controls="my-table"
+          />
+
+          <p class="mt-3">Current Page: {{ currentPage }}</p>
+
+          <b-table
+            id="my-table"
+            :items="items"
+            :per-page="perPage"
+            :current-page="currentPage"
+            small
+          /></div
+      ></BCol>
+    </BRow>
+  </BContainer>
+</template>
+
+<script setup lang="ts">
+import {computed, ref} from 'vue'
+
+const perPage = ref(3)
+const currentPage = ref(1)
+const items = ref([
+  {id: 1, first_name: 'Fred', last_name: 'Flintstone'},
+  {id: 2, first_name: 'Wilma', last_name: 'Flintstone'},
+  {id: 3, first_name: 'Barney', last_name: 'Rubble'},
+  {id: 4, first_name: 'Betty', last_name: 'Rubble'},
+  {id: 5, first_name: 'Pebbles', last_name: 'Flintstone'},
+  {id: 6, first_name: 'Bamm Bamm', last_name: 'Rubble'},
+  {id: 7, first_name: 'The Great', last_name: 'Gazzoo'},
+  {id: 8, first_name: 'Rockhead', last_name: 'Slate'},
+  {id: 9, first_name: 'Pearl', last_name: 'Slaghoople'},
+])
+const rows = computed(() => items.value.length)
+</script>
diff --git a/apps/docs/src/docs/components/demo/PaginationPillStyle.vue b/apps/docs/src/docs/components/demo/PaginationPillStyle.vue
new file mode 100644
index 000000000..1b181c9a3
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/PaginationPillStyle.vue
@@ -0,0 +1,17 @@
+<template>
+  <h6>Small Pills</h6>
+  <BPagination v-model="currentPage" pills :total-rows="rows" size="sm" />
+
+  <h6>Default Pills</h6>
+  <BPagination v-model="currentPage" pills :total-rows="rows" />
+
+  <h6>Large Pills</h6>
+  <BPagination v-model="currentPage" pills :total-rows="rows" size="lg" />
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const currentPage = ref(1)
+const rows = ref(100)
+</script>
diff --git a/apps/docs/src/docs/components/pagination.md b/apps/docs/src/docs/components/pagination.md
index b055d9566..ee3169272 100644
--- a/apps/docs/src/docs/components/pagination.md
+++ b/apps/docs/src/docs/components/pagination.md
@@ -13,6 +13,16 @@ Quick first, previous, next, last, and page buttons for pagination control of an
 
 </div>
 
+## Overview
+
+`<BPagination>` is a custom input component that provides a current page number input control. The
+value should be bound via `v-model` in your app. Page numbers are indexed from 1. The number of
+pages is computed from the provided prop values for `total-rows` and `per-page`.
+
+**Example Usage with `<BTable>`:**
+
+<<< DEMO ./demo/PaginationOverview.vue
+
 ## Customizing appearance
 
 `BPagination` supports several props/slots that allow you to customize the appearance. All
@@ -32,6 +42,8 @@ The showing of the `ellipsis` can be optionally disabled by setting the `hide-el
 
 #### Small screen support
 
+<NotYetImplemented />
+
 On smaller screens (i.e. mobile), some of the `BPagination` buttons will be hidden to minimize
 the potential of the pagination interface wrapping onto multiple lines:
 
@@ -43,102 +55,9 @@ _prev_, _next_, and _last_ buttons.
 
 ### Button content
 
-For a full list of all available slots see the [Slots](#comp-ref-b-pagination-slots) section below.
-
-<HighlightCard>
-  <!-- Use text in props -->
-  <BPagination
-    v-model="ex1CurrentPage"
-    :total-rows="ex1Rows"
-    :per-page="ex1PerPage"
-    first-text="First"
-    prev-text="Prev"
-    next-text="Next"
-    last-text="Last"
-  />
-  <!-- Use emojis in props -->
-  <BPagination
-    v-model="ex1CurrentPage"
-    :total-rows="ex1Rows"
-    :per-page="ex1PerPage"
-    first-text="⏮"
-    prev-text="⏪"
-    next-text="⏩"
-    last-text="⏭"
-    class="mt-4"
-  />
-  <!-- Use HTML and sub-components in slots -->
-  <BPagination v-model="ex1CurrentPage" :total-rows="ex1Rows" :per-page="ex1PerPage" class="mt-4">
-    <template #first-text><span class="text-success">First</span></template>
-    <template #prev-text><span class="text-danger">Prev</span></template>
-    <template #next-text><span class="text-warning">Next</span></template>
-    <template #last-text><span class="text-info">Last</span></template>
-    <template #ellipsis-text>
-      <BSpinner small type="grow" />
-      <BSpinner small type="grow" />
-      <BSpinner small type="grow" />
-    </template>
-    <template #page="{ page, active }">
-      <b v-if="active">{{ page }}</b>
-      <i v-else>{{ page }}</i>
-    </template>
-  </BPagination>
-  Current page : {{ ex1CurrentPage }}
-  <template #html>
-
-```vue
-<template>
-  <!-- Use text in props -->
-  <BPagination
-    v-model="ex1CurrentPage"
-    :total-rows="ex1Rows"
-    :per-page="ex1PerPage"
-    first-text="First"
-    prev-text="Prev"
-    next-text="Next"
-    last-text="Last"
-  />
-
-  <!-- Use emojis in props -->
-  <BPagination
-    v-model="ex1CurrentPage"
-    :total-rows="ex1Rows"
-    :per-page="ex1PerPage"
-    first-text="⏮"
-    prev-text="⏪"
-    next-text="⏩"
-    last-text="⏭"
-    class="mt-4"
-  />
-
-  <!-- Use HTML and sub-components in slots -->
-  <BPagination v-model="ex1CurrentPage" :total-rows="ex1Rows" :per-page="ex1PerPage" class="mt-4">
-    <template #first-text><span class="text-success">First</span></template>
-    <template #prev-text><span class="text-danger">Prev</span></template>
-    <template #next-text><span class="text-warning">Next</span></template>
-    <template #last-text><span class="text-info">Last</span></template>
-    <template #ellipsis-text>
-      <BSpinner small type="grow" />
-      <BSpinner small type="grow" />
-      <BSpinner small type="grow" />
-    </template>
-    <template #page="{page, active}">
-      <b v-if="active">{{ page }}</b>
-      <i v-else>{{ page }}</i>
-    </template>
-  </BPagination>
-  Current page : {{ ex1CurrentPage }}
-</template>
-
-<script setup lang="ts">
-const ex1CurrentPage = ref(1)
-const ex1PerPage = ref(10)
-const ex1Rows = ref(100)
-</script>
-```
+For a full list of all available slots see the [Slots](#comp-reference-bpagination-slots) section below.
 
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/PaginationButtonContent.vue
 
 The slot `page` is always scoped, while the slots `first-text`, `prev-text`, `next-text` and
 `last-text` are optionally scoped. The `ellipsis-text` slot is not scoped.
@@ -167,145 +86,20 @@ The slot `page` is always scoped, while the slots `first-text`, `prev-text`, `ne
 If you prefer to have buttons with the first and last page number to go to the corresponding page,
 use the `first-number` and `last-number` props.
 
-<HighlightCard>
-  <div>
-    <h6>Goto first button number</h6>
-    <BPagination
-      v-model="ex2CurrentPage"
-      :total-rows="ex2Rows"
-      :per-page="ex2PerPage"
-      first-number
-    />
-  </div>
-  <div class="mt-3">
-    <h6>Goto last button number</h6>
-    <BPagination
-      v-model="ex2CurrentPage"
-      :total-rows="ex2Rows"
-      :per-page="ex2PerPage"
-      last-number
-    />
-  </div>
-  <div class="mt-3">
-    <h6>Goto first and last button number</h6>
-    <BPagination
-      v-model="ex2CurrentPage"
-      :total-rows="ex2Rows"
-      :per-page="ex2PerPage"
-      first-number
-      last-number
-    />
-  </div>
-  <template #html>
-
-```vue
-<template>
-  <h6>Goto first button number</h6>
-  <BPagination v-model="ex2CurrentPage" :total-rows="ex2Rows" :per-page="ex2PerPage" first-number />
-
-  <h6>Goto last button number</h6>
-  <BPagination v-model="ex2CurrentPage" :total-rows="ex2Rows" :per-page="ex2PerPage" last-number />
-
-  <h6>Goto first and last button number</h6>
-  <BPagination
-    v-model="ex2CurrentPage"
-    :total-rows="ex2Rows"
-    :per-page="ex2PerPage"
-    first-number
-    last-number
-  />
-</template>
-
-<script setup lang="ts">
-const ex2CurrentPage = ref(5)
-const ex2PerPage = ref(1)
-const ex2Rows = ref(100)
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/PaginationFirstLast.vue
 
 ### Button size
 
 Optionally change from the default button size by setting the `size` prop to either `'sm'` for
 smaller buttons or `'lg'` for larger buttons.
 
-<HighlightCard>
-  <div>
-    <h6>Small</h6>
-    <BPagination v-model="ex3CurrentPage" :total-rows="ex3Rows" size="sm" />
-  </div>
-  <div class="mt-3">
-    <h6>Default</h6>
-    <BPagination v-model="ex3CurrentPage" :total-rows="ex3Rows" />
-  </div>
-  <div class="mt-3">
-    <h6>Large</h6>
-    <BPagination v-model="ex3CurrentPage" :total-rows="ex3Rows" size="lg" />
-  </div>
-  <template #html>
-
-```vue
-<template>
-  <h6>Small</h6>
-  <BPagination v-model="ex3CurrentPage" :total-rows="ex3Rows" size="sm" />
-
-  <h6>Default</h6>
-  <BPagination v-model="ex3CurrentPage" :total-rows="ex3Rows" />
-
-  <h6>Large</h6>
-  <BPagination v-model="ex3CurrentPage" :total-rows="ex3Rows" size="lg" />
-</template>
-
-<script setup lang="ts">
-const ex3CurrentPage = ref(1)
-const ex3Rows = ref(100)
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/PaginationButtonSize.vue
 
 ### Pill style
 
 Easily switch to pill style buttons by setting the `pills` prop.
 
-<HighlightCard>
-  <div>
-    <h6>Small Pills</h6>
-    <BPagination v-model="ex4CurrentPage" pills :total-rows="ex4Rows" size="sm" />
-  </div>
-  <div class="mt-3">
-    <h6>Default Pills</h6>
-    <BPagination v-model="ex4CurrentPage" pills :total-rows="ex4Rows" />
-  </div>
-  <div class="mt-3">
-    <h6>Large Pills</h6>
-    <BPagination v-model="ex4CurrentPage" pills :total-rows="ex4Rows" size="lg" />
-  </div>
-  <template #html>
-
-```vue
-<template>
-  <h6>Small Pills</h6>
-  <BPagination v-model="ex4CurrentPage" pills :total-rows="ex4Rows" size="sm" />
-
-  <h6>Default Pills</h6>
-  <BPagination v-model="ex4CurrentPage" pills :total-rows="ex4Rows" />
-
-  <h6>Large Pills</h6>
-  <BPagination v-model="ex4CurrentPage" pills :total-rows="ex4Rows" size="lg" />
-</template>
-
-<script setup lang="ts">
-const ex4CurrentPage = ref(1)
-const ex4Rows = ref(100)
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/PaginationPillStyle.vue
 
 **Note:** Pill styling requires bootstrap-vue-next's custom CSS/SCSS.
 
@@ -314,45 +108,7 @@ const ex4Rows = ref(100)
 By default, the pagination component is left aligned. Change the alignment to `center`, `end`
 or `fill` by setting the prop `align` to the appropriate value.
 
-<HighlightCard>
-  <div>
-    <h6>Left alignment (default)</h6>
-    <BPagination v-model="ex5CurrentPage" :total-rows="ex5Rows" />
-  </div>
-  <div class="mt-3">
-    <h6 class="text-center">Center alignment</h6>
-    <BPagination v-model="ex5CurrentPage" :total-rows="ex5Rows" align="center" />
-  </div>
-  <div class="mt-3">
-    <h6 class="text-end">Right (end) alignment</h6>
-    <BPagination v-model="ex5CurrentPage" :total-rows="ex5Rows" align="end" />
-  </div>
-  <div class="mt-3">
-    <h6 class="text-center">Fill alignment</h6>
-    <BPagination v-model="ex5CurrentPage" :total-rows="ex5Rows" align="fill" />
-  </div>
-  <template #html>
-
-```vue
-<template>
-  <h6>Small Pills</h6>
-  <BPagination v-model="ex4CurrentPage" pills :total-rows="ex4Rows" size="sm" />
-
-  <h6>Default Pills</h6>
-  <BPagination v-model="ex4CurrentPage" pills :total-rows="ex4Rows" />
-
-  <h6>Large Pills</h6>
-  <BPagination v-model="ex4CurrentPage" pills :total-rows="ex4Rows" size="lg" />
-</template>
-
-<script setup lang="ts">
-const ex5CurrentPage = ref(1)
-const ex5Rows = ref(100)
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/PaginationAlignment.vue
 
 ## Preventing a page from being selected
 
@@ -380,9 +136,9 @@ know what component is being updated/controlled.
 
 ### ARIA labels
 
-`BPagination` provides various `*-label-*` props which are used to set the `aria-label`
-attributes on the various elements within the component, which will help users of assistive
-technology.
+`BPagination` provides various `label-*` props which are used to set the `aria-label`
+attributes on the various elements within the component as well as the common `aria-label` prop
+on the outer container, which will help users of assistive technology.
 
 | Prop               | `aria-label` content default                            |
 | ------------------ | ------------------------------------------------------- |
@@ -401,30 +157,10 @@ recommended unless the content of the button textually conveys its purpose.
 
 ### Keyboard navigation support
 
+<NotYetImplemented />
+
 <ComponentReference :data="data" />
 
 <script setup lang="ts">
 import {data} from '../../data/components/pagination.data'
-import ComponentReference from '../../components/ComponentReference.vue'
-import ComponentSidebar from '../../components/ComponentSidebar.vue'
-import HighlightCard from '../../components/HighlightCard.vue'
-import {BProgress, BSpinner, BCard, BCardBody, BPagination} from 'bootstrap-vue-next'
-import {ref, computed} from 'vue'
-
-const ex1CurrentPage = ref(1);
-const ex1PerPage = ref(10);
-const ex1Rows = ref(100);
-
-const ex2CurrentPage = ref(5);
-const ex2PerPage = ref(1);
-const ex2Rows = ref(100);
-
-const ex3CurrentPage = ref(1);
-const ex3Rows = ref(100);
-
-const ex4CurrentPage = ref(1);
-const ex4Rows = ref(100);
-
-const ex5CurrentPage = ref(3);
-const ex5Rows = ref(100);
 </script>
diff --git a/apps/docs/src/docs/migration-guide.md b/apps/docs/src/docs/migration-guide.md
index e2c18512b..13f49555f 100644
--- a/apps/docs/src/docs/migration-guide.md
+++ b/apps/docs/src/docs/migration-guide.md
@@ -390,6 +390,14 @@ const confirmBox = async () => {
 The `show` and `confirm` `props` object accespts all of the properties that are defined on
 [BModal](/docs/components/modal#component-reference) excpet for `modelValue`.
 
+## BPagination
+
+Keyboard Navigation and Small Screen Support.
+
+## BPaginationNav
+
+This component is not yet implemented
+
 <MigrationWrapper v-for="(item, i) in changes" :key="i" v-bind="item" />
 
 <script setup lang="ts">
diff --git a/apps/docs/src/docs/types.md b/apps/docs/src/docs/types.md
index 57b012296..b2eec01bb 100644
--- a/apps/docs/src/docs/types.md
+++ b/apps/docs/src/docs/types.md
@@ -16,12 +16,16 @@
 <BCard class="bg-body-tertiary">
 
 ```ts
-type CommonAlignment = 'start' | 'end' | 'center' | 'fill'
-type Vertical = CommonAlignment | 'baseline' | 'stretch'
-type Horizontal = CommonAlignment | 'between' | 'around'
-type Content = CommonAlignment | 'between' | 'around' | 'stretch'
-type JustifyContent = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'
-type TextHorizontal = 'start' | 'end' | 'center'
+type AlignmentCommon = 'start' | 'end' | 'center' | 'fill'
+type AlignmentContent = AlignmentCommon | 'between' | 'around' | 'stretch'
+type AlignmentHorizontal = AlignmentCommon | 'between' | 'around'
+type AlignmentJustifyContent = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'
+type AlignmentTextHorizontal = 'start' | 'end' | 'center'
+type AlignmentVertical = AlignmentCommon | 'baseline' | 'stretch'
+type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom'
+type ContainerVerticalAlign = Exclude<VerticalAlign, 'baseline' | 'text-top' | 'text-bottom'>
+type ContainerHorizontalAlign = 'start' | 'center' | 'end'
+type ContainerPosition = `${ContainerVerticalAlign}-${ContainerHorizontalAlign}`
 ```
 
 </BCard>