BootstrapVue Pagination

The BootstrapVue pagination component consists of button-like styled links, that are arranged side by side in a horizontal list. Pagination is built with list HTML elements so screen readers can announce the number of available links.

Learn how to create nice looking pagination using these BootstrapVue pagination examples to indicate a series of related content exists across multiple pages and to navigate through pages easily.

Example

<b-pagination
  v-model="currentPage"
  :total-rows="10"
  :per-page="3"
  first-number
  last-number
></b-pagination>

Disabled and active states

<div>
   <b-pagination
     v-model="currentPage"
     :total-rows="rows"
     :per-page="perPage"
     first-number
   ></b-pagination>
 </div>

 <script>
   export default {
     data() {
       return {
         rows: 100,
         perPage: 1,
         currentPage: 2
       }
     }
   }
 </script>

Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

<div class="mt-3">
  <b-pagination v-model="currentPage" :total-rows="rows" size="lg"></b-pagination>
</div>

<div>
   <b-pagination v-model="currentPage" :total-rows="rows" size="sm"></b-pagination>
 </div>

Alignment

Change the alignment of pagination components with flexbox utilities.

 <b-pagination v-model="currentPage" :total-rows="rows" align="center"></b-pagination>

<b-pagination v-model="currentPage" :total-rows="rows" align="right"></b-pagination>

Props

PROP NAME	TYPE	DEFAULT	DESCRIPTION
pageCount	Number	N/A	Pagination page count. This should be specified in combination with perPage
perPage	Number	10	Pagination per page. Should be specified with total or pageCount
total	Number	N/A	Can be specified instead of pageCount. The page count in this case will be total/perPage
value	Number	1	Pagination value
size	String	N/A	Pagination size
align	String	N/A	Pagination alignment (e.g center/start/end)

If you want to see more examples and properties please check the official BootstrapVue Documentation.