Bootstrap Pagination In this tutorial you will learn how to create agination through its pages to organize content into separate process.
Paging often in almost every Web application or used in some other form, for example, it is limited for search engines display results on the search results page blog on the number, or a limited number of posts displayed on each page or forum


<ul class="pagination">

<li><a href="#">&laquo;</a></li>

<li><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="#">&raquo;</a></li>
</ul>

The output of the above example will look something like this:

Bootstrap Pagination

Pagination with Disabled and Active States

Links inside Bootstrap pagination can further be customized for different circumstances such as when user approaches to an end or start, or indicating current page number to the user. Use the class .disabled for making the links unclickable and .active to indicate the current page.

 <ul class="pagination">
<li class="disabled"><a href="#">&laquo;</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="#">&raquo;</a></li> </ul> 

— The output of the above example will look something like this:

</pre>
<ul class="syntax-highlighter lead-zero">
<li>
<pre><span class="cm-tag"><ul</span> <span class="cm-attribute">class</span>=<span class="cm-string">"pagination"</span><span class="cm-tag">></span></pre>
</li>
<li class="alt">
<pre>    <span class="cm-tag"><li</span> <span class="cm-attribute">class</span>=<span class="cm-string">"disabled"</span><span class="cm-tag">><span></span><span class="cm-atom">&laquo;</span><span class="cm-tag"></span></li>

</span></pre>
</li>
<li>
<pre>    <span class="cm-tag"><li</span> <span class="cm-attribute">class</span>=<span class="cm-string">"active"</span><span class="cm-tag">><span></span>1<span class="cm-tag"></span></li>
</span></pre>
</li>
<li class="alt">
<pre>    <span class="cm-tag">
<li><a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"#"</span><span class="cm-tag">></span>2<span class="cm-tag"></a></li>
</span></pre>
</li>
<li>
<pre>    <span class="cm-tag">
<li><a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"#"</span><span class="cm-tag">></span>3<span class="cm-tag"></a></li>

</span></pre>
</li>
<li class="alt">
<pre>    <span class="cm-tag">
<li><a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"#"</span><span class="cm-tag">></span>4<span class="cm-tag"></a></li>

</span></pre>
</li>
<li>
<pre>    <span class="cm-tag">

<li><a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"#"</span><span class="cm-tag">></span>5<span class="cm-tag"></a></li>

</span></pre>
</li>
<li class="alt">
<pre>    <span class="cm-tag">
<li><a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"#"</span><span class="cm-tag">></span><span class="cm-atom">&raquo;</span><span class="cm-tag"></a></li>

</span></pre>
</li>
</ul>
<ul class="syntax-highlighter lead-zero">
<li>
<pre><span class="cm-tag"></ul>
</span></pre>
</li>
</ul>
<pre>

Changing the Sizes of Pagination

You can also change the sizes of pagination to increase or decrease the clickable area.

Add the relative sizing classes like .pagination-lg, or .pagination-sm to the .paginationbase class for creating larger or smaller pagination.

<!-- Larger pagination -->

<ul class="pagination pagination-lg">
<li><a href="#">&laquo;</a></li>
<li><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="#">&raquo;</a></li>

</ul>

<!-- Default pagination -->
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><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="#">&raquo;</a></li>
</ul>
<!-- Smaller pagination -->
<ul class="pagination pagination-sm">
<li><a href="#">&laquo;</a></li>
<li><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="#">&raquo;</a></li>
</ul>

The output of the above example will look something like this:

Bootstrap Larger and Smaller Pagination

Bootstrap Pager

Sometimes you may simply require previous and next links on your website to provide simple and quick navigation to the user instead of the complex pagination as we discussed above.

This can be done using the Bootstrap class .pager.

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

— The output of the above example will look something like this:

Bootstrap Pager

Alignment of Pager

By default pager are aligned horizontally center but you align previous link to left and next link right using the class .previous and .next respectively


<ul class="pager">


<li class="previous"><a href="#">&larr; Previous</a></li>




<li class="next"><a href="#">Next &rarr;</a></li>


</ul>


The output of the above example will look something like this:

Bootstrap Pager Left-Right Aligned

<ul class="pager">

<li class="previous disabled"><a href="#">&larr; Previous</a></li>


<li class="next"><a href="#">Next &rarr;</a></li>

</ul>

Bootstrap Pager with Disabled State