CODEWITHSUNDEEP
vue.jspagination
Rowel Abenio
Rowel Abenio

Reputation: 53

Vuejs pagination incompatible with bootstrap 4

I am having trouble with this Github package for vuejs pagination. It seem to work on bootstrap 3 but when I use bootstrap 4, it just doesn't work. My problem basically is that bootstrap 4 doesn't style the list item correctly.

I put 'pagination' class on :container-class and it makes the list inline, but not style it like what a normal bootstrap pagination should look. It's just plain list that is inline. I even tried overriding it and putting my own 'mypagination' class on :container-class but still doesn't style it properly. Thanks in advance to you.

//VueJs Paginate code
<paginate
            :page-count="20"
            :click-handler="functionName"
            :prev-text="'Prev'"
            :next-text="'Next'"
            :container-class="'mypagination'">
        </paginate>



//My style code
<style scoped>
    .mypagination{
        list-style-type: none;
    }
    .mypagination li {
        display: inline !important;
    }
    .mypagination > li > a,
    .mypagination > li > span {
        position: relative;
        float: left;
        padding: 6px 12px;
        margin-left: -1px;
        line-height: 1.42857143;
        color: #337ab7;
        text-decoration: none;
        background-color: #fff;
        border: 1px solid #ddd;
    }
</style>

enter image description here

enter image description here

Upvotes: 0

Views: 763

Answers (1)

MarcelCode
MarcelCode

Reputation: 548

You have to add the following properties for bootstrap 4:

<paginate
  :page-count="20"
  :click-handler="clickCallback"
  :prev-text="'Prev'"
  :next-text="'Next'"
  :container-class="'pagination'"
  :page-class="'page-item'"
  :page-link-class="'page-link'"
  :prev-class="'page-item'"
  :next-class="'page-item'"
  :prev-link-class="'page-link'"
  :next-link-class="'page-link'"
  :active-class="'active'">
</paginate>

Upvotes: 2

Related Questions