Custom css with kaminari with bootstrap

Question

I try to use paginate with kaminari. My project used bootsrap css, and the result is so ugly:)

The html is generated by nokogiri

<nav class="pagination">
    <span class="first">
  <a href="/admin/book_borrow/borrow?locale=en">« First</a>
</span>

    <span class="prev">
  <a rel="prev" href="/admin/book_borrow/borrow?locale=en">‹ Prev</a>
</span>

        <span class="page">
  <a rel="prev" href="/admin/book_borrow/borrow?locale=en">1</a>
</span>

        <span class="page current">
  2
</span>

        <span class="page">
  <a rel="next" href="/admin/book_borrow/borrow?locale=en&amp;page=3">3</a>
</span>

        <span class="page">
  <a href="/admin/book_borrow/borrow?locale=en&amp;page=4">4</a>
</span>

    <span class="next">
  <a rel="next" href="/admin/book_borrow/borrow?locale=en&amp;page=3">Next ›</a>
</span>

    <span class="last">
  <a href="/admin/book_borrow/borrow?locale=en&amp;page=4">Last »</a>
</span>

  </nav>

I want something like pagination in bootstrap page, how I can do? Please help!

Answer 1

After I posted this question I found the solution: kaminari: A Scope & Engine based, clean, powerful, customizable and sophisticated paginator for Rails 3.

Just go to the console and type:

rails generate kaminari:views bootstrap4

It will download some Haml files to your application, and the views are changed. It also supports bootstrap 2 and 3 e.g

rails generate kaminari:views bootstrap3

Here are some themes for Kaminari views: https://github.com/amatsuda/kaminari_themes