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.

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.

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


Alignment modifiers

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


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.


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.

  • ...