Bootstrap 3 Tutorial

Bootstrap 3 Pager

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="c15faadc-ab06-4d4f-abc6-c1fcfadb707a" 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: Pager</h3>
<p><strong>Pager</strong> in Bootstrap 3 is a simple component that allows you to navigate through a series of items or pages. It's ideal for situations where you have multiple pages of content but don't want to show a full pagination control, such as when displaying blog posts or articles.</p>
<hr />
<h3>Basic Usage of Pager</h3>
<p>The <code>.pager</code> class in Bootstrap 3 provides a straightforward way to create a navigation system with "previous" and "next" links. This is especially useful for paginating through content like articles, search results, or any other list of items.</p>
<h4>Example of Basic Pager</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 Pager 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 Pager&lt;/h2&gt;

&lt;div class="pager"&gt;
        &lt;ul class="pagination"&gt;
            &lt;li class="previous"&gt;&lt;a href="#"&gt;&amp;larr; Older&lt;/a&gt;&lt;/li&gt;
            &lt;li class="next"&gt;&lt;a href="#"&gt;Newer &amp;rarr;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;

&lt;h4&gt;Example Content&lt;/h4&gt;
    &lt;p&gt;This is a simple example of using the pager component. Use the navigation links above to navigate through the content.&lt;/p&gt;

&lt;div class="pager"&gt;
        &lt;ul class="pagination"&gt;
            &lt;li class="previous disabled"&gt;&lt;a href="#"&gt;&amp;larr; Older&lt;/a&gt;&lt;/li&gt;
            &lt;li class="next"&gt;&lt;a href="#"&gt;Newer &amp;rarr;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&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 Pager</h3>
<ol>
<li><strong>Simple Navigation</strong>: The pager provides a minimalistic approach to navigation with only "previous" and "next" links.</li>
<li><strong>Active and Disabled States</strong>:
<ul>
<li>Use the <code>.disabled</code> class to indicate a non-clickable link (e.g., when on the first page).</li>
</ul>
</li>
<li><strong>Customizable</strong>: You can easily customize the links with your desired text or icons.</li>
</ol>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Conclusion</h3>
<p>The Bootstrap 3 pager component provides an elegant and efficient way to navigate between pages of content. By focusing on previous and next links, it streamlines the user experience, making it perfect for blogs, articles, and other content-heavy websites.</p>

Web Technology View More