Customizing with SCSS

If you are using SCSS, it's recommended to utilize the SCSS variables provided by Bootstrap for customizing pagination. Troy mentioned this in a comment.

Explore the available variables here.

Applying CSS Classes

You can assign a class to b-pagination and then target the a tags within the pagination using that class. A sample code snippet is included below for reference.

In addition, starting from version 2.3.0, you can use specific props to apply classes to different types of buttons. These props will add the class to the li element, so additional CSS targeting the a tag will still be necessary. For detailed information on these class props, refer to the reference section.

page-class
first-class
last-class
prev-class
next-class
ellipsis-class

If you are employing a scoped style tag within your components, make sure to use a deep selector to correctly target the a tags.

new Vue({
  el: '#app'
})

.customPagination > li > a {
  color: red;
}

.customPagination > li.active > a,
.customPagination > li > a:hover
{
  color: white;
  background-color: green!important;
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1979484a1d3cfd7cfd0d0">[email protected]</a>/dist/vue.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0828f8f949394928190cd969585a0d2ced4ced1">[email protected]</a>/dist/bootstrap-vue.js"></script>

<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65070a0a11161117041525514b514b54">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3c1ccccd7d0d7d1c2d38ed5d6c6e3918d978d92">[email protected]</a>/dist/bootstrap-vue.css" rel="stylesheet"/>


<div id="app">
  <b-pagination
    :total-rows="50"
    :per-page="5"
    class="customPagination"
  >
  </b-pagination>
</div>

Although Bootstrap-vue may not offer much flexibility when it comes to changing the default theme colors, it is definitely achievable.

To begin, you need to create a custom.scss file where you can introduce new color themes for your bootstrap-vue setup.

In the src/assets/styles/custom.scss file:

// Define / adjust color variables
$myCustom: rgba(64, 206, 148, 1);
$primary: $myCustom;

Keep in mind that in the example provided above, all bootstrap elements - including pagination components - without a specified variant will adopt the $myCustom color scheme.

Next, import this custom file along with the original SCSS bootstrap file into your main Vue component:

<style lang="scss">
 @import "./assets/styles/custom.scss";
 @import "../node_modules/bootstrap/scss/bootstrap.scss";
</style>

In your code snippet, make sure to specify the variant accordingly:

<b-pagination
    v-model="currentPage"
    :total-rows="users.length"
    :per-page="perPage"
    align="fill"
    size='lg'
    first-number
    last-number
    class="my-0"
    variant="primary"
></b-pagination>

If you prefer not to alter the default primary color, you can establish a new variant within your custom.scss file:

$theme-colors: ( "newVariant": rgba(0, 152, 152, 1));

We hope this solution meets your requirements perfectly.