Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

b-pagination with custom classes for numbers, first and last item #4597



Copy link

@gabrielslau gabrielslau commented Jan 10, 2020

Is your feature request related to a problem? Please describe...

There is currently no option to provide a custom class for the .page-item element to customize the appearance of these items.

Describe the solution you'd like

There should be a option to add a custom class to the .page-item element referring to numbers, first-page, previous, next and last-page.

Copy link

@tmorehouse tmorehouse commented Jan 10, 2020

A partial workaround is using scoped styles and Vue-loader's deep selectors:

  <b-pagination class="my-class" ...></b-pagination>

<style scoped lang="css">
.my-class /deep/ .page-item {
  /* style overrides here */
.my-class /deep/ .page-item .page-link {
  /* style overrides here */

@jacobmllr95 jacobmllr95 added this to To do in 2.3.0 via automation Jan 14, 2020
2.3.0 automation moved this from To do to Done Jan 24, 2020
tmorehouse added a commit that referenced this issue Jan 24, 2020
… option to show first/last page numbers (closes #4597, #4533) (#4622)

Co-authored-by: Troy Morehouse <>
@tmorehouse tmorehouse added the Status: Fixed / Implemented label May 10, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment