The pagination component helps to build and customize controls for navigating content across multiple pages.
| Class Name | Type | Description |
|---|---|---|
| pagination | Component | Base container |
| page-item | Inner | Item wrapper |
| page-link | Inner | Link button |
| pagination-{color} | Style | Filled style |
| pagination-subtle-{color} | Style | Subtle style |
| pagination-outlined-{color} | Style | Outlined style |
| pagination-info | Style | Info text |
| pagination-count | Style | Page count |
| pagination-link | Style | External link |
| pagination-sm | Size | Small size |
| pagination-lg | Size | Large size |
| pagination-circle | Modifier | Circular shape |
The Basic Pagination component showcases the default layout with numbered links and navigation controls. The active page is styled using the .active class for a clear indication.
HTML
<nav aria-label="basic pagination example">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">4</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>The Filled Pagination variant applies solid background styles to page links. Customize its look by adding a color modifier such as .pagination-{color} to match your design theme.
HTML
<!-- pagination primary color -->
<nav aria-label="pagination primary example">
<ul class="pagination pagination-primary">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
<!-- pagination secondary color -->
<nav aria-label="pagination secondary example">
<ul class="pagination pagination-secondary">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
<!-- pagination danger color -->
<nav aria-label="pagination danger example">
<ul class="pagination pagination-danger">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
<!-- pagination warning color -->
<nav aria-label="pagination warning example">
<ul class="pagination pagination-warning">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
<!-- pagination success color -->
<nav aria-label="pagination success example">
<ul class="pagination pagination-success">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
<!-- pagination info color -->
<nav aria-label="pagination info example">
<ul class="pagination pagination-info">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
<!-- pagination neutral color -->
<nav aria-label="pagination neutral example">
<ul class="pagination pagination-neutral">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>The Subtle Pagination variant offers a softer, more minimal appearance with light background tones. Use the .pagination-subtle-{color} class to apply this variant.
HTML
<!-- pagination subtle primary color -->
<nav aria-label="pagination subtle primary example">
<ul class="pagination pagination-subtle-primary">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
<!-- pagination subtle secondary color -->
<nav aria-label="pagination subtle secondary example">
<ul class="pagination pagination-subtle-secondary">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
<!-- pagination subtle danger color -->
<nav aria-label="pagination subtle danger example">
<ul class="pagination pagination-subtle-danger">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
<!-- pagination subtle warning color -->
<nav aria-label="pagination warning example">
<ul class="pagination pagination-subtle-warning">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
<!-- pagination subtle success color -->
<nav aria-label="pagination subtle success example">
<ul class="pagination pagination-subtle-success">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
<!-- pagination subtle info color -->
<nav aria-label="pagination subtle info example">
<ul class="pagination pagination-subtle-info">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
<!-- pagination subtle neutral color -->
<nav aria-label="pagination subtle neutral example">
<ul class="pagination pagination-subtle-neutral">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>The Outlined Pagination variant uses bordered page links with transparent backgrounds. Apply the .pagination-outlined-{color} class to enable this style and customize it with your preferred color theme.
HTML
<!-- pagination outlined primary color -->
<nav aria-label="pagination outlined primary example">
<ul class="pagination pagination-outlined-primary">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
<!-- pagination outlined secondary color -->
<nav aria-label="pagination outlined secondary example">
<ul class="pagination pagination-outlined-secondary">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
<!-- pagination outlined danger color -->
<nav aria-label="pagination outlined danger example">
<ul class="pagination pagination-outlined-danger">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
<!-- pagination outlined warning color -->
<nav aria-label="pagination warning example">
<ul class="pagination pagination-outlined-warning">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
<!-- pagination outlined success color -->
<nav aria-label="pagination outlined success example">
<ul class="pagination pagination-outlined-success">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
<!-- pagination outlined info color -->
<nav aria-label="pagination outlined info example">
<ul class="pagination pagination-outlined-info">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
<!-- pagination outlined neutral color -->
<nav aria-label="pagination outlined neutral example">
<ul class="pagination pagination-outlined-neutral">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>The Circle Pagination variant displays pagination buttons in a circular shape. Add the .pagination-circle class to enable this style on your pagination component.
HTML
<nav aria-label="circle pagination example">
<ul class="pagination pagination-circle">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>The Pagination Size Variants allow you to adjust the size of the pagination buttons. Use .pagination-sm for small buttons or .pagination-lg for large buttons. The medium size is the default and requires no additional class.
HTML
<!-- pagination small -->
<nav aria-label="pagination small example">
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
<!-- pagination medium (default) -->
<nav aria-label="pagination medium example">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
<!-- pagination large -->
<nav aria-label="pagination large example">
<ul class="pagination pagination-lg">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>The Pagination Edge Navigator style variant is typically used for quick navigation across large paginated content. Clicking the first (<<)or last (>>) buttons moves the active page directly to the first or last page.
HTML
<nav aria-label="pagination button example">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.2708 10.2367L6.14583 6.13258C6.07639 6.06313 6.02778 5.99369 6 5.92424C5.97222 5.8548 5.95833 5.77841 5.95833 5.69508C5.95833 5.61174 5.97222 5.53188 6 5.45549C6.02778 5.37911 6.07639 5.30619 6.14583 5.23674L10.2708 1.11174C10.3958 0.986744 10.5417 0.927716 10.7083 0.934661C10.875 0.941605 11.0208 1.00758 11.1458 1.13258C11.2708 1.25758 11.3333 1.40341 11.3333 1.57008C11.3333 1.73674 11.2708 1.88258 11.1458 2.00758L7.45833 5.69508L11.1458 9.38258C11.2708 9.50758 11.3333 9.64994 11.3333 9.80966C11.3333 9.96938 11.2708 10.1117 11.1458 10.2367C11.0208 10.3617 10.875 10.4242 10.7083 10.4242C10.5417 10.4242 10.3958 10.3617 10.2708 10.2367ZM5 10.2367L0.875 6.13258C0.805555 6.06313 0.756945 5.99369 0.729167 5.92424C0.701389 5.8548 0.6875 5.77841 0.6875 5.69508C0.6875 5.61174 0.701389 5.53188 0.729167 5.45549C0.756945 5.37911 0.805555 5.30619 0.875 5.23674L5 1.11174C5.125 0.986744 5.27083 0.927716 5.4375 0.934661C5.60417 0.941605 5.75 1.00758 5.875 1.13258C6 1.25758 6.0625 1.40341 6.0625 1.57008C6.0625 1.73674 6 1.88258 5.875 2.00758L2.1875 5.69508L5.875 9.38258C6 9.50758 6.0625 9.64994 6.0625 9.80966C6.0625 9.96938 6 10.1117 5.875 10.2367C5.75 10.3617 5.60417 10.4242 5.4375 10.4242C5.27083 10.4242 5.125 10.3617 5 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.874978 10.2367C0.749978 10.1117 0.687478 9.9659 0.687478 9.79923C0.687478 9.63257 0.749978 9.48673 0.874978 9.36173L4.56248 5.67423L0.854145 1.98673C0.729145 1.86173 0.670117 1.71937 0.677062 1.55965C0.684006 1.39993 0.749978 1.25757 0.874978 1.13257C0.999978 1.00757 1.14581 0.945068 1.31248 0.945068C1.47915 0.945068 1.62498 1.00757 1.74998 1.13257L5.85415 5.23673C5.92359 5.30618 5.9722 5.37562 5.99998 5.44507C6.02776 5.51451 6.04165 5.5909 6.04165 5.67423C6.04165 5.75757 6.02776 5.83743 5.99998 5.91382C5.9722 5.99021 5.92359 6.06312 5.85415 6.13257L1.72915 10.2576C1.60415 10.3826 1.46178 10.4416 1.30206 10.4347C1.14234 10.4277 0.999978 10.3617 0.874978 10.2367ZM6.14581 10.2367C6.02081 10.1117 5.95831 9.9659 5.95831 9.79923C5.95831 9.63257 6.02081 9.48673 6.14581 9.36173L9.83331 5.67423L6.12498 1.98673C5.99998 1.86173 5.94095 1.71937 5.9479 1.55965C5.95484 1.39993 6.02081 1.25757 6.14581 1.13257C6.27081 1.00757 6.41665 0.945068 6.58331 0.945068C6.74998 0.945068 6.89581 1.00757 7.02081 1.13257L11.125 5.23673C11.1944 5.30618 11.243 5.37562 11.2708 5.44507C11.2986 5.51451 11.3125 5.5909 11.3125 5.67423C11.3125 5.75757 11.2986 5.83743 11.2708 5.91382C11.243 5.99021 11.1944 6.06312 11.125 6.13257L6.99998 10.2576C6.87498 10.3826 6.73262 10.4416 6.5729 10.4347C6.41317 10.4277 6.27081 10.3617 6.14581 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>The Next/Prev Button Pagination variant provides only Previous and Next controls. It’s ideal for simple pagination setups where full page numbering isn’t required.
HTML
<nav aria-label="pagination mini example">
<ul class="pagination">
<li class="page-item">
<a class="btn btn-subtle-primary" href="#" aria-label="Prev">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
Previous
</a>
</li>
<li class="page-item">
<a class="btn btn-subtle-primary" href="#" aria-label="Next">
Next
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>The Table Pagination variant is designed for data tables, enabling users to navigate between pages of table rows. It pairs seamlessly with table components for managing large datasets efficiently.
HTML
<!-- table pagination -->
<div class="w-full flex items-center justify-between px-6 py-2 bg-[var(--background-color-subtle)] rounded-lg">
<div class="pagination-info">
Showing <span class="pagination-count">5 out of 12</span> items
<a href="#" class="pagination-link">Show all</a>
</div>
<nav aria-label="pagination example">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.2708 10.2367L6.14583 6.13258C6.07639 6.06313 6.02778 5.99369 6 5.92424C5.97222 5.8548 5.95833 5.77841 5.95833 5.69508C5.95833 5.61174 5.97222 5.53188 6 5.45549C6.02778 5.37911 6.07639 5.30619 6.14583 5.23674L10.2708 1.11174C10.3958 0.986744 10.5417 0.927716 10.7083 0.934661C10.875 0.941605 11.0208 1.00758 11.1458 1.13258C11.2708 1.25758 11.3333 1.40341 11.3333 1.57008C11.3333 1.73674 11.2708 1.88258 11.1458 2.00758L7.45833 5.69508L11.1458 9.38258C11.2708 9.50758 11.3333 9.64994 11.3333 9.80966C11.3333 9.96938 11.2708 10.1117 11.1458 10.2367C11.0208 10.3617 10.875 10.4242 10.7083 10.4242C10.5417 10.4242 10.3958 10.3617 10.2708 10.2367ZM5 10.2367L0.875 6.13258C0.805555 6.06313 0.756945 5.99369 0.729167 5.92424C0.701389 5.8548 0.6875 5.77841 0.6875 5.69508C0.6875 5.61174 0.701389 5.53188 0.729167 5.45549C0.756945 5.37911 0.805555 5.30619 0.875 5.23674L5 1.11174C5.125 0.986744 5.27083 0.927716 5.4375 0.934661C5.60417 0.941605 5.75 1.00758 5.875 1.13258C6 1.25758 6.0625 1.40341 6.0625 1.57008C6.0625 1.73674 6 1.88258 5.875 2.00758L2.1875 5.69508L5.875 9.38258C6 9.50758 6.0625 9.64994 6.0625 9.80966C6.0625 9.96938 6 10.1117 5.875 10.2367C5.75 10.3617 5.60417 10.4242 5.4375 10.4242C5.27083 10.4242 5.125 10.3617 5 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item active"><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="#">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.19226 2.94507C1.84851 2.94507 1.55427 2.82264 1.30955 2.57778C1.06469 2.33305 0.942261 2.03882 0.942261 1.69507C0.942261 1.35132 1.06469 1.05708 1.30955 0.81236C1.55427 0.567499 1.84851 0.445068 2.19226 0.445068C2.53601 0.445068 2.83032 0.567499 3.07518 0.81236C3.3199 1.05708 3.44226 1.35132 3.44226 1.69507C3.44226 2.03882 3.3199 2.33305 3.07518 2.57778C2.83032 2.82264 2.53601 2.94507 2.19226 2.94507ZM6.99997 2.94507C6.65622 2.94507 6.36198 2.82264 6.11726 2.57778C5.8724 2.33305 5.74997 2.03882 5.74997 1.69507C5.74997 1.35132 5.8724 1.05708 6.11726 0.81236C6.36198 0.567499 6.65622 0.445068 6.99997 0.445068C7.34372 0.445068 7.63796 0.567499 7.88268 0.81236C8.12754 1.05708 8.24997 1.35132 8.24997 1.69507C8.24997 2.03882 8.12754 2.33305 7.88268 2.57778C7.63796 2.82264 7.34372 2.94507 6.99997 2.94507ZM11.8077 2.94507C11.4639 2.94507 11.1696 2.82264 10.9248 2.57778C10.68 2.33305 10.5577 2.03882 10.5577 1.69507C10.5577 1.35132 10.68 1.05708 10.9248 0.81236C11.1696 0.567499 11.4639 0.445068 11.8077 0.445068C12.1514 0.445068 12.4457 0.567499 12.6904 0.81236C12.9352 1.05708 13.0577 1.35132 13.0577 1.69507C13.0577 2.03882 12.9352 2.33305 12.6904 2.57778C12.4457 2.82264 12.1514 2.94507 11.8077 2.94507Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.874978 10.2367C0.749978 10.1117 0.687478 9.9659 0.687478 9.79923C0.687478 9.63257 0.749978 9.48673 0.874978 9.36173L4.56248 5.67423L0.854145 1.98673C0.729145 1.86173 0.670117 1.71937 0.677062 1.55965C0.684006 1.39993 0.749978 1.25757 0.874978 1.13257C0.999978 1.00757 1.14581 0.945068 1.31248 0.945068C1.47915 0.945068 1.62498 1.00757 1.74998 1.13257L5.85415 5.23673C5.92359 5.30618 5.9722 5.37562 5.99998 5.44507C6.02776 5.51451 6.04165 5.5909 6.04165 5.67423C6.04165 5.75757 6.02776 5.83743 5.99998 5.91382C5.9722 5.99021 5.92359 6.06312 5.85415 6.13257L1.72915 10.2576C1.60415 10.3826 1.46178 10.4416 1.30206 10.4347C1.14234 10.4277 0.999978 10.3617 0.874978 10.2367ZM6.14581 10.2367C6.02081 10.1117 5.95831 9.9659 5.95831 9.79923C5.95831 9.63257 6.02081 9.48673 6.14581 9.36173L9.83331 5.67423L6.12498 1.98673C5.99998 1.86173 5.94095 1.71937 5.9479 1.55965C5.95484 1.39993 6.02081 1.25757 6.14581 1.13257C6.27081 1.00757 6.41665 0.945068 6.58331 0.945068C6.74998 0.945068 6.89581 1.00757 7.02081 1.13257L11.125 5.23673C11.1944 5.30618 11.243 5.37562 11.2708 5.44507C11.2986 5.51451 11.3125 5.5909 11.3125 5.67423C11.3125 5.75757 11.2986 5.83743 11.2708 5.91382C11.243 5.99021 11.1944 6.06312 11.125 6.13257L6.99998 10.2576C6.87498 10.3826 6.73262 10.4416 6.5729 10.4347C6.41317 10.4277 6.27081 10.3617 6.14581 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
</div>
<!-- table next/prev button pagination -->
<div class="w-full flex items-center justify-between px-6 py-2 bg-[var(--background-color-subtle)] rounded-lg">
<div class="pagination-info">
Showing <span class="pagination-count">5 out of 12</span> items
<a href="#" class="pagination-link">Show all</a>
</div>
<nav aria-label="pagination mini example">
<ul class="pagination">
<li class="page-item">
<a class="btn btn-sm btn-text-primary" href="#" aria-label="Prev">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22913 10.2367L1.10413 6.11174C1.03468 6.0423 0.986071 5.97286 0.958293 5.90341C0.930515 5.83397 0.916626 5.75758 0.916626 5.67424C0.916626 5.59091 0.930515 5.51452 0.958293 5.44508C0.986071 5.37563 1.03468 5.30619 1.10413 5.23674L5.24996 1.09091C5.37496 0.965912 5.52427 0.903412 5.69788 0.903412C5.87149 0.903412 6.02079 0.965912 6.14579 1.09091C6.27079 1.21591 6.32982 1.36869 6.32288 1.54925C6.31593 1.7298 6.24996 1.88258 6.12496 2.00758L2.45829 5.67424L6.14579 9.36174C6.27079 9.48674 6.33329 9.63258 6.33329 9.79924C6.33329 9.96591 6.27079 10.1117 6.14579 10.2367C6.02079 10.3617 5.86801 10.4242 5.68746 10.4242C5.5069 10.4242 5.35413 10.3617 5.22913 10.2367Z" fill="currentColor"/>
</svg>
Previous
</a>
</li>
<li class="page-item">
<a class="btn btn-sm btn-text-primary" href="#" aria-label="Next">
Next
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.374962 10.2367C0.263851 10.0978 0.204823 9.94507 0.197878 9.7784C0.190934 9.61173 0.249962 9.4659 0.374962 9.3409L4.04163 5.67423L0.354128 1.98673C0.243017 1.87562 0.190934 1.72632 0.197878 1.53882C0.204823 1.35132 0.263851 1.20201 0.374962 1.0909C0.513851 0.95201 0.663156 0.886038 0.822878 0.892983C0.982601 0.899927 1.12496 0.965899 1.24996 1.0909L5.3958 5.23673C5.46524 5.30618 5.51385 5.37562 5.54163 5.44507C5.56941 5.51451 5.5833 5.5909 5.5833 5.67423C5.5833 5.75757 5.56941 5.83395 5.54163 5.9034C5.51385 5.97284 5.46524 6.04229 5.3958 6.11173L1.2708 10.2367C1.1458 10.3617 0.999962 10.4208 0.833295 10.4138C0.666628 10.4069 0.513851 10.3478 0.374962 10.2367Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</nav>
</div>The pagination component is built using a set of CSS variables. These variables provide flexibility for customizing styles globally or locally.
--pagination-color: var(--text-color-default);
--pagination-font-size: var(--text-sm);
--pagination-padding-x: --spacing(1.5);
--pagination-padding-y: --spacing(1.5);
--pagination-width: 2rem;
--pagination-height: 2rem;
--pagination-border-width: 1px;
--pagination-border-color: transparent;
--pagination-radius: var(--radius-md);
--pagination-hover-bg: var(--color-hover);
--pagination-active-bg: var(--color-primary);
--pagination-active-color: var(--color-white);
--pagination-disabled-opacity: 0.35;