How to change color of pagination in bootstrap-vue?

1
votes

I tried to change it with bootstrap examples but failed.

        <b-pagination
            v-model="currentPage"
            :total-rows="users.length"
            :per-page="perPage"
            align="fill"
            size='lg'
            first-number
            last-number
            class="my-0"
        ></b-pagination>
2
vue.jsbootstrap-vue
Coul you share what did you try ? – Pierre Said
I tried to create custom css and include it in declaration. – skns
From here – skns
Did you try the examples from there ? : bootstrap-vue.js.org/docs/components/… – Pierre Said

2 Answers

4
votes

SCSS

As Troy pointed out in a comment, bootstrap has various SCSS variables you can use to customize the pagination. So if you're using SCSS this would be the preferred way.

View the variables.

CSS

You can add a class to b-pagination and use that class to target the a tags inside the pagination. Check the snippet for an example of this.

You can also use the following props (requires v2.3.0+) to place specific classes on the various types of buttons. Note these will place the class on the li, so you'll still need CSS to target the a tag. For more information about the class props check the reference section

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

If you're using a scoped style tag in your components, note you might have to use a deep selector to target that a tags correctly.

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/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet"/>


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

Bootstrap-vue indeed is not so flexible when it comes to change to the default theme colors, but it is possible.

You first have to create a custom.scss file, where you can add new color themes to your bootstrap-vue.

On src/assets/styles/custom.scss:

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

Note that on the example above all bootstrap elements - including pagination - without a variant set, will get the $myCustom color.

Then you have to import this file and the original scss bootstrap file on your root vue component:

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

On your code example, you pass 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>

In case you don't want to modify the default primary color, you can create a new variant on you custom.scss:

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

Hope it suits you well