Kamiari is an awesome that would do all heavy-lifting work if you want to do pagination. Yet Kaminari’s default layout does not fit well with Twitter Bootstrap pagination styling. In this tutorial, I’ll show you how to make Kaminari play well with Bootstrap v3.
First thing, assume we have
app/views/products/index.html.haml, place the
paginate call in this template:
By default, Kaminari will generate a list of
nav wrapped under a div, which is
totally different to the
ul li structures of Bootstrap pagination.
No problemo! we could tweak this. Now we need to tell bootstrap to generate template files:
which create various fields under
Next, we need to edit
app/views/kaminari/_paginator.html.haml and replace the
1 2 3 4 5 6 7 8 9 10 11
What we did above is getting rid of
div.pagination and adding class
That’s it, now you have Twitter Bootstrap 3 pagination powered by Kaminari!
Keep on learning guys!