Hello Dear Readers, Today In this Post, You will learn Bootstrap 5 Tutorial In Hindi #26 | Pagination & Breadcrumb. Earlier I have shared Bootstrap 5 Tutorial In Hindi #25 | Table Classes Tutorial. and now it’s time to Pagination & Breadcrumb.
In this tutorial, You will learn full Bootstrap 5. If you want to go deep into the tutorial so you can watch the full video which is below Hope it will help you all thank you for visiting.
In this tutorial, you will learn Bootstrap Tutorial In Hindi, Bootstrap 5 Pagination & Breadcrumb. Here You can learn what is a bootstrap framework,
what are the advantages of the bootstrap tutorial in Hindi. Make sure to Subscribe, Share the video, and Like it, for more tutorials in Hindi like this one!
Breadcrumb
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
Example
Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.
Dividers
Dividers are automatically added in CSS through ::before and content. They can be changed by modifying a local CSS custom property --bs-breadcrumb-divider, or through the $breadcrumb-divider Sass variable — and $breadcrumb-divider-flipped for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.
Accessibility
Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as aria-label="breadcrumb" to describe the type of navigation provided in the <nav> element, as well as applying an aria-current="page" to the last item of the set to indicate that it represents the current page.
Pagination
Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
Overview
We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.
In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive aria-label for the <nav> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".
Working with icons
Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes.
Disabled and active states
Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.
While the .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, that CSS property is not yet standardized and doesn’t account for keyboard navigation. As such, you should always add tabindex="-1" on disabled links and use custom JavaScript to fully disable their functionality.
You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.