To override and extend Bootstrap Pagination.
<!-- Single Page -->
<nav>
<ul class="pagination">
<li class="page-item disabled">
<span class="page-link">< Previous</span>
</li>
<li class="page-item active">
<span class="page-link">1</span>
</li>
<li class="page-item disabled">
<span class="page-link">Next ></span>
</li>
</ul>
</nav>
<!-- Few Pages (Current: 2 of 4) -->
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#">< Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item active">
<span class="page-link">2</span>
</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="#">Next ></a>
</li>
</ul>
</nav>
<!-- Few Pages (Current: Last) -->
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#">< Previous</a>
</li>
<li class="page-item">
<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 active">
<span class="page-link">4</span>
</li>
<li class="page-item disabled">
<span class="page-link">Next ></span>
</li>
</ul>
</nav>
<!-- Many Pages - Near Start (Current: 3 of 20) -->
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#">< Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item active">
<span class="page-link">3</span>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item skip">
<span class="page-link">...</span>
</li>
<li class="page-item">
<a class="page-link" href="#">20</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next ></a>
</li>
</ul>
</nav>
<!-- Many Pages - Middle (Current: 10 of 20) -->
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#">< Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item skip">
<span class="page-link">...</span>
</li>
<li class="page-item">
<a class="page-link" href="#">8</a>
</li>
<li class="page-item">
<a class="page-link" href="#">9</a>
</li>
<li class="page-item active">
<span class="page-link">10</span>
</li>
<li class="page-item">
<a class="page-link" href="#">11</a>
</li>
<li class="page-item">
<a class="page-link" href="#">12</a>
</li>
<li class="page-item skip">
<span class="page-link">...</span>
</li>
<li class="page-item">
<a class="page-link" href="#">20</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next ></a>
</li>
</ul>
</nav>
<!-- Many Pages - Near End (Current: 18 of 20) -->
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#">< Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item skip">
<span class="page-link">...</span>
</li>
<li class="page-item">
<a class="page-link" href="#">16</a>
</li>
<li class="page-item">
<a class="page-link" href="#">17</a>
</li>
<li class="page-item active">
<span class="page-link">18</span>
</li>
<li class="page-item">
<a class="page-link" href="#">19</a>
</li>
<li class="page-item">
<a class="page-link" href="#">20</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next ></a>
</li>
</ul>
</nav>
<!-- Example with Disabled Link -->
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#">< Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item active">
<span class="page-link">3</span>
</li>
<li class="page-item disabled">
<span class="page-link">4</span>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next ></a>
</li>
</ul>
</nav>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
/* All Bootstrap pattern library CSS loads for every component */
/* FAQ: To support legacy client imports, Bootstrap file organization is odd */
@import url("./bootstrap--form.demo.css");
@import url("./bootstrap--modal.demo.css");
@import url("./bootstrap--col.demo.css");
@import url("./bootstrap--pagination.demo.css");
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"shouldLoadBootstrap": true,
"supportStyles": [
"../../assets/components/bootstrap.pagination.css"
]
}