Bootstrap 3 Tutorial

Bootstrap 3 Pagination

Last modified on: October 28, 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="adf80822-bbe1-4fad-9a9d-4d9f7d6c4ca9" 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 3: Pagination</h3>
<p><strong>Pagination</strong> in Bootstrap 3 is a component that allows you to break up large amounts of content into smaller, manageable pages. This is particularly useful for navigation through long lists, such as search results or articles, providing an intuitive way for users to browse content.</p>
<hr />
<h3>Basic Usage of Pagination</h3>
<p>Bootstrap 3 provides a simple and effective way to create pagination using the <code>.pagination</code> class. You can enhance the pagination links with additional classes for different styles and functionality.</p>
<h4>Example of Basic Pagination</h4>
<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"&gt;
    &lt;title&gt;Bootstrap 3 Pagination Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container"&gt;
    &lt;h2&gt;Bootstrap 3 Pagination&lt;/h2&gt;

&lt;h4&gt;Basic Pagination&lt;/h4&gt;
    &lt;ul class="pagination"&gt;
        &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

&lt;h4&gt;Pagination with Icons&lt;/h4&gt;
    &lt;ul class="pagination"&gt;
        &lt;li&gt;&lt;a href="#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&amp;raquo;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

&lt;h4&gt;Disabled and Active States&lt;/h4&gt;
    &lt;ul class="pagination"&gt;
        &lt;li class="disabled"&gt;&lt;a href="#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&amp;raquo;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

&lt;h4&gt;Pagination with Alignment&lt;/h4&gt;
    &lt;nav&gt;
        &lt;ul class="pagination pagination-lg"&gt;
            &lt;li&gt;&lt;a href="#" aria-label="Previous"&gt;&lt;span aria-hidden="true"&gt;&amp;laquo;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a 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;/div&gt;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Key Features of Bootstrap 3 Pagination</h3>
<ol>
<li><strong>Basic Pagination</strong>: Use the <code>.pagination</code> class to create a simple navigation list of links.</li>
<li><strong>Active and Disabled States</strong>:
<ul>
<li>Use the <code>.active</code> class to highlight the current page.</li>
<li>Use the <code>.disabled</code> class to indicate non-clickable items.</li>
</ul>
</li>
<li><strong>Icons</strong>: Use <code>&amp;laquo;</code> and <code>&amp;raquo;</code> for previous and next icons respectively.</li>
<li><strong>Alignment</strong>: You can use classes like <code>.pagination-lg</code> or <code>.pagination-sm</code> to create large or small pagination links.</li>
</ol>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Conclusion</h3>
<p>Bootstrap 3 pagination provides a clean and responsive way to navigate through large amounts of content. With various styles and options for active, disabled, and aligned states, you can create user-friendly pagination that enhances the overall experience of your web application.</p>

Web Technology View More