Custom css with kaminari with bootstrap - ruby-on-rails

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">
« First
</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&page=3">3</a>
</span>
<span class="page">
4
</span>
<span class="next">
<a rel="next" href="/admin/book_borrow/borrow?locale=en&page=3">Next ›</a>
</span>
<span class="last">
Last »
</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

Answer 2

simply add following css to your application.css
.pagination a, .pagination span.current, .pagination span.gap {
float: left;
padding: 0 14px;
line-height: 38px;
text-decoration: none;
background-color: white;
border: 1px solid #DDD;
border-left-width: 0;
}
.pagination {
border-left: 1px solid #ddd;
.first{
padding : 0;
float: none;
border: none;
}
.prev {
padding : 0;
float: none;
border: none;
}
.page{
padding : 0;
float: none;
border: none;
}
.next{
padding : 0;
float: none;
border: none;
}
.last{
padding : 0;
float: none;
border: none;
}
}

Answer 3

rails generate kaminari:views bootstrap4
Available themes: bootstrap2, bootstrap3, bootstrap4, bourbon, bulma, foundation, foundation5, github, google, materialize, purecss, semantic_ui

Answer 4

Nearly gave up until I found "Pagination with Kaminari".
In short, after rails g kaminari:default go into the views that are created under app/views/kaminari and change the tags to suit your styling.
I went into _paginator.html.erb and changed the <nav> to a <div> and replaced all the <span> tags with <li>.
To get the bootstrap styling that fits my app, I changed the <div> tag in _paginator.html.erb to <div class="pagination pull-right"> and the <span class="page"> tags to simple <li>.
There's are a couple of gotcha's that perhaps someone else can help with:
There's erb in _page.html.erb that changes the class for the current page when active. It messes up the alignment so to get around that, change the <%= link_to_unless page.current? ... %> to <%= link_to page ... %>.
The _gap.html.erb view which inserts the "..." block also gets messed up. Replace it with <li><%= link_to '...' %></li> to get it to sit nicely inline.
I just started coding 8 weeks ago so for sure there are better ways to approach this and ways to clean up 1 and 2, but if you just want things to look right and function as intended, give that a shot and fine tune later.