# Pagination
# Pagination - Bootstrap 4
snippet pag
<nav>
    <ul class="pagination">
        <li>
            <a href="${3:#}" aria-label="${4:Previous}">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">${4:Previous}</span>
            </a>
        </li>
        <li><a href="${1:#}">1</a></li>
        <li><a href="${1:#}">2</a></li>
        <li><a href="${1:#}">3</a></li>
        ${2:<li><a href="${1:#}">4</a></li>
        <li><a href="${1:#}">5</a></li>}
        <li>
            <a href="${3:#}" aria-label="${4:Next}">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">${4:Next}</span>
            </a>
        </li>
    </ul>
</nav>
endsnippet

# Pagination Disabled and active states - Bootstrap 4
snippet pagda
<nav>
    <ul class="pagination">
        <li class="disabled">
            <a href="${1:#}" aria-label="${2:Previous}">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">${2:Previous}</span>
            </a>
        </li>
        <li class="active">
            <a href="${1:#}">1 <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="${1:#}">2</a></li>
        <li><a href="${1:#}">3</a></li>
        <li><a href="${1:#}">4</a></li>
        <li><a href="${1:#}">5</a></li>
        <li>
            <a href="${1:#}" aria-label="${3:Next}">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">${3:Next}</span>
            </a>
        </li>
    </ul>
</nav>
endsnippet

# Pagination - Bootstrap 4
snippet pagsz
<nav>
    <ul class="pagination pagination-${1:lg|sm}">
        <li>
            <a href="${1:#}" aria-label="${2:Previous}">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">${2:Previous}</span>
            </a>
        </li>
        <li><a href="${1:#}">1</a></li>
        <li><a href="${1:#}">2</a></li>
        <li><a href="${1:#}">3</a></li>
        <li>
            <a href="${1:#}" aria-label="${3:Next}">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">${3:Next}</span>
            </a>
        </li>
    </ul>
</nav>
endsnippet

# Pagination pager - Bootstrap 4
snippet pager
<nav>
    <ul class="pager">
        <li><a href="${1:#}">Previous</a></li>
        <li><a href="${1:#}">Next</a></li>
    </ul>
</nav>
endsnippet

# Pagination pager aligned - Bootstrap 4
snippet pageral
<nav>
    <ul class="pager">
        <li class="pager-prev"><a href="${1:#}">Older</a></li>
        <li class="pager-next"><a href="${1:#}">Newer</a></li>
    </ul>
</nav>
endsnippet

# Pagination pager aligned & disabled - Bootstrap 4
snippet pagerald
<nav>
    <ul class="pager">
        <li class="pager-prev disabled"><a href="${1:#}">Older</a></li>
        <li class="pager-next"><a href="${1:#}">Newer</a></li>
    </ul>
</nav>
endsnippet