Bootstrap vue pagination styling

Question

I need some help. I am trying to style bootstrap vue pagination and I am not able to achieve it. The only thing I was able to achieved was to moved the pagination 50% to the left. I can not style the ul, li and the button inside the li such as changing background for ul, li and button, text color and etc. I even use class name on them, but nothing is working.

var app = new Vue({
  el: '#app',
  data: () => ({
    currentPage: 1,
    rows: 50
  }),
})

.pagination {
      margin-left: 50%;

      ul {
        text-align: right;
        li {
          float: right !important;
        }
      }

      .page-item {
        color: $color-red;
      }

      .page-link {
        color: $color-red;
      }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
 <!-- Required Stylesheets -->
        <link
          type="text/css"
          rel="stylesheet"
          href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
        />
        <link
          type="text/css"
          rel="stylesheet"
          href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"
        />

        <!-- Required scripts -->
        <script src="https://unpkg.com/vue"></script>
        <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
        
        
<div id='app'>
<b-container 
class="pagination-container">
<b-pagination 
:container-class="'pagination'"
:pageClass="'page-item'"
:pageLinkClass="'page-link-item'"
v-model="currentPage"
pills :total-rows="rows">
</b-pagination>
</b-container>
</div>

Ali Kleit Ali Kleit · Accepted Answer · 2020-06-02T16:59:21

compile your sass file, and inspect the elements to get to the selectors

var app = new Vue({
  el: '#app',
  data: () => ({
    currentPage: 1,
    rows: 50
  }),
})

.pagination {
      margin-left: 50%;

     
}

 .pagination ul {
        text-align: right;
        
      }
      
     .pagination li {
          float: right !important;
        }
.pagination .page-item {
        color: red;
}

.pagination .page-link {
        color: red;
}

.pagination .page-item.active .page-link {
        color: #000;
        background-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
 <!-- Required Stylesheets -->
        <link
          type="text/css"
          rel="stylesheet"
          href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
        />
        <link
          type="text/css"
          rel="stylesheet"
          href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"
        />

        <!-- Required scripts -->
        <script src="https://unpkg.com/vue"></script>
        <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
        
        
<div id='app'>
<b-container 
class="pagination-container">
<b-pagination 
:container-class="'pagination'"
:pageClass="'page-item'"
:pageLinkClass="'page-link-item'"
v-model="currentPage"
pills :total-rows="rows">
</b-pagination>
</b-container>
</div>

Bootstrap vue pagination styling

1 Answers