diff --git a/src/components/pagination-nav/README.md b/src/components/pagination-nav/README.md
index c00b666b92d..448ab86513a 100644
--- a/src/components/pagination-nav/README.md
+++ b/src/components/pagination-nav/README.md
@@ -1,8 +1,12 @@
 # Pagination Navigation
 
-> Quick first, previous, next, last, and page buttons for pagination based navigation, supporting
+> Quick first, previous, next, last, and page buttons for navigation based pagination, supporting
 regular links or router links.
 
+`<b-pagination-nav>` is used for navigating to new page URLs. For controlling in page component
+pagination (such as table or list pagination), use the [`<b-pagination>`](/docs/components/pagination)
+component instead.
+
 ```html
 <template>
 <div>
@@ -86,7 +90,7 @@ buttons. You can override this behaviour by supplying a function reference to
 the `page-gen` property. The function reference should accept a single argument
 which is a page number (1-N). The `page-gen` function should return a string.
 
-Note HTML strings are currently not supported.
+**Note:** HTML content in generated page number strings is **not** supported.
 
 **Example: Using an array of links to generate pagination:**
 
@@ -131,6 +135,7 @@ export default {
 
 <!-- pagination-nav-links.vue -->
 ```
+
 ## Button Size
 Optionally change from the default button size by setting the `size`
 prop to eiter `'am` for smaller buttons or `'lg'` for larger buttons.
@@ -162,6 +167,7 @@ export default {
 <!-- pagination-size.vue -->
 ```
 
+
 ## Customizing
 
 `<b-pagination-nav>` supports several props that allow you to customize the appearance.
@@ -170,18 +176,27 @@ export default {
 | ---- | -----------
 | `limit` | Limit the maximum number of displayed page buttons (including ellipsis if present, and excluding first/prev/next/last buttons)
 | `number-of-pages` | The total number of pages
+| `hide-ellipsis` | never show ellipsis indicators
+| `hide-goto-end-buttons` | never display goto first/last buttons
+
+And provides several props for setting the content of the bookend buttons:
+
+| Prop | Description
+| ---- | -----------
 | `first-text` | The "goto first page" button text (plain html supported)
 | `prev-text` | The "goto previous page" button text (plain html supported)
 | `next-text` | The "goto next page" button text (plain html supported)
 | `last-text` | The "goto last page" button text (plain html supported)
 | `ellipsis-text` | the `...` indicator text (plain html supported)
-| `hide-ellipsis` | never show ellipsis indicators
-| `hide-goto-end-buttons` | never display goto first/last buttons
 
 Ellipsis indicator(s) will only be ever shown at the front and/or end of
 the page number buttons. For `limit` values less than or equal to `3`, the ellipsis
 indicator(s) will never be shown for practical display reasons.
 
+**Note:** HTML is supported via the bookend content props. If allowing user supplied content
+to populate these props, you should use named slots (see below) instead to avoid possible XSS attacks.
+
+
 ### Named slots
 
 `<b-pagination-nav>` supports several slots that allow you to customize the appearance.
@@ -194,6 +209,7 @@ indicator(s) will never be shown for practical display reasons.
 | `last-text` | The "goto last page" button text (html/sub-components supported)
 | `ellipsis-text` | the `...` indicator text (html/sub-components supported)
 
+
 ## Alignment
 
 By default the pagination component is left aligned. Change the alignment to
@@ -274,7 +290,7 @@ list, respectively, and <kbd>ENTER</kbd> or <kbd>SPACE</kbd> keys will select (c
 ## See also
 
 For pagination control of a component (such as `<b-table>`), use the
-[`<b-pagination>`](./pagination) component instead.
+[`<b-pagination>`](/docs/components/pagination) component instead.
 
 
 <!-- Component reference added automatically from component package.json -->
diff --git a/src/components/pagination-nav/fixtures/pagination-nav.html b/src/components/pagination-nav/fixtures/pagination-nav.html
index 2c953a627b5..d3111d993a4 100644
--- a/src/components/pagination-nav/fixtures/pagination-nav.html
+++ b/src/components/pagination-nav/fixtures/pagination-nav.html
@@ -1,8 +1,20 @@
 <div id="app">
-    <div>
-        <h6>Default</h6>
-        <b-pagination-nav :number-of-pages="10" base-url="#" v-model="currentPage" />
-        <br>
-        <div>currentPage: {{currentPage}}</div>
-    </div>
+  <div>
+    <h6>Default</h6>
+    <b-pagination-nav :number-of-pages="10" base-url="#" v-model="currentPage" />
+    <br>
+    <div>currentPage: {{currentPage}}</div>
+  </div>
+  <div>
+    <h6>Link/Page Generation Fns</h6>
+    <b-pagination-nav :link-gen="linkGen" :page-gen="pageGen" :number-of-pages="10" base-url="#" v-model="currentPage" />
+    <br>
+    <div>currentPage: {{currentPage}}</div>
+  </div>
+  <div>
+    <h6>Router Links</h6>
+    <b-pagination-nav use-router :number-of-pages="10" base-url="#" v-model="currentPage" />
+    <br>
+    <div>currentPage: {{currentPage}}</div>
+  </div>
 </div>
diff --git a/src/components/pagination-nav/fixtures/pagination-nav.js b/src/components/pagination-nav/fixtures/pagination-nav.js
index 05291dc6391..e7a8ea0fb73 100644
--- a/src/components/pagination-nav/fixtures/pagination-nav.js
+++ b/src/components/pagination-nav/fixtures/pagination-nav.js
@@ -2,5 +2,18 @@ window.app = new Vue({
   el: '#app',
   data: {
     currentPage: 1
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.currentPage = 2
+    })
+  },
+  methods: {
+    pageGen (num) {
+      return `Page ${num})`
+    },
+    linkGen (num) {
+      return `#page/${num})`
+    }
   }
 })
diff --git a/src/components/pagination-nav/pagination-nav.js b/src/components/pagination-nav/pagination-nav.js
index d59ae215e74..22be056b974 100644
--- a/src/components/pagination-nav/pagination-nav.js
+++ b/src/components/pagination-nav/pagination-nav.js
@@ -1,4 +1,4 @@
-import { assign } from '../../utils/object'
+import warn from '../../utils/warn'
 import paginationMixin from '../../mixins/pagination'
 import { pickLinkProps } from '../link/link'
 
@@ -6,33 +6,41 @@ import { pickLinkProps } from '../link/link'
 const routerProps = pickLinkProps('activeClass', 'exactActiveClass', 'append', 'exact', 'replace', 'target', 'rel')
 
 // Props object
-const props = assign(
+const props = {
   // pagination-nav specific props
-  {
-    numberOfPages: {
-      type: Number,
-      default: 1
-    },
-    baseUrl: {
-      type: String,
-      default: '/'
-    },
-    useRouter: {
-      type: Boolean,
-      default: false
-    },
-    linkGen: {
-      type: Function,
-      default: null
-    },
-    pageGen: {
-      type: Function,
-      default: null
+  numberOfPages: {
+    type: [Number, String],
+    default: 1,
+    validator (value) {
+      const num = parseInt(value, 10)
+      /* istanbul ignore if */
+      if (isNaN(num) || num < 1) {
+        warn('b-pagination: prop "number-of-pages" must be a number greater than 0')
+        return false
+      }
+      return true
     }
   },
+  baseUrl: {
+    type: String,
+    default: '/'
+  },
+  useRouter: {
+    type: Boolean,
+    default: false
+  },
+  linkGen: {
+    type: Function,
+    default: null
+  },
+  pageGen: {
+    type: Function,
+    default: null
+  },
   // Router specific props
-  routerProps
-)
+  ...routerProps
+}
+
 // Our render function is brought in via the pagination mixin
 // @vue/component
 export default {
@@ -46,7 +54,16 @@ export default {
   },
   methods: {
     onClick (pageNum, evt) {
+      // Update the v-model
       this.currentPage = pageNum
+      this.$nextTick(() => {
+        try {
+          // Emulate native link click page reloading behaviour by bluring the
+          // paginator and returing focus to the document
+          const target = evt.currentTarget || evt.target
+          target.blur()
+        } catch (e) {}
+      })
     },
     makePage (pagenum) {
       if (this.pageGen && typeof this.pageGen === 'function') {
@@ -70,14 +87,15 @@ export default {
         disabled: this.disabled
       }
       if (this.useRouter || typeof link === 'object') {
-        props = assign(props, {
+        props = {
+          ...props,
           to: link,
           exact: this.exact,
           activeClass: this.activeClass,
           exactActiveClass: this.exactActiveClass,
           append: this.append,
           replace: this.replace
-        })
+        }
       }
       return props
     }
diff --git a/src/components/pagination/README.md b/src/components/pagination/README.md
index ece16c8092a..a0151233a40 100755
--- a/src/components/pagination/README.md
+++ b/src/components/pagination/README.md
@@ -1,7 +1,10 @@
 # Pagination
 
 > Quick first, previous, next, last, and page buttons for pagination control
-of another component (such as `<b-table>`).
+of another component (such as `<b-table>` or lists).
+
+For pagination that navigates to a new URL, use the [`<b-pagination-nav>`](/docs/components/pagination-nav)
+component instead.
 
 ```html
 <template>
@@ -49,21 +52,33 @@ values for `total-rows` and `per-page`.
 `<b-pagination>` supports several props that allow you to customize the appearance.
 
 ### Props
+
 | Prop | Description
 | ---- | -----------
 | `limit` | Limit the maximum number of displayed page buttons (including ellipsis if present, and excluding first/prev/next/last buttons)
-| `total-rows` | The total number of records in your data
-| `per-page` | The maximum number of data records per page
+| `number-of-pages` | The total number of pages
+| `hide-ellipsis` | never show ellipsis indicators
+| `hide-goto-end-buttons` | never display goto first/last buttons
+
+And provides several props for setting the content of the bookend buttons:
+
+| Prop | Description
+| ---- | -----------
 | `first-text` | The "goto first page" button text (plain html supported)
 | `prev-text` | The "goto previous page" button text (plain html supported)
 | `next-text` | The "goto next page" button text (plain html supported)
 | `last-text` | The "goto last page" button text (plain html supported)
 | `ellipsis-text` | the `...` indicator text (plain html supported)
-| `hide-ellipsis` | never show ellipsis indicators
-| `hide-goto-end-buttons` | never display goto first/last buttons
 
+Ellipsis indicator(s) will only be ever shown at the front and/or end of
+the page number buttons. For `limit` values less than or equal to `3`, the ellipsis
+indicator(s) will never be shown for practical display reasons.
+
+**Note:** HTML is supported via the bookend content props. If allowing user supplied content
+to populate these props, you should use named slots (see below) instead to avoid possible XSS attacks.
 
 ### Named slots
+
 | Slot | Description
 |----- | -----------
 | `first-text` | The "goto first page" button text (html/sub-components supported)
@@ -72,7 +87,6 @@ values for `total-rows` and `per-page`.
 | `last-text` | The "goto last page" button text (html/sub-components supported)
 | `ellipsis-text` | the `...` indicator text (html/sub-components supported)
 
-
 Ellipsis inidcator(s) will only be ever shown at the front and/or end of
 the page number buttons. For `limit` values less than or equal to `3`, the ellipsis
 indicator(s) will never be shown for practical display reasons.
@@ -168,7 +182,7 @@ list, respectively, and <kbd>ENTER</kbd> or <kbd>SPACE</kbd> keys will select (c
 Both events provide the single argument of the current page number (starting from 1)
 
 ## See Also
-For navigation based pagination, please see the [`<b-pagination-nav>`](./pagination-nav)
+For navigation based pagination, please see the [`<b-pagination-nav>`](/docs/components/pagination-nav)
 component.
 
 
diff --git a/src/components/pagination/fixtures/pagination.html b/src/components/pagination/fixtures/pagination.html
index 486a4fb96ee..6085598b5d2 100755
--- a/src/components/pagination/fixtures/pagination.html
+++ b/src/components/pagination/fixtures/pagination.html
@@ -6,7 +6,7 @@ <h6>Default</h6>
 
         <br><br>
 
-        <b-pagination size="md" :total-rows="100" v-model="currentPage"  :limit="10" :per-page="10">
+        <b-pagination size="md" total-rows="100" v-model="currentPage"  limit="10" per-page="10">
         </b-pagination>
 
         <br><br>
@@ -39,7 +39,42 @@ <h6>Default</h6>
           <template slot="ellipsis-text">...</template>
         </b-pagination>
 
+        <br><br>
+
+        <b-pagination :total-rows="100" v-model="currentPage" limit="-1" :per-page="10">
+        </b-pagination>
+
+        <br><br>
+
+        <b-pagination align="center" :total-rows="100" v-model="currentPage" :limit="4" :per-page="10">
+        </b-pagination>
+
+        <br><br>
+
+        <b-pagination align="right" hide-goto-end-buttons :total-rows="100" v-model="currentPage" :limit="4" :per-page="10">
+        </b-pagination>
+
+        <br><br>
+
+        <b-pagination align="end" hide-goto-end-buttons :total-rows="100" v-model="currentPage" :limit="4" :per-page="10">
+        </b-pagination>
+
         <br><br>
         <div>currentPage: {{currentPage}}</div>
+        <br><br>
+
+        <b-pagination total-rows="100" v-model="currentPage2" limit="4" per-page="20">
+        </b-pagination>
+        <div>currentPage: {{currentPage2}}</div>
+
+        <br><br>
+
+        <b-pagination total-rows="100" value="10" limit="4" per-page="10">
+        </b-pagination>
+
+        <br><br>
+
+        <b-pagination total-rows="100" value="20" limit="4" per-page="10">
+        </b-pagination>
     </div>
 </div>
diff --git a/src/components/pagination/fixtures/pagination.js b/src/components/pagination/fixtures/pagination.js
index 2dd9353d9eb..3bbe8cc6098 100755
--- a/src/components/pagination/fixtures/pagination.js
+++ b/src/components/pagination/fixtures/pagination.js
@@ -1,6 +1,7 @@
 window.app = new Vue({
   el: '#app',
   data: {
-    currentPage: 3
+    currentPage: 3,
+    currentPage2: 2
   }
 })
diff --git a/src/components/pagination/pagination.js b/src/components/pagination/pagination.js
index eaa956d7f1c..ac35f532388 100644
--- a/src/components/pagination/pagination.js
+++ b/src/components/pagination/pagination.js
@@ -1,14 +1,27 @@
 import paginationMixin from '../../mixins/pagination'
 import { isVisible } from '../../utils/dom'
 
+const DEFAULT_PER_PAGE = 20
+const DEFAULT_TOTAL_ROWS = 20
+
+function sanitizePerPage (value) {
+  const perPage = parseInt(value, 10) || DEFAULT_PER_PAGE
+  return perPage < 1 ? 1 : perPage
+}
+
+function sanitizeTotalRows (value) {
+  const totalRows = parseInt(value, 10) || DEFAULT_TOTAL_ROWS
+  return totalRows < 0 ? 0 : totalRows
+}
+
 const props = {
   perPage: {
-    type: Number,
-    default: 20
+    type: [Number, String],
+    default: DEFAULT_PER_PAGE
   },
   totalRows: {
-    type: Number,
-    default: 20
+    type: [Number, String],
+    default: DEFAULT_TOTAL_ROWS
   },
   ariaControls: {
     type: String,
@@ -23,7 +36,7 @@ export default {
   props,
   computed: {
     numberOfPages () {
-      const result = Math.ceil(this.totalRows / this.perPage)
+      const result = Math.ceil(sanitizeTotalRows(this.totalRows) / sanitizePerPage(this.perPage))
       return (result < 1) ? 1 : result
     }
   },
@@ -36,7 +49,10 @@ export default {
       } else if (num < 1) {
         num = 1
       }
+      // Update the v-model
       this.currentPage = num
+      // Emit event triggerd by user interaction
+      this.$emit('change', this.currentPage)
       this.$nextTick(() => {
         // Keep the current button focused if possible
         const target = evt.target
@@ -46,12 +62,12 @@ export default {
           this.focusCurrent()
         }
       })
-      this.$emit('change', this.currentPage)
     },
     makePage (pagenum) {
       return pagenum
     },
     linkProps (pagenum) {
+      // Always '#' for pagination component
       return { href: '#' }
     }
   }
diff --git a/src/mixins/pagination.js b/src/mixins/pagination.js
index 728cbe45a37..66f528bbec6 100644
--- a/src/mixins/pagination.js
+++ b/src/mixins/pagination.js
@@ -2,21 +2,55 @@
  * Comon props, computed, data, render function, and methods for b-pagination and b-pagination-nav
  */
 
+import warn from '../utils/warn'
 import range from '../utils/range'
 import KeyCodes from '../utils/key-codes'
 import stripScripts from '../utils/strip-scripts'
 import { isVisible, isDisabled, selectAll, getAttr } from '../utils/dom'
 import bLink from '../components/link/link'
 
+// Threshold of limit size when we start/stop showing ellipsis
+const ELLIPSIS_THRESHOLD = 3
+
+// Default # of buttons limit
+const DEFAULT_LIMIT = 5
+
 // Make an array of N to N+X
 function makePageArray (startNum, numPages) {
   return range(numPages).map(function (value, index) {
-    return { number: index + startNum, className: null }
+    return { number: index + startNum, classes: null }
   })
 }
 
-// Threshold of limit size when we start/stop showing ellipsis
-const ELLIPSIS_THRESHOLD = 3
+// Sanitize the provided Limit value (converting to a number)
+function sanitizeLimit (value) {
+  const limit = parseInt(value, 10) || 1
+  return limit < 1 ? DEFAULT_LIMIT : limit
+}
+
+// Sanitize the provided numberOfPages value (converting to a number)
+function sanitizeNumPages (value) {
+  let num = parseInt(value, 10) || 1
+  return num < 1 ? 1 : num
+}
+
+// Sanitize the provided current page number (converting to a number)
+function sanitizeCurPage (value, numPages) {
+  let page = parseInt(value, 10) || 1
+  return page > numPages ? numPages : (page < 1 ? 1 : page)
+}
+
+// Links don't normally respond to SPACE, so we add that functionality via this handler
+function onSpaceKey (evt) {
+  if (evt.keyCode === KeyCodes.SPACE) {
+    evt.preventDefault() // Stop page from scrolling
+    evt.stopImmediatePropagation()
+    evt.stopPropagation()
+    // Trigger the click event on the link
+    evt.currentTarget.click()
+    return false
+  }
+}
 
 // Props object
 const props = {
@@ -25,12 +59,30 @@ const props = {
     default: false
   },
   value: {
-    type: Number,
-    default: 1
+    type: [Number, String],
+    default: 1,
+    validator (value) {
+      const num = parseInt(value, 10)
+      /* istanbul ignore if */
+      if (isNaN(num) || num < 1) {
+        warn('pagination: v-model value must be a number greater than 0')
+        return false
+      }
+      return true
+    }
   },
   limit: {
-    type: Number,
-    default: 5
+    type: [Number, String],
+    default: DEFAULT_LIMIT,
+    validator (value) {
+      const num = parseInt(value, 10)
+      /* istanbul ignore if */
+      if (isNaN(num) || num < 1) {
+        warn('pagination: prop "limit" must be a number greater than 0')
+        return false
+      }
+      return true
+    }
   },
   size: {
     type: String,
@@ -100,9 +152,9 @@ export default {
   props,
   data () {
     return {
-      showFirstDots: false,
-      showLastDots: false,
-      currentPage: this.value
+      currentPage: 1,
+      localNumPages: 1,
+      localLimit: DEFAULT_LIMIT
     }
   },
   computed: {
@@ -117,35 +169,80 @@ export default {
       }
       return ''
     },
+    paginationParams () {
+      // Determine if we should show the the ellipsis
+      const limit = this.limit
+      const numPages = this.localNumPages
+      const curPage = this.currentPage
+      const hideEllipsis = this.hideEllipsis
+      let showFirstDots = false
+      let showLastDots = false
+      let numLinks = limit
+      let startNum = 1
+
+      if (numPages <= limit) {
+        // Special Case: Less pages available than the limit of displayed pages
+        numLinks = numPages
+      } else if (curPage < limit - 1 && limit > ELLIPSIS_THRESHOLD) {
+        // We are near the beginning of the page list
+        if (!hideEllipsis) {
+          showLastDots = true
+          numLinks = limit - 1
+        }
+      } else if ((numPages - curPage + 2) < limit && limit > ELLIPSIS_THRESHOLD) {
+        // We are near the end of the list
+        if (!hideEllipsis) {
+          numLinks = limit - 1
+          showFirstDots = true
+        }
+        startNum = numPages - numLinks + 1
+      } else {
+        // We are somewhere in the middle of the page list
+        if (limit > ELLIPSIS_THRESHOLD && !hideEllipsis) {
+          numLinks = limit - 2
+          showFirstDots = showLastDots = true
+        }
+        startNum = curPage - Math.floor(numLinks / 2)
+      }
+      // Sanity checks
+      if (startNum < 1) {
+        startNum = 1
+      } else if (startNum > (numPages - numLinks)) {
+        startNum = numPages - numLinks + 1
+      }
+      return { showFirstDots, showLastDots, numLinks, startNum }
+    },
     pageList () {
-      // TODO: generatePageList() has side effects. Computed props should not have side effects!
-      const { startNum, numLinks } = this.generatePageList()
+      // Generates the pageList array
+      const { numLinks, startNum } = this.paginationParams
 
       // Generate list of page numbers
       const pages = makePageArray(startNum, numLinks)
-
-      // We limit to a total of 3 page buttons on small screens
-      // Ellipsis will also be hidden on small screens
+      // We limit to a total of 3 page buttons on XS screens
+      // So add classes to page links to hide them for XS breakpoint
+      // Note: Ellipsis will also be hidden on XS screens
+      // TODO: Make this visual limit configurable based on breakpoint(s)
       if (pages.length > 3) {
         const idx = this.currentPage - startNum
         if (idx === 0) {
-          // Keep leftmost 3 buttons visible
+          // Keep leftmost 3 buttons visible when current page is first page
           for (let i = 3; i < pages.length; i++) {
-            pages[i].className = 'd-none d-sm-flex'
+            pages[i].classes = 'd-none d-sm-flex'
           }
         } else if (idx === pages.length - 1) {
-          // Keep rightmost 3 buttons visible
+          // Keep rightmost 3 buttons visible when current page is last page
           for (let i = 0; i < pages.length - 3; i++) {
-            pages[i].className = 'd-none d-sm-flex'
+            pages[i].classes = 'd-none d-sm-flex'
           }
         } else {
-          // hide left button(s)
+          // Hide all except current page, current page - 1 and current page + 1
           for (let i = 0; i < idx - 1; i++) {
-            pages[i].className = 'd-none d-sm-flex'
+            // hide some left button(s)
+            pages[i].classes = 'd-none d-sm-flex'
           }
-          // hide right button(s)
           for (let i = pages.length - 1; i > idx + 1; i--) {
-            pages[i].className = 'd-none d-sm-flex'
+            // hide some right button(s)
+            pages[i].classes = 'd-none d-sm-flex'
           }
         }
       }
@@ -153,174 +250,134 @@ export default {
     }
   },
   watch: {
-    currentPage (newPage, oldPage) {
-      if (newPage !== oldPage) {
-        this.$emit('input', newPage)
+    value (newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.currentPage = sanitizeCurPage(newValue, this.localNumPages)
       }
     },
-    value (newValue, oldValue) {
+    currentPage (newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.$emit('input', newValue)
+      }
+    },
+    numberOfPages (newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.localNumPages = sanitizeNumPages(newValue)
+      }
+    },
+    limit (newValue, oldValue) {
       if (newValue !== oldValue) {
-        this.currentPage = newValue
+        this.localLimit = sanitizeLimit(newValue)
       }
     }
   },
+  created () {
+    // Set our default values in data
+    this.localLimit = sanitizeLimit(this.limit)
+    this.localNumPages = sanitizeNumPages(this.numberOfPages)
+    this.currentPage = sanitizeCurPage(this.value, this.localNumPages)
+  },
   methods: {
-    generatePageList () {
-      // Sanity checks
-      if (this.currentPage > this.numberOfPages) {
-        this.currentPage = this.numberOfPages
-      } else if (this.currentPage < 1) {
-        this.currentPage = 1
-      }
-      // - Hide first ellipsis marker
-      this.showFirstDots = false
-      // - Hide last ellipsis marker
-      this.showLastDots = false
-      let numLinks = this.limit
-      let startNum = 1
-      if (this.numberOfPages <= this.limit) {
-        // Special Case: Less pages available than the limit of displayed pages
-        numLinks = this.numberOfPages
-      } else if (
-        this.currentPage < this.limit - 1 &&
-        this.limit > ELLIPSIS_THRESHOLD
-      ) {
-        // We are near the beginning of the page list
-        if (!this.hideEllipsis) {
-          numLinks = this.limit - 1
-          this.showLastDots = true
-        }
-      } else if (
-        this.numberOfPages - this.currentPage + 2 < this.limit &&
-        this.limit > ELLIPSIS_THRESHOLD
-      ) {
-        // We are near the end of the list
-        if (!this.hideEllipsis) {
-          this.showFirstDots = true
-          numLinks = this.limit - 1
-        }
-        startNum = this.numberOfPages - numLinks + 1
-      } else {
-        // We are somewhere in the middle of the page list
-        if (this.limit > ELLIPSIS_THRESHOLD && !this.hideEllipsis) {
-          this.showFirstDots = true
-          this.showLastDots = true
-          numLinks = this.limit - 2
-        }
-        startNum = this.currentPage - Math.floor(numLinks / 2)
-      }
-      // Sanity checks
-      if (startNum < 1) {
-        startNum = 1
-      } else if (startNum > this.numberOfPages - numLinks) {
-        startNum = this.numberOfPages - numLinks + 1
-      }
-      return { startNum, numLinks }
-    },
-    isActive (pagenum) {
-      return pagenum === this.currentPage
-    },
-    pageItemClasses (page) {
-      return [
-        'page-item',
-        this.disabled ? 'disabled' : '',
-        this.isActive(page.number) ? 'active' : '',
-        page.className
-      ]
-    },
-    pageLinkClasses (page) {
-      return [
-        'page-link',
-        this.disabled ? 'disabled' : ''
-      ]
-    },
     getButtons () {
       // Return only buttons that are visible
       return selectAll('a.page-link', this.$el).filter(btn => isVisible(btn))
     },
     setBtnFocus (btn) {
-      this.$nextTick(() => {
-        btn.focus()
-      })
+      btn.focus()
     },
     focusCurrent () {
-      const btn = this.getButtons().find(
-        el => parseInt(getAttr(el, 'aria-posinset'), 10) === this.currentPage
-      )
-      if (btn && btn.focus) {
-        this.setBtnFocus(btn)
-      } else {
-        // Fallback if current page is not in button list
-        this.focusFirst()
-      }
+      // We do this in next tick to ensure buttons have finished rendering
+      this.$nextTick(() => {
+        const btn = this.getButtons().find(
+          el => parseInt(getAttr(el, 'aria-posinset'), 10) === this.currentPage
+        )
+        if (btn && btn.focus) {
+          this.setBtnFocus(btn)
+        } else {
+          // Fallback if current page is not in button list
+          this.focusFirst()
+        }
+      })
     },
     focusFirst () {
-      const btn = this.getButtons().find(el => !isDisabled(el))
-      if (btn && btn.focus && btn !== document.activeElement) {
-        this.setBtnFocus(btn)
-      }
+      // We do this in next tick to ensure buttons have finished rendering
+      this.$nextTick(() => {
+        const btn = this.getButtons().find(el => !isDisabled(el))
+        if (btn && btn.focus && btn !== document.activeElement) {
+          this.setBtnFocus(btn)
+        }
+      })
     },
     focusLast () {
-      const btn = this.getButtons()
-        .reverse()
-        .find(el => !isDisabled(el))
-      if (btn && btn.focus && btn !== document.activeElement) {
-        this.setBtnFocus(btn)
-      }
+      // We do this in next tick to ensure buttons have finished rendering
+      this.$nextTick(() => {
+        const btn = this.getButtons()
+          .reverse()
+          .find(el => !isDisabled(el))
+        if (btn && btn.focus && btn !== document.activeElement) {
+          this.setBtnFocus(btn)
+        }
+      })
     },
     focusPrev () {
-      const buttons = this.getButtons()
-      const idx = buttons.indexOf(document.activeElement)
-      if (idx > 0 && !isDisabled(buttons[idx - 1]) && buttons[idx - 1].focus) {
-        this.setBtnFocus(buttons[idx - 1])
-      }
+      // We do this in next tick to ensure buttons have finished rendering
+      this.$nextTick(() => {
+        const buttons = this.getButtons()
+        const idx = buttons.indexOf(document.activeElement)
+        if (idx > 0 && !isDisabled(buttons[idx - 1]) && buttons[idx - 1].focus) {
+          this.setBtnFocus(buttons[idx - 1])
+        }
+      })
     },
     focusNext () {
-      const buttons = this.getButtons()
-      const idx = buttons.indexOf(document.activeElement)
-      const cnt = buttons.length - 1
-      if (
-        idx < cnt &&
-        !isDisabled(buttons[idx + 1]) &&
-        buttons[idx + 1].focus
-      ) {
-        this.setBtnFocus(buttons[idx + 1])
-      }
+      // We do this in next tick to ensure buttons have finished rendering
+      this.$nextTick(() => {
+        const buttons = this.getButtons()
+        const idx = buttons.indexOf(document.activeElement)
+        const cnt = buttons.length - 1
+        if (
+          idx < cnt &&
+          !isDisabled(buttons[idx + 1]) &&
+          buttons[idx + 1].focus
+        ) {
+          this.setBtnFocus(buttons[idx + 1])
+        }
+      })
     }
   },
   render (h) {
     const buttons = []
+    const numberOfPages = this.localNumPages
+    const disabled = this.disabled
+    const { showFirstDots, showLastDots } = this.paginationParams
+
+    // Helper function
+    const isActivePage = (pageNum) => pageNum === this.currentPage
 
     // Factory function for prev/next/first/last buttons
-    const makeEndBtns = (linkTo, ariaLabel, btnText, pageTest) => {
+    const makeEndBtn = (linkTo, ariaLabel, btnSlot, btnText, pageTest, key) => {
       let button
-      pageTest = pageTest || linkTo // Page # to test against to disable
-      if (this.disabled || this.isActive(pageTest)) {
+      const domProps = btnSlot ? {} : { innerHTML: stripScripts(btnText) }
+      const staticClass = 'page-item'
+      const attrs = {
+        role: 'none presentation',
+        'aria-hidden': disabled ? 'true' : null
+      }
+      if (disabled || isActivePage(pageTest) || linkTo < 1 || linkTo > numberOfPages) {
         button = h(
           'li',
-          {
-            class: ['page-item', 'disabled'],
-            attrs: { role: 'none presentation', 'aria-hidden': 'true' }
-          },
-          [
-            h('span', {
-              class: ['page-link'],
-              domProps: { innerHTML: stripScripts(btnText) }
-            })
-          ]
+          { key, attrs, staticClass, class: ['disabled'] },
+          [h('span', { staticClass: 'page-link', domProps }, [btnSlot])]
         )
       } else {
         button = h(
           'li',
-          {
-            class: ['page-item'],
-            attrs: { role: 'none presentation' }
-          },
+          { key, attrs, staticClass },
           [
             h(
               'b-link',
               {
-                class: ['page-link'],
+                staticClass: 'page-link',
                 props: this.linkProps(linkTo),
                 attrs: {
                   role: 'menuitem',
@@ -329,24 +386,11 @@ export default {
                   'aria-controls': this.ariaControls || null
                 },
                 on: {
-                  click: evt => {
-                    this.onClick(linkTo, evt)
-                  },
-                  keydown: evt => {
-                    // Links don't normally respond to SPACE, so we add that functionality
-                    if (evt.keyCode === KeyCodes.SPACE) {
-                      evt.preventDefault()
-                      this.onClick(linkTo, evt)
-                    }
-                  }
+                  click: evt => { this.onClick(linkTo, evt) },
+                  keydown: onSpaceKey
                 }
               },
-              [
-                h('span', {
-                  attrs: { 'aria-hidden': 'true' },
-                  domProps: { innerHTML: stripScripts(btnText) }
-                })
-              ]
+              [h('span', { domProps }, [btnSlot])]
             )
           ]
         )
@@ -355,79 +399,110 @@ export default {
     }
 
     // Ellipsis factory
-    const makeEllipsis = () => {
+    const makeEllipsis = (isLast) => {
       return h(
         'li',
         {
+          key: `elipsis-${isLast ? 'last' : 'first'}`,
           class: ['page-item', 'disabled', 'd-none', 'd-sm-flex'],
           attrs: { role: 'separator' }
         },
         [
           this.$slots['ellipsis-text'] ||
-          h('span', {
-            class: ['page-link'],
-            domProps: { innerHTML: stripScripts(this.ellipsisText) }
-          })
+          h(
+            'span',
+            {
+              class: ['page-link'],
+              domProps: { innerHTML: stripScripts(this.ellipsisText) }
+            }
+          )
         ]
       )
     }
 
-    // Goto First Page button
+    // Goto First Page button bookend
     buttons.push(
       this.hideGotoEndButtons
         ? h(false)
-        : makeEndBtns(1, this.labelFirstPage, this.$slots['first-text'] || stripScripts(this.firstText))
+        : makeEndBtn(
+          1,
+          this.labelFirstPage,
+          this.$slots['first-text'],
+          this.firstText,
+          1,
+          'bookend-goto-first'
+        )
     )
 
-    // Goto Previous page button
-    buttons.push(makeEndBtns(this.currentPage - 1, this.labelPrevPage, this.$slots['prev-text'] || this.prevText, 1))
+    // Goto Previous page button bookend
+    buttons.push(
+      makeEndBtn(
+        this.currentPage - 1,
+        this.labelPrevPage,
+        this.$slots['prev-text'],
+        this.prevText,
+        1,
+        'bookend-goto-prev'
+      )
+    )
 
     // First Ellipsis Bookend
-    buttons.push(this.showFirstDots ? makeEllipsis() : h(false))
+    buttons.push(showFirstDots ? makeEllipsis(false) : h(false))
 
     // Individual Page links
     this.pageList.forEach(page => {
       let inner
-      let pageNum = stripScripts(this.makePage(page.number))
-      if (this.disabled) {
-        inner = h('span', {
-          class: ['page-link'],
-          domProps: { innerHTML: pageNum }
-        })
-      } else {
-        const active = this.isActive(page.number)
-        inner = h('b-link', {
-          class: this.pageLinkClasses(page),
-          props: this.linkProps(page.number),
-          attrs: {
-            role: 'menuitemradio',
-            tabindex: active ? '0' : '-1',
-            'aria-controls': this.ariaControls || null,
-            'aria-label': `${this.labelPage} ${page.number}`,
-            'aria-checked': active ? 'true' : 'false',
-            'aria-posinset': page.number,
-            'aria-setsize': this.numberOfPages
+      const pageText = this.makePage(page.number)
+      const active = isActivePage(page.number)
+      const staticClass = 'page-link'
+      const attrs = {
+        role: 'menuitemradio',
+        'aria-disabled': disabled ? 'true' : null,
+        'aria-controls': this.ariaControls || null,
+        'aria-label': `${this.labelPage} ${page.number}`,
+        'aria-checked': active ? 'true' : 'false',
+        'aria-posinset': page.number,
+        'aria-setsize': numberOfPages,
+        // ARIA "roving tabindex" method
+        tabindex: disabled ? null : (active ? '0' : '-1')
+      }
+      if (disabled) {
+        inner = h(
+          'span',
+          {
+            key: `page-${page.number}-link-disabled`,
+            staticClass,
+            attrs
           },
-          domProps: { innerHTML: pageNum },
-          on: {
-            click: evt => {
-              this.onClick(page.number, evt)
-            },
-            keydown: evt => {
-              if (evt.keyCode === KeyCodes.SPACE) {
-                evt.preventDefault()
-                this.onClick(page.number, evt)
-              }
+          pageText
+        )
+      } else {
+        inner = h(
+          'b-link',
+          {
+            key: `page-${page.number}-link`,
+            props: this.linkProps(page.number),
+            staticClass,
+            attrs,
+            on: {
+              click: evt => { this.onClick(page.number, evt) },
+              keydown: onSpaceKey
             }
-          }
-        })
+          },
+          pageText
+        )
       }
       buttons.push(
         h(
           'li',
           {
-            key: page.number,
-            class: this.pageItemClasses(page),
+            key: `page-${page.number}`,
+            staticClass: 'page-item',
+            class: [
+              disabled ? 'disabled' : '',
+              active ? 'active' : '',
+              page.classes
+            ],
             attrs: { role: 'none presentation' }
           },
           [inner]
@@ -436,23 +511,32 @@ export default {
     })
 
     // Last Ellipsis Bookend
-    buttons.push(this.showLastDots ? makeEllipsis() : h(false))
+    buttons.push(showLastDots ? makeEllipsis(true) : h(false))
 
-    // Goto Next page button
+    // Goto Next page button bookend
     buttons.push(
-      makeEndBtns(
+      makeEndBtn(
         this.currentPage + 1,
         this.labelNextPage,
-        this.$slots['next-text'] || this.nextText,
-        this.numberOfPages
+        this.$slots['next-text'],
+        this.nextText,
+        numberOfPages,
+        'bookend-goto-next'
       )
     )
 
-    // Goto Last Page button
+    // Goto Last Page button bookend
     buttons.push(
       this.hideGotoEndButtons
         ? h(false)
-        : makeEndBtns(this.numberOfPages, this.labelLastPage, this.$slots['last-text'] || this.lastText)
+        : makeEndBtn(
+          numberOfPages,
+          this.labelLastPage,
+          this.$slots['last-text'],
+          this.lastText,
+          numberOfPages,
+          'bookend-goto-last'
+        )
     )
 
     // Assemble the paginatiom buttons
@@ -463,7 +547,7 @@ export default {
         class: ['pagination', 'b-pagination', this.btnSize, this.alignment],
         attrs: {
           role: 'menubar',
-          'aria-disabled': this.disabled ? 'true' : 'false',
+          'aria-disabled': disabled ? 'true' : 'false',
           'aria-label': this.ariaLabel || null
         },
         on: {
@@ -484,6 +568,19 @@ export default {
     )
 
     // if we are pagination-nav, wrap in '<nav>' wrapper
-    return this.isNav ? h('nav', {}, [pagination]) : pagination
+    if (this.isNav) {
+      return h(
+        'nav',
+        {
+          attrs: {
+            'aria-disabled': disabled ? 'true' : null,
+            'aria-hidden': disabled ? 'true' : 'false'
+          }
+        },
+        [pagination]
+      )
+    } else {
+      return pagination
+    }
   }
 }