Jonathan Smith

Pagers & Paginations

Pagination

Provide pagination links for your site or app with the multi-page pagination component

Default Pagination

Simple, scable pagination by adding the .pagination class. You can also add .disable for unselectable links or .active to indicate current page

							<ul class="pagination">
							<li class="disabled"><a href="#"><i class="ion-ios-arrow-left"></i></a></li>
							<li class="active"><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#"><i class="ion-ios-arrow-right"></i></a></li>
							</ul>
						

Sizing

Add smaller or larger pagination with the .pagination-lg or .pagination-sm class

Large pagination-lg

Regular pagination

Small pagination-sm

Positioning

Paginations can be placed anywhere with any alignments by wrapping the pagination with div and giving it a text-left, text-center or text-right class

Pagination Left

text-left

Pagination Center

text-center

Pagination Right

text-right

Pager

Default Pager

Quick previous and next links for simple pagination implementations with light markup and styles

Just add the class .pager to a ul

							<ul class="pager">
							<li><a href="#">Previous</a></li>
							<li><a href="#">Next</a></li>
							</ul>
						

Rounded Pager

Quick previous and next links for simple pagination implementations with light markup and styles

Just add the class .pager to a ul

							<ul class="pager">
							<li><a href="#">Previous</a></li>
							<li><a href="#">Next</a></li>
							</ul>
						

Aligned Links

Alternatively, you can align each link to the sides by adding the .previous and .next classes to the li

  • Alerts Get notified on new alerts
  • Notifications Get notified on new notifications
  • Messages Get notified on new messages
  • Warnings Get notified on new warnings
  • Snap to increments
    Amount ($100 increments):
  • Range
    Price range:
  • Maximum
    Maximum Value:
  • Minimum
    Minimum Value: