In bootstrap-vue pagination there is no slot for change main color of pagination.
you see there is only blue color for it.
is there any way to change it to my required color?
Advertisement
Answer
You could change it by changing the CSS
of the active item of b-pagination
. I illustrated the solution by the following code:
new Vue({ el: '#app', data() { return { rows: 100, perPage: 10, currentPage: 1 } }, })
.customPage.page-item.active .page-link { background-color: red; border-color: red; }
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" /> <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script> <div id="app"> <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" page-class="customPage"></b-pagination> </div>