Pagination

Easlily create a nicely looking pagination to navigate through pages.


Usage

The Pagination component consists of button-like styled links, that are aligned side by side.

To apply an ellipsis without any styling, just use a <span> element instead of an <a> element.

Usage

  • Class Description
    .pagination Add this class to a <ul> element to define the Pagination component. Use <a> elements as pagination items within the list.
    .active Add this class to a list item to apply an active state and use a <span> instead of an <a> element.
    .disabled Add this class to a list item to apply a disabled state and use a <span> instead of an <a> element.
  • <ul class="pagination">
        <li><a href="#">...</a></li>
        <li class="active">
            <span>...</span>
        </li>
        <li class="disabled">
            <span>...</span>
        </li>
        <li>
            <span>...</span>
        </li>
    </ul>

Alignment modifiers

Add the .pagination-left or .pagination-right class to the pagination to align it left or right.

Usage

  • <ul class="pagination pagination-left">
        <li>...</li>
    </ul>
    <ul class="pagination pagination-right">
        <li>...</li>
    </ul>

Previous and next

Creating a simple previous and next pagination is very easy. Just add the .pagination-previous or .pagination-next class to a <li> element to align previous and next buttons left or right.

Example

Usage

  • <li class="pagination-previous"><a href="#">...</a></li>
    <li class="pagination-next"><a href="#">...</a></li>

Pagination with icons

Enhance your pagination with icons from the Icon component by adding one of the .icon-* classes to an <i> or <span> element within a pagination link.

Usage

  • <li><a href="#"><i class="icon-chevron-left"></i></a></li>
    <li><a href="#"><i class="icon-chevron-right"></i></a></li>