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.

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.

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 %}