Table of Contents
1. Simple example
2. Use icons
3, disabled and active status
4. Size
#5. Alignment
Home Web Front-end Bootstrap Tutorial A brief discussion on how to use the Pagination component of Bootstrap5

A brief discussion on how to use the Pagination component of Bootstrap5

Oct 20, 2021 am 11:24 AM
Paginated navigation

This article will introduce to you the usage of the Pagination component in Bootstrap5. I hope it will be helpful to everyone!

A brief discussion on how to use the Pagination component of Bootstrap5

[Related recommendation: "bootstrap tutorial"]

1. Simple example

Page navigation is generally used for article list pages, download lists, picture lists, etc. Because there is a lot of data, it is impossible to display it on one page. Generally, page navigation includes previous page, next page, digital page number, etc. The following is a simple example:

      <nav aria-label="Page navigation">
        <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">上一页</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"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">下一页</a></li>
        </ul>
        </nav>
Copy after login

A brief discussion on how to use the Pagination component of Bootstrap5

2. Use icons

Use icons or symbols to replace certain paging links. Text.

<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
  <span aria-hidden="true">&laquo;</span>
</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"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
  <span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>
Copy after login

A brief discussion on how to use the Pagination component of Bootstrap5

3, disabled and active status

Paging links can be customized according to different situations. Use disabled for links that appear to be unclickable, and active for links that appear to be on the current page.

Although the .disabled class uses pointer-events: none to attempt to disable a's link functionality, the CSS properties have not been standardized and keyboard navigation is not considered. Therefore, you should always add tabindex="-1" on disabled links and use custom JavaScript to completely disable their functionality.

<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
Copy after login

A brief discussion on how to use the Pagination component of Bootstrap5

4. Size

Like larger or smaller pagination? Add pagination-lg or pagination-sm, or use another size.

      <nav aria-label="...">
        <ul class="pagination pagination-lg">
        <li class="page-item active" aria-current="page">
        <span class="page-link">1</span>
        </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>
       </nav>
       <nav aria-label="...">
        <ul class="pagination">
        <li class="page-item active" aria-current="page">
        <span class="page-link">1</span>
        </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>
      </nav>

        <nav aria-label="...">
            <ul class="pagination pagination-sm">
            <li class="page-item active" aria-current="page">
            <span class="page-link">1</span>
            </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>
        </nav>
Copy after login

A brief discussion on how to use the Pagination component of Bootstrap5

#5. Alignment

The default paging navigation is left aligned. Foreigners are more accustomed to left alignment. We Chinese like to be centered. You can use the flexible box general class Change the alignment of the pagination component. Just add justify-content-center to the ul class. Of course, you can also use justify-content-end to align to the right, although this is rare.

<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">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"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>

<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">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"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
Copy after login

A brief discussion on how to use the Pagination component of Bootstrap5

If this article is helpful to you, please remember to like it!

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of A brief discussion on how to use the Pagination component of Bootstrap5. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How do I stay up-to-date with the latest Bootstrap releases and updates? How do I stay up-to-date with the latest Bootstrap releases and updates? Mar 14, 2025 pm 07:40 PM

How do I stay up-to-date with the latest Bootstrap releases and updates?

How do I override Bootstrap's styles without modifying the core framework files? How do I override Bootstrap's styles without modifying the core framework files? Mar 14, 2025 pm 07:44 PM

How do I override Bootstrap's styles without modifying the core framework files?

What are the key components of the Bootstrap framework (grid system, typography, components, utilities)? What are the key components of the Bootstrap framework (grid system, typography, components, utilities)? Mar 14, 2025 pm 07:42 PM

What are the key components of the Bootstrap framework (grid system, typography, components, utilities)?

Where can I find Bootstrap templates and themes? Where can I find Bootstrap templates and themes? Mar 14, 2025 pm 07:39 PM

Where can I find Bootstrap templates and themes?

How do I customize the appearance and behavior of Bootstrap's components? How do I customize the appearance and behavior of Bootstrap's components? Mar 18, 2025 pm 01:06 PM

How do I customize the appearance and behavior of Bootstrap's components?

How do I make Bootstrap websites accessible (A11y)? How do I make Bootstrap websites accessible (A11y)? Mar 14, 2025 pm 07:36 PM

How do I make Bootstrap websites accessible (A11y)?

How do I use Bootstrap's grid system to create responsive layouts for different screen sizes? How do I use Bootstrap's grid system to create responsive layouts for different screen sizes? Mar 14, 2025 pm 07:43 PM

How do I use Bootstrap's grid system to create responsive layouts for different screen sizes?

Can I use inline-block in the Bootstrap picture centered? Can I use inline-block in the Bootstrap picture centered? Mar 04, 2025 pm 03:06 PM

Can I use inline-block in the Bootstrap picture centered?

See all articles