Bootstrap Breadcrumb and Pagination
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>
Still have some questions? Let's discuss.
CONTACT US