Breadcrump and Pagination Bootstrap

Bootstrap Breadcrump

Breadcrumbs are a easy way to show hierarchy-based information for a site. In this blogs , case of breadcrumbs can show the dates of publishing, categories, or tags. These gesture the current page’s location within a navigational hierarchy.

A breadcrumb is simply an unordered list with a class of .breadcrumb in Bootstrap. The separatory is automatically added by CSS (bootstrap.min.css) through the following class −:

Syntax-:

 .breadcrumb > li + li:before {

   color: #CCCCCC;

   content: “/ “;

   padding: 0 5px;

}

 Creating Breadcrumbs with Bootstrap

A breadcrumb provides a navigation scheme that indicates current page’s location to the user within a website or application. Breadcrumb navigation can greatly enhance the accessibility of a website having a large number of pages or complex navigational hierarchy.

You can construct a static breadcrumbs layouts with Bootstrap simply using the class .breadcrumb on the ordered lists, as demonstrated in the following example:

Code

     <div class=”bs-example”>

    <nav>

        <ol class=”breadcrumb”>

    <li class=”breadcrumb-item”><a href=”#”>Home</a></li>

 <li class=”breadcrumb-item”><a href=”#”>Overview</a></li>

    <li class=”breadcrumb-item active”>Contact Us</li>

        </ol>

    </nav>

</div>

Output-:

Bootstrap 4 Breadcrumb

The default breadcrumb separator is /. But, you can change it with a little custom CSS, for example, if you want to use > as separator, you can apply the following style rules:-

Syntax-:

.breadcrumb-item + .breadcrumb-item::before {

 content: “>”;

}

   }

 Bootstrap Pagination

Bootstrap supports. Pagination define as an unordered list is handled by Bootstrap like a lot of other interface elements.

Pagination-:

The following table lists that provides to handle pagination in the Bootstrap classe.

 Creating Pagination with Bootstrap

* Pagination is the process of organizing content by dividing it into separate page.

* Pagination is widely used in few 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.

Code

<div class=”bs-example”>

    <nav>

<ul class=”pagination”>

<li class=”page-item”><a href=”#” class=”page-link”>Prev</a></li>

<li class=”page-item”><a href=”#” class=”page-link”>1</a></li>

<li class=”page-item”><a href=”#” class=”page-link”>2</a></li>

<li class=”page-item”><a href=”#” class=”page-link”>3</a></li>

<li class=”page-item”><a href=”#” class=”page-link”>4</a></li>

<li class=”page-item”><a href=”#” class=”page-link”>5</a></li>

<li class=”page-item”><a href=”#” class=”page-link”>Next</a></li>

        </ul>

    </nav>

</div>

Output-:

 Pagination with Disabled and Active States

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

Code

     <div class=”bs-example”>

    <nav>

    <ul class=”pagination”>

 <li class=”page-item disabled”><a href=”#” class=”page-link” tabindex=”-1″>Prev</a></li>

 <li class=”page-item active”><a href=”#” class=”page-link”>1</a></li>

<li class=”page-item”><a href=”#” class=”page-link”>2</a></li>

<li class=”page-item”><a href=”#” class=”page-link”>3</a></li>

<li class=”page-item”><a href=”#” class=”page-link”>4</a></li>

<li class=”page-item”><a href=”#” class=”page-link”>5</a></li>

<li class=”page-item”><a href=”#” class=”page-link”>Next</a></li>

        </ul>

    </nav>

</div>

Output-:

 Changing the Sizes of Pagination

You can also change the sizes of pagination to increase or decrease the clickable area. Link the relative sizing classes like .pagination-lg, or .pagination-sm to the .pagination base class for creating larger or smaller pagination.

Example-:

 

Alignment of Pagination

By default pagination is aligned horizontally left. To align this you can use the center of the page add the class .justify-content-center to the like- .pagination base class, as shown below:

Example-

Bootstrap 4 Example

Basic Pagination

Leave a Reply

Your email address will not be published. Required fields are marked *