Ruby Journal

How to Style Kaminari Pagination With Twitter Bootstrap 3

| Comments

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 Kaminari’s paginate call in this template:

1
2
...
= paginate @products

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:

1
rails generate kaminari:views bootstrap

which create various fields under app/views/kaminari.

Next, we need to edit app/views/kaminari/_paginator.html.haml and replace the content with:

1
2
3
4
5
6
7
8
9
10
11
= paginator.render do
  %ul.pagination.pagination-lg
    = first_page_tag unless current_page.first?
    = prev_page_tag unless current_page.first?
    - each_page do |page|
      - if page.left_outer? || page.right_outer? || page.inside_window?
        = page_tag page
      - elsif !page.was_truncated?
        = gap_tag
    = next_page_tag unless current_page.last?
    = last_page_tag unless current_page.last?

What we did above is getting rid of div.pagination and adding class pagination to ul tag

That’s it, now you have Twitter Bootstrap 3 pagination powered by Kaminari!

Keep on learning guys!

Comments