Bootstrap Breadcrumbs and Pagination

Creating Breadcrumbs with Bootstrap
A breadcrumb is a navigation scheme that indicates the user’s location in a website or web application. Breadcrumb navigation can greatly enhance the accessibility of websites having large number of pages.
This is a simple example of creating breadcrumbs with Bootstrap.

<ul class="breadcrumb">

<li><a href="#">Home</a></li>

<li><a href="#">Products</a></li>

<li class="active">Accessories</li>

 </ul>

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

Creating Pagination with Bootstrap
Pagination is the process of organizing content by dividing it into separate pages.
Pagination is used in some or other form quite often in almost every web application, for instance it is used by search engines for displaying a limited number of results on search results pages, or showing a limited number of posts for every page on a blog 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="#">6</a></li>

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

             </ul>

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

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 .pagination base class for creating larger or smaller pagination.
Example

<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

Twitter 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.
Example

 <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:

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.
Example

<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:

You can also apply the same pagination classes .disabled and .active to the pager.
Example

<ul class="pager">
        <li class="previous disabled"><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:

free gay porn

Admin has written 171 articles