My b-pagination was working good on all tables, but one day it just started to look wrong on every table in my whole project, I don't know where is root of style of pagination and what could I change. It doesn't show numbers and arrows in same line, something is up and something is down. This is my code in Vue.js, but as I said it was good before, and I also tried to check with b-pagination from vue site https://bootstrap-vue.org/docs/components/pagination, but same, maybe is some problem with npm or style in css.
<b-pagination
v-model="currentPage"
:total-rows="totalRows"
:per-page="perPage"
align="right"
size="sm"
class="my-0"
@change="changeCurrentPage"
>
</b-pagination>
And I found code in node_modules/bootstrap-vue/src/components/pagination/_pagination.scss
// <pagination> and <pagination-nav> require the helper utility classes
@import "../../utilities";
$bv-pagination-classes-defined: false !default;
// Make sure to include these style definitions only once
@if $bv-pagination-classes-defined == false {
$bv-pagination-classes-defined: true;
// Pagination pill style
.b-pagination-pills {
.page-item {
.page-link {
border-radius: 50rem !important;
margin-left: 0.25rem;
line-height: 1;
}
&:first-child {
.page-link {
margin-left: 0;
}
}
}
}
}
I am not able to make changes in node modules, so can I make any change in vue files with style
And this is in css
.page-item.active .page-link {
z-index: 3;
color: #fff;
background-color: #009AA7;
border-color: #009AA7;
}
.page-item.disabled .page-link {
color: #74788d;
pointer-events: none;
cursor: auto;
background-color: #fff;
border-color: #ced4da;
}
.pagination-lg .page-link {
padding: 0.75rem 1.5rem;
font-size: 1.125rem;
line-height: 1.5;
}

Solved by: