Configure KnpPaginator to work with Twitter Bootstrap

Question

i'm trying to apply twitter bootstrap css style to my knp pagination without modifying the vendor.
Is there a way to configure KnpPaginator so to detect existing bootstrap css style sheets?because as the screenshot shows, it is build to work with bootstrap.

Unsightly

Answer 1

@Derick F: thank you a lot, i found an other way :
i just replaced:

pagination: KnpPaginatorBundle:Pagination:sliding.html.twig

with

pagination: KnpPaginatorBundle:Pagination:twitter_bootstrap_v3_pagination.html.twig

its the default template included in knp bundle.

Unsightly

oh lol, well then i didn't even know they had that included, but that's great to know. It seems one key differences are that they don't handle window resizing as well as my template. If you view the paginator in a web page and then resize your window down to a phone screen size you'll notice that the paginator ends up taking two lines instead of one. – Scopas

Answer 2

Yes, in your config.yml and your knp_paginator settings:

knp_paginator:
    template:
         pagination: AcmeBundle:Common:paginator-bootstrap.html.twig

and then in paginator-bootstrap.html.twig

{% if pageCount > 1 %}
    <ul class="pagination">
    {% if first is defined and current != first %}
        <li class="first">
            <a href="{{ path(route, query|merge({(pageParameterName): first})) }}">
                &lt;&lt;
            </a>
        </li>
    {% endif %}

    {% if previous is defined %}
        <li class="previous">
            <a class="hidden-xs" href="{{ path(route, query|merge({(pageParameterName): previous})) }}">
                &lt;
            </a>
        </li>
    {% endif %}

    {% for page in pagesInRange %}
        {% if page != current %}
            <li class="page">
                <a href="{{ path(route, query|merge({(pageParameterName): page})) }}">
                    {{ page }}
                </a>
            </li>
        {% else %}
            <li class="current active">
                <a>
                    {{ page }} <span class="sr-only">(current)</span>
                </a>
            </li>
        {% endif %}
    {% endfor %}

    {% if next is defined %}
        <li class="next">
            <a class="hidden-xs" href="{{ path(route, query|merge({(pageParameterName): next})) }}">
                &gt;
            </a>
        </li>
    {% endif %}

    {% if last is defined and current != last %}
        <li class="last">
            <a href="{{ path(route, query|merge({(pageParameterName): last})) }}">
                &gt;&gt;
            </a>
        </li>
    {% endif %}
    </ul>
{% endif %}

Scopas