Simple Fix for Pagination With Twitter Bootstrap

As a Rails guy, I always perform my table pagination using mislav’s will_paginate gem. However, when I use it combined with Twitter Bootstrap, I get an undesired result:

There is a very simple fix for this which doesn’t require using an additional gem.

Add the following CSS to your application:

assets/stylesheets/pagination_fix.css

    //-------------------------------------------------------------------------------
    //   Pagination fix for will_paginate and bootstrap
    //-------------------------------------------------------------------------------

    .pagination {
      span.disabled {
        color: #aaa !important;
      }
      em.current {
        float: left;
        padding: 0 14px;
        line-height: 38px;
        text-decoration: none;
        background-color: white;
        border: 1px solid #DDD;
        border-left-width: 0;
      }
      .previous_page {
        border-left: 1px solid #ddd;
      }
    }

Refresh your page and the pagination issues should be resolved:

Hope this helps!

Update (Dec 4, 2012):

I recently attempted to use the will_paginate gem with the latest version of Bootstrap (v2.2.1) and the pagination no longer rendered using the <li>..</li> elements. To fix this I added the following into an initializer:

config/initializers/will_paginate.rb

if defined?(WillPaginate)
  module WillPaginate
    module ActionView
      def will_paginate(collection = nil, options = {})
        options[:renderer] ||= BootstrapLinkRenderer
        super.try :html_safe
      end

      class BootstrapLinkRenderer < LinkRenderer
        protected

        def html_container(html)
          tag :div, tag(:ul, html), container_attributes
        end

        def page_number(page)
          tag :li, link(page, page, :rel => rel_value(page)), :class => ('active' if page == current_page)
        end

        def previous_or_next_page(page, text, classname)
          tag :li, link(text, page || '#'), :class => [classname[0..3], classname, ('disabled' unless page)].join(' ')
        end

        def gap
          tag :li, link(super, '#'), :class => 'disabled'
        end
      end
    end
  end
end

This tip was provided by Søren Houen and found on the Railscasts comments.