Bootstrap 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 Bootstrap
pagination examples to indicate a series of related content exists
across multiple pages and to navigate through pages easily.
Example
<base-pagination :page-count= "10" ></base-pagination>
Colors
<base-pagination :page-count= "10" v-model= "pagination.default" type= "primary" :showArrows= "false" ></base-pagination>
<base-pagination :page-count= "10" v-model= "pagination.info" iconLeft= "ni ni-bold-left" iconRight= "ni ni-bold-right" type= "info" ></base-pagination>
<base-pagination :page-count= "10" v-model= "pagination.success" iconLeft= "fa fa-angle-double-left" iconRight= "fa fa-angle-double-right" type= "success" ></base-pagination>
<base-pagination :page-count= "10" v-model= "pagination.warning" type= "warning" ></base-pagination>
<base-pagination :page-count= "10" v-model= "pagination.danger" type= "danger" ></base-pagination>
<base-pagination :page-count= "10" v-model= "pagination.secondary" type= "secondary" ></base-pagination>
<base-pagination :page-count= "10" v-model= "pagination.default" type= "default" ></base-pagination>
<script>
export default {
data () {
return {
pagination : {
default : 3 ,
info : 2 ,
success : 3 ,
warning : 1 ,
secondary : 5 ,
danger : 4
}
};
}
};
</script>
Sizing
Fancy larger or smaller pagination? Add
.pagination-lg
or
.pagination-sm
for additional sizes.
<base-pagination :page-count= "10" :showArrows= "false" size= "lg" ></base-pagination>
<base-pagination :page-count= "10" :showArrows= "false" size= "sm" ></base-pagination>
Alignment
Change the alignment of pagination components with flexbox
utilities.
<base-pagination :page-count= "10" v-model= "pagination.default" type= "primary" class= "justify-content-center" ></base-pagination>
<base-pagination :page-count= "10" v-model= "pagination.default" type= "primary" class= "justify-content-end" ></base-pagination>