From: Mark Otto <markdotto@gmail.com>
Date: Tue, 10 Mar 2026 21:25:02 +0000 (-0700)
Subject: Update pagination size docs after merging #42317
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=fc63954473a12dd3acd2cec4b87ed6d2862e1f30;p=thirdparty%2Fbootstrap.git

Update pagination size docs after merging #42317
---

diff --git a/site/src/content/docs/components/pagination.mdx b/site/src/content/docs/components/pagination.mdx
index d735c5841a..1dc969e876 100644
--- a/site/src/content/docs/components/pagination.mdx
+++ b/site/src/content/docs/components/pagination.mdx
@@ -98,7 +98,7 @@ And just like active page items, you can swap out the disabled `<a>` for a `<spa
 
 Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes.
 
-<Example code={`<nav aria-label="...">
+<Example class="vstack gap-3" code={`<nav aria-label="...">
     <ul class="pagination pagination-lg">
       <li class="page-item active" >
         <a class="page-link" aria-current="page">1</a>
@@ -106,9 +106,19 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
       <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>
 
-<Example code={`<nav aria-label="...">
+  <nav aria-label="...">
+    <ul class="pagination">
+      <li class="page-item active">
+        <a class="page-link" aria-current="page">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>
+    </ul>
+  </nav>
+
+  <nav aria-label="...">
     <ul class="pagination pagination-sm">
       <li class="page-item active">
         <a class="page-link" aria-current="page">1</a>
@@ -116,7 +126,16 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
       <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>`} customMarkup={`<nav aria-label="…">
+    <ul class="pagination pagination-sm">…</ul>
+  </nav>
+  <nav aria-label="…">
+    <ul class="pagination pagination">…</ul>
+  </nav>
+  <nav aria-label="…">
+    <ul class="pagination pagination-lg">…</ul>
+  </nav>
+  `} />
 
 ## Alignment