Pagination

Basic


<ul class="pagination">
    <li class="pgItem"><a class="pgLink" href="#">Previous</a></li>
    <li class="pgItem"><a class="pgLink" href="#">1</a></li>
    <li class="pgItem"><a class="pgLink" href="#">2</a></li>
    <li class="pgItem"><a class="pgLink" href="#">3</a></li>
    <li class="pgItem"><a class="pgLink" href="#">Next</a></li>
</ul>

Disable & Active


<ul class="pagination">
    <li class="pgItem disabled"><a class="pgLink" href="#">Previous</a></li>
    <li class="pgItem"><a class="pgLink" href="#">1</a></li>
    <li class="pgItem"><a class="pgLink" href="#">2</a></li>
    <li class="pgItem active"><a class="pgLink" href="#">3</a></li>
    <li class="pgItem"><a class="pgLink" href="#">Next</a></li>
</ul>

Pagination Sizing


<ul class="pagination small">
    <li class="pgItem"><a class="pgLink" href="#">Previous</a></li>
    <li class="pgItem"><a class="pgLink" href="#">1</a></li>
    <li class="pgItem"><a class="pgLink" href="#">2</a></li>
    <li class="pgItem"><a class="pgLink" href="#">3</a></li>
    <li class="pgItem"><a class="pgLink" href="#">Next</a></li>
</ul>


<ul class="pagination large">
    <li class="pgItem"><a class="pgLink" href="#">Previous</a></li>
    <li class="pgItem"><a class="pgLink" href="#">1</a></li>
    <li class="pgItem"><a class="pgLink" href="#">2</a></li>
    <li class="pgItem"><a class="pgLink" href="#">3</a></li>
    <li class="pgItem"><a class="pgLink" href="#">Next</a></li>
</ul>

Breadcrumb


<ul class="breadcrumb">
    <li class="breadcrumbItem"><a href="#">Home</a></li>
    <li class="breadcrumbItem"><a href="#">Products</a></li>
    <li class="breadcrumbItem"><a href="#">Car</a></li>
    <li class="breadcrumbItem active"><a href="#">Photos</a></li>
</ul>

Previous Next