Format will_paginate html to match Twitter Bootstrap styling
Clone or download
yrgoldteeth Merge pull request #25 from b2e9f523/pagination-styling
Pagination Styling: Pass additional classes to ul element
Latest commit 3d747b1 May 18, 2017


Will Paginate link renderer styles for Twitter Bootstrap 3/4

Rails Engine that extends will_paginate stylings to match the pagination styling conventions in Twitter's Bootstrap toolkit.

The real hard work done on the renderer initializer was written by Isaac Bowen.

Demo picture

Demo of boostrap-will_paginate


Add to your Gemfile:

gem 'bootstrap-will_paginate'


Just like you would in the regular will_paginate. If you've got a need to use the default will_paginate stylings, pass an option like so:

<%= will_paginate(@things, :renderer => WillPaginate::ActionView::LinkRenderer) %>

To use Bootstrap 4 version:

<%= will_paginate(@things, :renderer => WillPaginate::ActionView::Bootstrap4LinkRenderer) %>

Size and Alignment of the Pagination Component

You can easily change the pagination components' appearance by passing the correct Bootstrap classes as options:

Sizing(Bootstrap 3 & 4): Add .pagination-lg or .pagination-sm for additional sizes.

<%= will_paginate(@things, :renderer => WillPaginate::ActionView::Bootstrap4LinkRenderer, class: 'pagination-lg') %>

Alignment (Bootstrap 4 only): Change the alignment of pagination components using Boostrap 4 Flexbox utilities

<%= will_paginate(@things, :renderer => WillPaginate::ActionView::Bootstrap4LinkRenderer, class: 'justify-content-center') %>

Copyright (c) 2017 Nicholas Fine, Isaac Bowen released under the MIT license