Latest web development tutorials

×

Bootstrap Tutorial

BS HOME BS Get Started BS Grid Basic BS Typography BS Tables BS Images BS Jumbotron BS Wells BS Alerts BS Buttons BS Button Groups BS Glyphicons BS Badges/Labels BS Progress Bars BS Pagination BS Pager BS List Groups BS Panels BS Dropdowns BS Collapse BS Tabs/Pills BS Navbar BS Forms BS Inputs BS Inputs 2 BS Input Sizing BS Carousel BS Modal BS Tooltip BS Popover BS Scrollspy BS Affix

Bootstrap Grid System

BS Grid System BS Stacked/Horizontal BS Grid Small BS Grid Medium BS Grid Large BS Grid Examples

Bootstrap Themes

BS Templates BS Theme "Simply Me" BS Theme "Company" BS Theme "Band"

Bootstrap Exam

Bootstrap CSS Ref

CSS Typography CSS Buttons CSS Forms CSS Helpers CSS Images CSS Tables CSS Dropdowns CSS Navs Glyphicons

Bootstrap JS Ref

JS Affix JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip

Bootstrap Pager

❮ Previous Next Chapter ❯

What is Pager?

Pager is also a form of pagination (as described in the previous chapter).

Pager provides previous and next buttons (links).

To create previous/next buttons, add the .pager class to an <ul> element:

Example

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

Result:

Try it Yourself »

Align Buttons

Use the .previous and .next classes to align each button to the sides of the page:

Example

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

Result:

Try it Yourself »

Complete Bootstrap Navigation Reference

For a complete reference of all navigation classes, go to our complete Bootstrap Navigation Reference.

❮ Previous Next Chapter ❯