Pagination in Bootstrap

How to use pagination in the bootstrap?

Pagination:

Pagination is defined as the sequence of the numbers assigned to the pages in a website.

Basic pagination

<h5><b>Pagination</b></h5>
    <i>Pagination is used to turn over the page in the website</i>
    <ul class="pagination">
        <li><a href="http://www.dotnetfunda.com">1</a></li>
        <li><a href="http://www.Techfunda.com">2</a></li>
        <li><a href="http://www.dotnetfunda.com">3</a></li>
        <li><a href="http://www.Techfunda.com">4</a></li>
        <li><a href="http://www.dotnetfunda.com">5</a></li>
        <li><a href="http://www.Techfunda.com">6</a></li>
        <li><a href="http://www.dotnetfunda.com">7</a></li>
        <li><a href="http://www.Techfunda.com">8</a></li>
        <li><a href="http://www.dotnetfunda.com">9</a></li>
        <li><a href="http://www.dotnetfunda.com">10</a></li>
    </ul>

In the above code snippet we have defined the pagination. We have taken list as ul. We have declared class as pagination and we have defined <li> as <a> link tags with the numbers as 1-10 in the ul class.

output

Pagination in active state:

Pagination in active state is defined as the page will be in active state

 <h5><b>Pagination in active state</b></h5>
    <i>Pagination active is used to set the page in active state</i>
    <ul class="pagination">
        <li><a href="http://www.dotnetfunda.com">1</a></li>
        <li class="active"><a href="http://www.Techfunda.com">2</a></li>
        <li><a href="http://www.dotnetfunda.com">3</a></li>
    </ul>

Pagination active

In the above code snippet we have declare the pagination with active state. We have taken class as pagination and we are having <a> tag in the class <li> . The class active defines the pagination in the active state.

output

Pagination in disabled state:

It is used to keep the pagination in the disabled state

 <h5><b>Pagination in disable state</b></h5>
    <i>Pagination disable is used to set the page in disable state</i>
    <ul class="pagination">
        <li><a href="http://www.dotnetfunda.com">1</a></li>
        <li class="disabled"><a href="http://www.Techfunda.com">2</a></li>
        <li><a href="http://www.dotnetfunda.com">3</a></li>
    </ul>

Pagination in disable state

In the above code snippet we have declare the pagination with disabled state. We have taken class as pagination and we are having <a> tag in the class <li> . The class disabled defines the pagination in the disabled state.

output

Pagination sizing:

Pagination sizing is used to display the size of the pagination

 
 <h5><b>Pagination large and small</b></h5>
    <ul class="pagination pagination-lg">
        <li><a href="http://www.dotnetfunda.com">1</a></li>
        <li><a href="http://www.Techfunda.com">2</a></li>
        <li><a href="http://www.dotnetfunda.com">3</a></li>
    </ul>
    <ul class="pagination pagination-sm">
        <li><a href="http://www.dotnetfunda.com">4</a></li>
        <li><a href="http://www.Techfunda.com">5</a></li>
        <li><a href="http://www.dotnetfunda.com">6</a></li>
    </ul>

Pagination-Sizing

In the above code snippet we have defined pagination sizing.We have taken class as pagination -lg and pagination-sm. we have defined class in ul and displayed values in the <li>

<pagination-lg>-renders the size of the page as large

<pagination- sm>-renders the size of the page as small.

output

Breadcrumbs:

Breadcrums are known as Pagination. We call breadcums as pagination. The breadcrumbs show the current location with the navigational property.

<h5><b>Breadcrumbs are also known as pagination</b></h5>
    <ul class="breadcrumb">
        <li><a href="http://www.dotnetfunda.com">Techfunda</a></li>
        <li><a href="http://www.Techfunda.com">DotNetFunda</a></li>
        <li><a href="http://www.dotnetfunda.com">ITFunda</a></li>
    </ul>

Breadcrumbs

In the above code snippet we have define the Breadcrumbs. We have taken class as breadcrumbs in the lists and values as techfunda, dotnetfunda, itfunda as links of their websites as dotnetfunda, techfunda, itfunda in the output

output

Basic pagination:

Here is an example of an simple pagination.

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

Basic pagination

In the above code snippet we have defined the basic pagination. WE have taken class as pagination and we are having valuesin lists as

<&laquo>-renders as left arrow

<&raquo> -renders as right arrow

output

Pagers

Pagers are used to create the previous and next buttons when there are different pages in the website.

<h2>Bootstrap pager</h2>
    <ul class="pager">
        <li class="previous"><a href="#">Back</a></li>
        <li class="next"><a href="#">Next</a></li>
    </ul>

Pagers

In the above code snippet we have defined the pagers we have taken class as pager and we are having <li> values as previous and next which shows the previous and Next buttons

output