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.


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;

You can see on the picture enter image description here


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.