Bootstrap Breadcrumb and Pagination

Level : Advanced
Mentor: Shailendra Chauhan
Duration : 00:03:00

Basic Pagination:

Basic pagination is a simple navigation component used to break down a large set of data into multiple pages, making it easier for users to navigate through content.

Example:

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul> 

Active State:

Active state in pagination highlights the current page, indicating which page the user is currently viewing.

Example:

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

Disabled State:

Disabled state in pagination prevents users from interacting with certain page navigation buttons, typically used when there's no content on those pages.

Example:

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item disabled"><a class="page-link" href="#">Next</a></li>
</ul>

Pagination Sizing:

Pagination sizing allows you to control the visual size of pagination elements, making them smaller or larger to fit your design.

Example:

<ul class="pagination pagination-lg">
  <!-- Large-sized pagination -->
</ul>
<ul class="pagination pagination-sm">
  <!-- Small-sized pagination -->
</ul>

Pagination Alignment:

Pagination alignment lets you position pagination elements to the left, center, or right of the content area.

Example:

<ul class="pagination justify-content-start">
  <!-- Left-aligned pagination -->
</ul>
<ul class="pagination justify-content-center">
  <!-- Center-aligned pagination -->
</ul>
<ul class="pagination justify-content-end">
  <!-- Right-aligned pagination -->
</ul>

Breadcrumbs:

Breadcrumbs are a navigation aid that displays the user's current location within a website or application, typically in a hierarchical manner.

Example:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Category</a></li>
    <li class="breadcrumb-item active" aria-current="page">Product</li>
  </ol>
</nav>

Self-paced Membership
  • 22+ Video Courses
  • 800+ Hands-On Labs
  • 400+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A Courses
  • 10+ Real-world Projects
  • Career Coaching Sessions
  • Email Support
Upto 60% OFF
Know More
Still have some questions? Let's discuss.
CONTACT US
Accept cookies & close this