Bootstrap 5 Tutorial

Bootstrap 5 Pagination

Last modified on: October 27, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="176f4ba9-b479-4cf7-ab0e-34d2e359296a" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Bootstrap 5: Pagination</h3>
<p>Pagination in Bootstrap 5 is a component that helps you break up a long list of items into smaller, more manageable chunks. It is commonly used in scenarios such as navigating through pages of articles, products, or any other content that can be divided into distinct sections.</p>
<hr />
<h3>Key Features of Bootstrap 5 Pagination</h3>
<ol>
<li><strong>Simple Structure</strong>: Pagination is easy to implement using Bootstrap's predefined classes.</li>
<li><strong>Alignment Options</strong>: You can align pagination to the left, right, or center.</li>
<li><strong>Active States</strong>: Bootstrap allows you to highlight the active page.</li>
<li><strong>Disabled States</strong>: You can disable specific pagination links to prevent user interaction.</li>
</ol>
<hr />
<h3>Example: Creating Pagination in Bootstrap 5</h3>
<p>Here&rsquo;s an example demonstrating how to create and use pagination in Bootstrap 5:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Bootstrap 5 Pagination Example&lt;/title&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container mt-5"&gt;
        &lt;h1&gt;Bootstrap 5 Pagination&lt;/h1&gt;

&lt;!-- Basic Pagination --&gt;
        &lt;nav aria-label="Page navigation"&gt;
            &lt;ul class="pagination"&gt;
                &lt;li class="page-item"&gt;
                    &lt;a class="page-link" href="#" aria-label="Previous"&gt;
                        &lt;span aria-hidden="true"&gt;&amp;laquo;&lt;/span&gt;
                    &lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                &lt;li class="page-item active" aria-current="page"&gt;
                    &lt;span class="page-link"&gt;4&lt;/span&gt;
                &lt;/li&gt;
                &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
                &lt;li class="page-item"&gt;
                    &lt;a class="page-link" href="#" aria-label="Next"&gt;
                        &lt;span aria-hidden="true"&gt;&amp;raquo;&lt;/span&gt;
                    &lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;

&lt;hr&gt;

&lt;!-- Pagination with Disabled State --&gt;
        &lt;nav aria-label="Page navigation"&gt;
            &lt;ul class="pagination"&gt;
                &lt;li class="page-item disabled" aria-disabled="true"&gt;
                    &lt;a class="page-link" href="#" tabindex="-1" aria-disabled="true"&gt;Previous&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                &lt;li class="page-item active" aria-current="page"&gt;
                    &lt;span class="page-link"&gt;3&lt;/span&gt;
                &lt;/li&gt;
                &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
                &lt;li class="page-item"&gt;
                    &lt;a class="page-link" href="#"&gt;Next&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;

&lt;hr&gt;

&lt;!-- Pagination Alignment --&gt;
        &lt;h2&gt;Pagination Alignment&lt;/h2&gt;
        &lt;nav aria-label="Page navigation"&gt;
            &lt;ul class="pagination justify-content-center"&gt;
                &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;
    &lt;/div&gt;

&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Explanation of the Code</h3>
<ul>
<li><strong>Pagination Structure</strong>: The pagination is created using an unordered list (<code>&lt;ul&gt;</code>) with the class <code>.pagination</code>.</li>
<li><strong>Page Links</strong>: Each page link is represented by a list item (<code>&lt;li&gt;</code>) with the class <code>.page-item</code> and anchor tags (<code>&lt;a&gt;</code>) with the class <code>.page-link</code>.</li>
<li><strong>Active Page</strong>: The active page is highlighted using the <code>.active</code> class, and you can set the <code>aria-current="page"</code> attribute for accessibility.</li>
<li><strong>Disabled State</strong>: To disable a pagination item, use the <code>.disabled</code> class on the <code>&lt;li&gt;</code> element and include <code>aria-disabled="true"</code>.</li>
<li><strong>Alignment</strong>: Use <code>.justify-content-center</code> for centering the pagination links.</li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More