Navigation

Navbars, tabs, breadcrumbs, pagination, list groups and scrollspy.

Navbar

The navbar provides a responsive header for navigation, branding, forms, and other interactive elements.

Basic example

<nav class="navbar navbar-expand-lg bg-subtle">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"/></svg>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 lg:mb-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider" /></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="flex" role="search">
        <input class="form-control-fill me-2" type="search" placeholder="Search" aria-label="Search"/>
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Nav

<nav class="navbar navbar-expand-lg bg-subtle">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"/></svg>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<nav class="navbar navbar-expand-lg bg-subtle">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"/></svg>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
      </div>
    </div>
  </div>
</nav>

Form

<nav class="navbar bg-subtle">
  <div class="container">
    <form class="flex" role="search">
      <input class="form-control-fill me-2" type="search" placeholder="Search" aria-label="Search"/>
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

<nav class="navbar bg-subtle">
  <div class="container">
    <a class="navbar-brand">Navbar</a>
    <form class="flex" role="search">
      <input class="form-control-fill me-2" type="search" placeholder="Search" aria-label="Search"/>
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Text

<nav class="navbar bg-subtle">
  <div class="container">
    <span class="navbar-text">Navbar text with an inline element</span>
  </div>
</nav>

Color schemes

<nav class="navbar navbar-expand-lg bg-subtle dark">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#darkNavbar" aria-controls="darkNavbar" aria-expanded="false" aria-label="Toggle navigation">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"/></svg>
    </button>
    <div class="collapse navbar-collapse" id="darkNavbar">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link" href="#">About</a>
      </div>
    </div>
  </div>
</nav>
<nav class="navbar navbar-expand-lg bg-primary-light dark">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNavbar" aria-controls="primaryNavbar" aria-expanded="false" aria-label="Toggle navigation">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"/></svg>
    </button>
    <div class="collapse navbar-collapse" id="primaryNavbar">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link" href="#">About</a>
      </div>
    </div>
  </div>
</nav>
<nav class="navbar navbar-expand-lg bg-primary-lighter">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryLightNavbar" aria-controls="primaryLightNavbar" aria-expanded="false" aria-label="Toggle navigation">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"/></svg>
    </button>
    <div class="collapse navbar-collapse" id="primaryLightNavbar">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link" href="#">About</a>
      </div>
    </div>
  </div>
</nav>

Containers

<nav class="navbar navbar-expand-lg bg-subtle">
  <div class="md:container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

Scrolling

<nav class="navbar navbar-expand-lg bg-subtle">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"/></svg>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav navbar-nav-scroll me-auto my-2 lg:my-0" style="--scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Link</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"/></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Link</a>
        </li>
      </ul>
      <form class="flex" role="search">
        <input class="form-control-fill me-2" type="search" placeholder="Search" aria-label="Search"/>
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

External content

Collapsed content

Toggleable via the navbar brand.

<div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-subtle p-4">
    <h6 class="font-semibold mb-0">Collapsed content</h6>
    <span>Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar bg-subtle">
  <div class="container">
    <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"/></svg>
    </button>
  </div>
</nav>

Offcanvas

<nav class="navbar bg-subtle">
  <div class="container">
    <a class="navbar-brand" href="#">Offcanvas</a>
    <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"/></svg>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title font-semibold" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn btn-icon ms-auto" data-bs-dismiss="offcanvas" aria-label="Close">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z" stroke-width="0.5" stroke="currentColor"/></svg>
        </button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider"/>
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="flex mt-3" role="search">
          <input class="form-control-fill me-2" type="search" placeholder="Search" aria-label="Search"/>
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

Navs and Tabs

Docs

The Navs & Tabs component provides flexible, customizable navigation with horizontal or vertical layouts, color variants, and tabbable regions.

Examples

<ul class="nav nav-underline">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>

Tabs

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>

Color variants

<ul class="nav nav-primary">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>
<ul class="nav nav-secondary">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>

JavaScript behavior

This is some placeholder content the Home tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Profile tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Contact tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.

Disabled

<ul class="nav nav-underline mb-4" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">This is some placeholder content the <b>Home tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">This is some placeholder content the <b>Profile tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">This is some placeholder content the <b>Contact tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">Disabled</div>
</div>

This is some placeholder content the Home tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Profile tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Contact tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.

Disabled

<nav>
  <div class="nav nav-underline mb-4" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">This is some placeholder content the <b>Home tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">This is some placeholder content the <b>Profile tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">This is some placeholder content the <b>Contact tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">Disabled</div>
</div>

This is some placeholder content the Home tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Profile tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Contact tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.

Disabled

<ul class="nav nav-tabs mb-4" id="nav-tab-lift" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-lift-tab" data-bs-toggle="tab" data-bs-target="#home-lift-tab-pane" type="button" role="tab" aria-controls="home-lift-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-lift-tab" data-bs-toggle="tab" data-bs-target="#profile-lift-tab-pane" type="button" role="tab" aria-controls="profile-lift-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-lift-tab" data-bs-toggle="tab" data-bs-target="#contact-lift-tab-pane" type="button" role="tab" aria-controls="contact-lift-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-lift-tab" data-bs-toggle="tab" data-bs-target="#disabled-lift-tab-pane" type="button" role="tab" aria-controls="disabled-lift-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent-2">
  <div class="tab-pane fade show active" id="home-lift-tab-pane" role="tabpanel" aria-labelledby="home-lift-tab" tabindex="0">This is some placeholder content the <b>Home tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="profile-lift-tab-pane" role="tabpanel" aria-labelledby="profile-lift-tab" tabindex="0">This is some placeholder content the <b>Profile tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="contact-lift-tab-pane" role="tabpanel" aria-labelledby="contact-lift-tab" tabindex="0">This is some placeholder content the <b>Contact tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="disabled-lift-tab-pane" role="tabpanel" aria-labelledby="disabled-lift-tab" tabindex="0">Disabled</div>
</div>

This is some placeholder content the Home tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Profile tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Contact tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.

Disabled

<ul class="nav nav-primary mb-4" id="myColorTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-primary-tab" data-bs-toggle="tab" data-bs-target="#home-primary-tab-pane" type="button" role="tab" aria-controls="home-primary-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-primary-tab" data-bs-toggle="tab" data-bs-target="#profile-primary-tab-pane" type="button" role="tab" aria-controls="profile-primary-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-primary-tab" data-bs-toggle="tab" data-bs-target="#contact-primary-tab-pane" type="button" role="tab" aria-controls="contact-primary-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-primary-tab" data-bs-toggle="tab" data-bs-target="#disabled-primary-tab-pane" type="button" role="tab" aria-controls="disabled-primary-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent-3">
  <div class="tab-pane fade show active" id="home-primary-tab-pane" role="tabpanel" aria-labelledby="home-primary-tab" tabindex="0">This is some placeholder content the <b>Home tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="profile-primary-tab-pane" role="tabpanel" aria-labelledby="profile-primary-tab" tabindex="0">This is some placeholder content the <b>Profile tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="contact-primary-tab-pane" role="tabpanel" aria-labelledby="contact-primary-tab" tabindex="0">This is some placeholder content the <b>Contact tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="disabled-primary-tab-pane" role="tabpanel" aria-labelledby="disabled-primary-tab" tabindex="0">Disabled</div>
</div>

Using data attributes

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab-2" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab-2" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab-2" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab-2" tabindex="0"></div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab-2" tabindex="0"></div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0"></div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0"></div>
</div>

Breadcrumb

Docs

Breadcrumbs show the user’s current location within a site hierarchy and provide links to parent pages. Separators are applied automatically with CSS.

Basic example

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#" class="link link-hover">Home</a></li>
    <li class="breadcrumb-item"><a href="#" class="link link-hover">Components</a></li>
    <li class="breadcrumb-item active" aria-current="page">Breadcrumb</li>
  </ol>
</nav>

Link color

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#" class="link link-hover link-primary">Home</a></li>
    <li class="breadcrumb-item"><a href="#" class="link link-hover link-primary">Components</a></li>
    <li class="breadcrumb-item active" aria-current="page">Breadcrumb</li>
  </ol>
</nav>

Icon

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#" class="link link-hover">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M17.5 19h1v-2.5H21v-1h-2.5V13h-1v2.5H15v1h2.5zm.5 2q-2.075 0-3.537-1.463T13 16t1.463-3.537T18 11t3.538 1.463T23 16t-1.463 3.538T18 21M4 19V7l8-6l8 6v2.3q-.475-.15-.975-.225T18 9V8l-6-4.5L6 8v9h5.075q.075.525.225 1.025t.375.975zm8-8.75"/></svg>
        Home
      </a>
    </li>
    <li class="breadcrumb-item">
      <a href="#" class="link link-hover">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm3-2V5H5v14zm2 0h9V5h-9zm-2 0H5z"/></svg>
        Components
      </a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M6.5 16q1.175 0 2.288.263T11 17.05V7.2q-1.025-.6-2.175-.9T6.5 6q-.9 0-1.788.175T3 6.7v9.9q.875-.3 1.738-.45T6.5 16m6.5 1.05q1.1-.525 2.213-.787T17.5 16q.9 0 1.763.15T21 16.6V6.7q-.825-.35-1.713-.525T17.5 6q-1.175 0-2.325.3T13 7.2zm-1 2.425q-.35 0-.663-.087t-.587-.238q-.975-.575-2.05-.862T6.5 18q-1.05 0-2.062.275T2.5 19.05q-.525.275-1.012-.025T1 18.15V6.1q0-.275.138-.525T1.55 5.2q1.15-.6 2.4-.9T6.5 4q1.45 0 2.838.375T12 5.5q1.275-.75 2.663-1.125T17.5 4q1.3 0 2.55.3t2.4.9q.275.125.413.375T23 6.1v12.05q0 .575-.487.875t-1.013.025q-.925-.5-1.937-.775T17.5 18q-1.125 0-2.2.288t-2.05.862q-.275.15-.587.238t-.663.087m2-10.7q0-.225.163-.462T14.525 8q.725-.25 1.45-.375T17.5 7.5q.5 0 .988.063t.962.162q.225.05.388.25t.162.45q0 .425-.275.625t-.7.1q-.35-.075-.737-.112T17.5 9q-.65 0-1.275.125t-1.2.325q-.45.175-.737-.025T14 8.775m0 5.5q0-.225.163-.462t.362-.313q.725-.25 1.45-.375T17.5 13q.5 0 .988.063t.962.162q.225.05.388.25t.162.45q0 .425-.275.625t-.7.1q-.35-.075-.737-.112T17.5 14.5q-.65 0-1.275.113t-1.2.312q-.45.175-.737-.012T14 14.275m0-2.75q0-.225.163-.462t.362-.313q.725-.25 1.45-.375t1.525-.125q.5 0 .988.063t.962.162q.225.05.388.25t.162.45q0 .425-.275.625t-.7.1q-.35-.075-.737-.112t-.788-.038q-.65 0-1.275.125t-1.2.325q-.45.175-.737-.025t-.288-.65"/></svg>
      Breadcrumb
    </li>
  </ol>
</nav>

Separators

<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-separator-dashed">
    <li class="breadcrumb-item"><a href="#" class="link link-hover link-primary">Home</a></li>
    <li class="breadcrumb-item"><a href="#" class="link link-hover link-primary">Components</a></li>
    <li class="breadcrumb-item active" aria-current="page">Breadcrumb</li>
  </ol>
</nav>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-separator-arrow">
    <li class="breadcrumb-item"><a href="#" class="link link-hover link-primary">Home</a></li>
    <li class="breadcrumb-item"><a href="#" class="link link-hover link-primary">Components</a></li>
    <li class="breadcrumb-item active" aria-current="page">Breadcrumb</li>
  </ol>
</nav>

Badge breadcrumb

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href='#' class="badge badge-subtle-neutral badge-link">Home</a></li>
    <li class="breadcrumb-item"><a href='#' class="badge badge-subtle-neutral badge-link">Component</a></li>
    <li class="breadcrumb-item active" aria-current="page"><span class="badge badge-subtle-neutral">Breadcrumb</span></li>
  </ol>
</nav>

Pagination

Docs

The pagination component helps to build and customize controls for navigating content across multiple pages.

Basic pagination

<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>

Filled pagination

<!-- 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>

Subtle Pagination

<!-- 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>

Outlined pagination

<!-- 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>

Circle pagination

<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>

Pagination sizes

<!-- 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>

Pagination Edge Navigator

<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>

Next/Prev button pagination

<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>

Table pagination

Showing 5 out of 12 items Show all

<!-- table pagination -->
<div class="w-full flex items-center justify-between px-6 py-2 bg-(--background-color-subtle) rounded-lg">
  <div class="pagination-summary">
    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-(--background-color-subtle) rounded-lg">
  <div class="pagination-summary">
    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>

List

Docs

Lists display content in a clear vertical format, suitable for organizing text, media, or actions.

Basic list

List Item One
List Item Two
List Item Three
List Item Four

List Item One
List Item Two
List Item Three
List Item Four

<ul class="list-group">
  <li class="list-group-item">List Item One</li>
  <li class="list-group-item">List Item Two</li>
  <li class="list-group-item">List Item Three</li>
  <li class="list-group-item">List Item Four</li>
</ul>

<ul class="list-group">
  <li class="list-group-item flex items-center gap-3">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h12.475q.425 0 .713.288t.287.712t-.288.713t-.712.287H5v14h14v-6.5q0-.425.288-.712T20 11.5t.713.288t.287.712V19q0 .825-.587 1.413T19 21zm6.525-6.8l8.5-8.5q.275-.275.675-.275t.7.275t.3.7t-.3.725L12.225 16.3q-.3.3-.7.3t-.7-.3l-4.25-4.25q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275z"/></svg>
    List Item One
  </li>
  <li class="list-group-item flex items-center gap-3">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h12.475q.425 0 .713.288t.287.712t-.288.713t-.712.287H5v14h14v-6.5q0-.425.288-.712T20 11.5t.713.288t.287.712V19q0 .825-.587 1.413T19 21zm6.525-6.8l8.5-8.5q.275-.275.675-.275t.7.275t.3.7t-.3.725L12.225 16.3q-.3.3-.7.3t-.7-.3l-4.25-4.25q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275z"/></svg>
    List Item Two
  </li>
  <li class="list-group-item flex items-center gap-3">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h12.475q.425 0 .713.288t.287.712t-.288.713t-.712.287H5v14h14v-6.5q0-.425.288-.712T20 11.5t.713.288t.287.712V19q0 .825-.587 1.413T19 21zm6.525-6.8l8.5-8.5q.275-.275.675-.275t.7.275t.3.7t-.3.725L12.225 16.3q-.3.3-.7.3t-.7-.3l-4.25-4.25q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275z"/></svg>
    List Item Three
  </li>
  <li class="list-group-item flex items-center gap-3">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h12.475q.425 0 .713.288t.287.712t-.288.713t-.712.287H5v14h14v-6.5q0-.425.288-.712T20 11.5t.713.288t.287.712V19q0 .825-.587 1.413T19 21zm6.525-6.8l8.5-8.5q.275-.275.675-.275t.7.275t.3.7t-.3.725L12.225 16.3q-.3.3-.7.3t-.7-.3l-4.25-4.25q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275z"/></svg>
    List Item Four
  </li>
</ul>

List with avatar & action button

List Item One
List Item Two
List Item Three
List Item Four

<ul class="list-group">
  <li class="list-group-item flex items-center gap-3">
    <div class="avatar">
      <img src="/images/avatar/avatar_1.webp" alt="Avatar" class='rounded-full' />
    </div>
    List Item One
    <button class='btn btn-icon ms-auto -me-2'>
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zM9 17h2V8H9zm4 0h2V8h-2zM7 6v13z"/></svg>
    </button>
  </li>
  <li class="list-group-item flex items-center gap-3">
    <div class="avatar">
      <img src="/images/avatar/avatar_2.webp" alt="Avatar" class='rounded-full' />
    </div>
    List Item Two
    <button class='btn btn-icon ms-auto -me-2'>
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zM9 17h2V8H9zm4 0h2V8h-2zM7 6v13z"/></svg>
    </button>
  </li>
  <li class="list-group-item flex items-center gap-3">
    <div class="avatar">
      <img src="/images/avatar/avatar_3.webp" alt="Avatar" class='rounded-full' />
    </div>
    List Item Three
    <button class='btn btn-icon ms-auto -me-2'>
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zM9 17h2V8H9zm4 0h2V8h-2zM7 6v13z"/></svg>
    </button>
  </li>
  <li class="list-group-item flex items-center gap-3">
    <div class="avatar">
      <img src="/images/avatar/avatar_4.webp" alt="Avatar" class='rounded-full' />
    </div>
    List Item Four
    <button class='btn btn-icon ms-auto -me-2'>
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zM9 17h2V8H9zm4 0h2V8h-2zM7 6v13z"/></svg>
    </button>
  </li>
</ul>

Active list

List Item One
List Item Two
List Item Three
List Item Four

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">List Item One</li>
  <li class="list-group-item">List Item Two</li>
  <li class="list-group-item">List Item Three</li>
  <li class="list-group-item">List Item Four</li>
</ul>

Link & button

List Item One List Item Two List Item Three List Item Four List Item Five

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">List Item One</a>
  <a href="#" class="list-group-item list-group-item-action">List Item Two</a>
  <a href="#" class="list-group-item list-group-item-action">List Item Three</a>
  <a href="#" class="list-group-item list-group-item-action">List Item Four</a>
  <a href="#" class="list-group-item list-group-item-action disabled" aria-disabled="true">List Item Five</a>
</div>

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">List Item One</button>
  <button type="button" class="list-group-item list-group-item-action">List Item Two</button>
  <button type="button" class="list-group-item list-group-item-action">List Item Three</button>
  <button type="button" class="list-group-item list-group-item-action">List Item Four</button>
  <button type="button" class="list-group-item list-group-item-action disabled" aria-disabled="true">List Item Five</button>
</div>

Numbered

List Item One
List Item Two
List Item Three
List Item Four

<ul class="list-group list-group-numbered">
  <li class="list-group-item" aria-current="true">List Item One</li>
  <li class="list-group-item">List Item Two</li>
  <li class="list-group-item">List Item Three</li>
  <li class="list-group-item">List Item Four</li>
</ul>

Checkboxes and radios

First Checkbox
Second Checkbox
Third Checkbox
Fourth Checkbox

First Checkbox
Second Checkbox
Third Checkbox
Fourth Checkbox

<ul class="list-group">
  <li class="list-group-item list-group-item-action">
    <div class="form-check -ml-2.5">
      <label for="firstCheckbox" class="form-check-input-wrapper">
        <input class="form-check-input" type="checkbox" value="" id="firstCheckbox" checked />
      </label>
      <label for="firstCheckbox" class="form-check-label flex-1">First Checkbox</label>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="form-check -ml-2.5">
      <label for="secondCheckbox" class="form-check-input-wrapper">
        <input class="form-check-input" type="checkbox" value="" id="secondCheckbox" />
      </label>
      <label for="secondCheckbox" class="form-check-label flex-1">Second Checkbox</label>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="form-check -ml-2.5">
      <label for="thirdCheckbox" class="form-check-input-wrapper">
        <input class="form-check-input" type="checkbox" value="" id="thirdCheckbox" />
      </label>
      <label for="thirdCheckbox" class="form-check-label flex-1">Third Checkbox</label>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="form-check -ml-2.5">
      <label for="fourthCheckbox" class="form-check-input-wrapper">
        <input class="form-check-input" type="checkbox" value="" id="fourthCheckbox" />
      </label>
      <label for="fourthCheckbox" class="form-check-label flex-1">Fourth Checkbox</label>
    </div>
  </li>
</ul>

<ul class="list-group">
  <li class="list-group-item list-group-item-action">
    <div class="form-check -ml-2.5">
      <label for="firstRadio" class="form-check-input-wrapper">
        <input class="form-check-input" type="radio" name="listRadio" value="" id="firstRadio" checked />
      </label>
      <label for="firstRadio" class="form-check-label flex-1">First Checkbox</label>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="form-check -ml-2.5">
      <label for="secondRadio" class="form-check-input-wrapper">
        <input class="form-check-input" type="radio" name="listRadio" value="" id="secondRadio" />
      </label>
      <label for="secondRadio" class="form-check-label flex-1">Second Checkbox</label>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="form-check -ml-2.5">
      <label for="thirdRadio" class="form-check-input-wrapper">
        <input class="form-check-input" type="radio" name="listRadio" value="" id="thirdRadio" />
      </label>
      <label for="thirdRadio" class="form-check-label flex-1">Third Checkbox</label>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="form-check -ml-2.5">
      <label for="fourthRadio" class="form-check-input-wrapper">
        <input class="form-check-input" type="radio" name="listRadio" value="" id="fourthRadio" />
      </label>
      <label for="fourthRadio" class="form-check-label flex-1">Fourth Checkbox</label>
    </div>
  </li>
</ul>

With badge

List Item One6 List Item Two3 List Item ThreePending List Item FourClosed

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active flex items-center justify-between" aria-current="true">List Item One<span class="badge badge-primary">6</span></a>
  <a href="#" class="list-group-item list-group-item-action flex items-center justify-between">List Item Two<span class="badge badge-warning">3</span></a>
  <a href="#" class="list-group-item list-group-item-action flex items-center justify-between">List Item Three<span class="badge badge-primary">Pending</span></a>
  <a href="#" class="list-group-item list-group-item-action disabled flex items-center justify-between">List Item Four<span class="badge">Closed</span></a>
</div>

Pinned subheader

Subheader One
List Item One
List Item Two
List Item Three
List Item Four

Subheader Two
List Item One
List Item Two
List Item Three
List Item Four

Subheader Three
List Item One
List Item Two
List Item Three
List Item Four

Subheader Four
List Item One
List Item Two
List Item Three
List Item Four

Subheader Five
List Item One
List Item Two
List Item Three
List Item Four

<ul class="list-group h-80 overflow-auto py-0">
  <ul>
    <li class="list-group-item list-group-item-pinned">Subheader One</li>
    <li class="list-group-item">List Item One</li>
    <li class="list-group-item">List Item Two</li>
    <li class="list-group-item">List Item Three</li>
    <li class="list-group-item">List Item Four</li>
  </ul>
  <ul>
    <li class="list-group-item list-group-item-pinned">Subheader Two</li>
    <li class="list-group-item">List Item One</li>
    <li class="list-group-item">List Item Two</li>
    <li class="list-group-item">List Item Three</li>
    <li class="list-group-item">List Item Four</li>
  </ul>
  <ul>
    <li class="list-group-item list-group-item-pinned">Subheader Three</li>
    <li class="list-group-item">List Item One</li>
    <li class="list-group-item">List Item Two</li>
    <li class="list-group-item">List Item Three</li>
    <li class="list-group-item">List Item Four</li>
  </ul>
  <ul>
    <li class="list-group-item list-group-item-pinned">Subheader Four</li>
    <li class="list-group-item">List Item One</li>
    <li class="list-group-item">List Item Two</li>
    <li class="list-group-item">List Item Three</li>
    <li class="list-group-item">List Item Four</li>
  </ul>
  <ul>
    <li class="list-group-item list-group-item-pinned">Subheader Five</li>
    <li class="list-group-item">List Item One</li>
    <li class="list-group-item">List Item Two</li>
    <li class="list-group-item">List Item Three</li>
    <li class="list-group-item">List Item Four</li>
  </ul>
</ul>

Horizontal list group

Carter
Fiona
Marcus
Emma
Taylor
Xavier
Isabella
Maya
Isaac
Olivia
Lily
Quinn

<ul class="list-group flex-row overflow-x-auto">
  <li class="list-group-item" aria-current="true">
    <div class="avatar avatar-lg">
      <img src="/images/avatar/avatar_4.webp" alt="Avatar" class="rounded-full" />
    </div>
    <p class="mb-0 text-sm text-center line-clamp-1">Carter</p>
  </li>
  <li class="list-group-item">
    <div class="avatar avatar-lg">
      <img src="/images/avatar/avatar_5.webp" alt="Avatar" class="rounded-full" />
    </div>
    <p class="mb-0 text-sm text-center line-clamp-1">Fiona</p>
  </li>
  <li class="list-group-item">
    <div class="avatar avatar-lg">
      <img src="/images/avatar/avatar_6.webp" alt="Avatar" class="rounded-full" />
    </div>
    <p class="mb-0 text-sm text-center line-clamp-1">Marcus</p>
  </li>
  <li class="list-group-item">
    <div class="avatar avatar-lg">
      <img src="/images/avatar/avatar_4.webp" alt="Avatar" class="rounded-full" />
    </div>
    <p class="mb-0 text-sm text-center line-clamp-1">Emma</p>
  </li>
  <li class="list-group-item">
    <div class="avatar avatar-lg">
      <img src="/images/avatar/avatar_10.webp" alt="Avatar" class="rounded-full" />
    </div>
    <p class="mb-0 text-sm text-center line-clamp-1">Taylor</p>
  </li>
  <li class="list-group-item">
    <div class="avatar avatar-lg">
      <img src="/images/avatar/avatar_1.webp" alt="Avatar" class="rounded-full" />
    </div>
    <p class="mb-0 text-sm text-center line-clamp-1">Xavier</p>
  </li>
  <li class="list-group-item">
    <div class="avatar avatar-lg">
      <img src="/images/avatar/avatar_15.webp" alt="Avatar" class="rounded-full" />
    </div>
    <p class="mb-0 text-sm text-center line-clamp-1">Isabella</p>
  </li>
  <li class="list-group-item">
    <div class="avatar avatar-lg">
      <img src="/images/avatar/avatar_9.webp" alt="Avatar" class="rounded-full" />
    </div>
    <p class="mb-0 text-sm text-center line-clamp-1">Maya</p>
  </li>
  <li class="list-group-item">
    <div class="avatar avatar-lg">
      <img src="/images/avatar/avatar_2.webp" alt="Avatar" class="rounded-full" />
    </div>
    <p class="mb-0 text-sm text-center line-clamp-1">Isaac</p>
  </li>
  <li class="list-group-item">
    <div class="avatar avatar-lg">
      <img src="/images/avatar/avatar_11.webp" alt="Avatar" class="rounded-full" />
    </div>
    <p class="mb-0 text-sm text-center line-clamp-1">Olivia</p>
  </li>
  <li class="list-group-item">
    <div class="avatar avatar-lg">
      <img src="/images/avatar/avatar_12.webp" alt="Avatar" class="rounded-full" />
    </div>
    <p class="mb-0 text-sm text-center line-clamp-1">Lily</p>
  </li>
  <li class="list-group-item">
    <div class="avatar avatar-lg">
      <img src="/images/avatar/avatar_13.webp" alt="Avatar" class="rounded-full" />
    </div>
    <p class="mb-0 text-sm text-center line-clamp-1">Quinn</p>
  </li>
</ul>

Custom

Alice Johnson

2 Months ago

Great breakdown of the new JavaScript features! I especially appreciated the examples on optional chaining. One suggestion—maybe include performance benchmarks for real-world cases?
Diana Lee

3 Months ago

This place looks amazing! The colors in your photo are stunning. Where exactly is this? I’d love to visit someday!
Ethan Brown

4 Months ago

Super helpful tutorial—thank you! You explained the steps clearly and kept it beginner-friendly. Could you do a follow-up on more advanced techniques?

<ul class="list-group">
  <li class="list-group-item flex items-start gap-3">
    <div class="avatar avatar-lg shrink-0">
      <img src="/images/avatar/avatar_1.webp" alt="Avatar" class='rounded-full' />
    </div>
    <div>
      <div class="flex items-center gap-3">
        <h4 class="list-text-primary">Alice Johnson</h4>
        <p class="list-text-secondary">2 Months ago</p>
      </div>
      <p class="mb-3">Great breakdown of the new JavaScript features! I especially appreciated the examples on optional chaining. One suggestion—maybe include performance benchmarks for real-world cases?</p>
      <div class="space-x-2">
        <button class='btn btn-sm btn-subtle-primary'>
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M21 8q.8 0 1.4.6T23 10v2q0 .175-.038.375t-.112.375l-3 7.05q-.225.5-.75.85T18 21h-8q-.825 0-1.412-.587T8 19V8.825q0-.4.163-.762t.437-.638l5.425-5.4q.375-.35.888-.425t.987.175t.688.7t.087.925L15.55 8zM4 21q-.825 0-1.412-.587T2 19v-9q0-.825.588-1.412T4 8t1.413.588T6 10v9q0 .825-.587 1.413T4 21"/></svg>
          245
        </button>
        <button class='btn btn-sm btn-subtle-neutral'>
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M3 16q-.8 0-1.4-.6T1 14v-2q0-.175.037-.375t.113-.375l3-7.05q.225-.5.75-.85T6 3h8q.825 0 1.413.587T16 5v10.175q0 .4-.162.763t-.438.637l-5.425 5.4q-.375.35-.887.425t-.988-.175t-.687-.7t-.088-.925L8.45 16zM20 3q.825 0 1.413.588T22 5v9q0 .825-.587 1.413T20 16t-1.412-.587T18 14V5q0-.825.588-1.412T20 3"/></svg>
          13
        </button>
        <button class='btn btn-sm btn-subtle-neutral'>
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="m4.825 11l3.9 3.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-4.6-4.6q-.15-.15-.213-.325T2.426 11t.063-.375t.212-.325l4.6-4.6q.275-.275.688-.275T8.7 5.7q.3.3.3.713t-.3.712zm6 1l2.9 2.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-4.6-4.6q-.15-.15-.213-.325T7.426 11t.063-.375t.212-.325l4.6-4.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L10.825 10H17q2.075 0 3.538 1.463T22 15v3q0 .425-.288.713T21 19t-.712-.288T20 18v-3q0-1.25-.875-2.125T17 12z"/></svg>
          Reply
        </button>
      </div>
    </div>
  </li>
  <li class="list-group-item flex items-start gap-3">
    <div class="avatar avatar-lg shrink-0">
      <img src="/images/avatar/avatar_2.webp" alt="Avatar" class='rounded-full' />
    </div>
    <div>
      <div class="flex items-center gap-3">
        <h4 class="list-text-primary">Diana Lee</h4>
        <p class="list-text-secondary">3 Months ago</p>
      </div>
      <p class="mb-3">This place looks amazing! The colors in your photo are stunning. Where exactly is this? I’d love to visit someday!</p>
      <div class="space-x-2">
        <button class='btn btn-sm btn-subtle-neutral'>
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M21 8q.8 0 1.4.6T23 10v2q0 .175-.038.375t-.112.375l-3 7.05q-.225.5-.75.85T18 21h-8q-.825 0-1.412-.587T8 19V8.825q0-.4.163-.762t.437-.638l5.425-5.4q.375-.35.888-.425t.987.175t.688.7t.087.925L15.55 8zM4 21q-.825 0-1.412-.587T2 19v-9q0-.825.588-1.412T4 8t1.413.588T6 10v9q0 .825-.587 1.413T4 21"/></svg>
          555
        </button>
        <button class='btn btn-sm btn-subtle-neutral'>
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M3 16q-.8 0-1.4-.6T1 14v-2q0-.175.037-.375t.113-.375l3-7.05q.225-.5.75-.85T6 3h8q.825 0 1.413.587T16 5v10.175q0 .4-.162.763t-.438.637l-5.425 5.4q-.375.35-.887.425t-.988-.175t-.687-.7t-.088-.925L8.45 16zM20 3q.825 0 1.413.588T22 5v9q0 .825-.587 1.413T20 16t-1.412-.587T18 14V5q0-.825.588-1.412T20 3"/></svg>
          21
        </button>
        <button class='btn btn-sm btn-subtle-neutral'>
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="m4.825 11l3.9 3.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-4.6-4.6q-.15-.15-.213-.325T2.426 11t.063-.375t.212-.325l4.6-4.6q.275-.275.688-.275T8.7 5.7q.3.3.3.713t-.3.712zm6 1l2.9 2.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-4.6-4.6q-.15-.15-.213-.325T7.426 11t.063-.375t.212-.325l4.6-4.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L10.825 10H17q2.075 0 3.538 1.463T22 15v3q0 .425-.288.713T21 19t-.712-.288T20 18v-3q0-1.25-.875-2.125T17 12z"/></svg>
          Reply
        </button>
      </div>
    </div>
  </li>
  <li class="list-group-item flex items-start gap-3">
    <div class="avatar avatar-lg shrink-0">
      <img src="/images/avatar/avatar_3.webp" alt="Avatar" class='rounded-full' />
    </div>
    <div>
      <div class="flex items-center gap-3">
        <h4 class="list-text-primary">Ethan Brown</h4>
        <p class="list-text-secondary">4 Months ago</p>
      </div>
      <p class="mb-3">Super helpful tutorial—thank you! You explained the steps clearly and kept it beginner-friendly. Could you do a follow-up on more advanced techniques?</p>
      <div class="space-x-2">
        <button class='btn btn-sm btn-subtle-neutral'>
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M21 8q.8 0 1.4.6T23 10v2q0 .175-.038.375t-.112.375l-3 7.05q-.225.5-.75.85T18 21h-8q-.825 0-1.412-.587T8 19V8.825q0-.4.163-.762t.437-.638l5.425-5.4q.375-.35.888-.425t.987.175t.688.7t.087.925L15.55 8zM4 21q-.825 0-1.412-.587T2 19v-9q0-.825.588-1.412T4 8t1.413.588T6 10v9q0 .825-.587 1.413T4 21"/></svg>
          765
        </button>
        <button class='btn btn-sm btn-subtle-neutral'>
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M3 16q-.8 0-1.4-.6T1 14v-2q0-.175.037-.375t.113-.375l3-7.05q.225-.5.75-.85T6 3h8q.825 0 1.413.587T16 5v10.175q0 .4-.162.763t-.438.637l-5.425 5.4q-.375.35-.887.425t-.988-.175t-.687-.7t-.088-.925L8.45 16zM20 3q.825 0 1.413.588T22 5v9q0 .825-.587 1.413T20 16t-1.412-.587T18 14V5q0-.825.588-1.412T20 3"/></svg>
          33
        </button>
        <button class='btn btn-sm btn-subtle-neutral'>
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="m4.825 11l3.9 3.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-4.6-4.6q-.15-.15-.213-.325T2.426 11t.063-.375t.212-.325l4.6-4.6q.275-.275.688-.275T8.7 5.7q.3.3.3.713t-.3.712zm6 1l2.9 2.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-4.6-4.6q-.15-.15-.213-.325T7.426 11t.063-.375t.212-.325l4.6-4.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L10.825 10H17q2.075 0 3.538 1.463T22 15v3q0 .425-.288.713T21 19t-.712-.288T20 18v-3q0-1.25-.875-2.125T17 12z"/></svg>
          Reply
        </button>
      </div>
    </div>
  </li>
</ul>

Scrollspy

Docs

Scrollspy automatically updates navigation or list group components based on scroll position, indicating which link is currently active in the viewport.

Navbar

First heading

Welcome to our demo page! This section introduces the concept of scrollspy and explains how it enhances navigation. As users scroll, the navigation updates automatically to reflect the current section, helping visitors stay oriented even on long pages. The smooth transition between sections creates a seamless browsing experience and encourages users to explore more content without confusion.

Second heading

Scrollspy provides dynamic navigation feedback, making it easier for users to track their location on the page. As visitors move through different sections, the active navigation link changes in real time, creating an intuitive reading flow. This is especially useful on documentation pages, tutorials, and long-form content where multiple topics are presented in sequence. The visual cue from the navigation also improves engagement, guiding readers naturally from one section to the next.

Third heading

Scrollspy is ideal for any multi-section layout, such as product pages, educational tutorials, and dashboards. It helps users understand which part of the page they are viewing and makes it simple to jump between sections without losing context. By linking the navigation to the scroll position, users feel more in control, and content becomes more accessible. Even lengthy pages feel organized and approachable when scrollspy is implemented effectively.

Fourth heading

To get the most out of scrollspy, ensure each section is clearly defined with distinct headings and sufficient content to trigger scrolling. Consistent formatting and spacing make the page easier to read and prevent confusion about the current section. Navigation should remain visible or sticky so users can always see which section is active, and the highlighted link should align accurately with the section content. A well-implemented scrollspy creates a smooth, engaging, and professional user experience.

Fifth heading

Scrollspy enhances long pages by connecting the navigation with content sections, helping users stay oriented as they explore. It makes complex layouts more digestible and increases usability by giving clear visual feedback. Whether for tutorials, dashboards, or marketing pages, scrollspy ensures that users can move efficiently through content while maintaining context, resulting in a polished and user-friendly design.

<nav id="scrollspy-navbar" class="navbar navbar-expand bg-subtle mb-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#scrollspy-navbar" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="bg-subtle p-3 h-50 overflow-y-auto" tabindex="0">
  <h5 id="scrollspyHeading1">First heading</h5>
  <p>Welcome to our demo page! This section introduces the concept of scrollspy and explains how it enhances navigation. As users scroll, the navigation updates automatically to reflect the current section, helping visitors stay oriented even on long pages. The smooth transition between sections creates a seamless browsing experience and encourages users to explore more content without confusion.</p>
  <h5 id="scrollspyHeading2">Second heading</h5>
  <p>Scrollspy provides dynamic navigation feedback, making it easier for users to track their location on the page. As visitors move through different sections, the active navigation link changes in real time, creating an intuitive reading flow. This is especially useful on documentation pages, tutorials, and long-form content where multiple topics are presented in sequence. The visual cue from the navigation also improves engagement, guiding readers naturally from one section to the next.</p>
  <h5 id="scrollspyHeading3">Third heading</h5>
  <p>Scrollspy is ideal for any multi-section layout, such as product pages, educational tutorials, and dashboards. It helps users understand which part of the page they are viewing and makes it simple to jump between sections without losing context. By linking the navigation to the scroll position, users feel more in control, and content becomes more accessible. Even lengthy pages feel organized and approachable when scrollspy is implemented effectively.</p>
  <h5 id="scrollspyHeading4">Fourth heading</h5>
  <p>To get the most out of scrollspy, ensure each section is clearly defined with distinct headings and sufficient content to trigger scrolling. Consistent formatting and spacing make the page easier to read and prevent confusion about the current section. Navigation should remain visible or sticky so users can always see which section is active, and the highlighted link should align accurately with the section content. A well-implemented scrollspy creates a smooth, engaging, and professional user experience.</p>
  <h5 id="scrollspyHeading5">Fifth heading</h5>
  <p>Scrollspy enhances long pages by connecting the navigation with content sections, helping users stay oriented as they explore. It makes complex layouts more digestible and increases usability by giving clear visual feedback. Whether for tutorials, dashboards, or marketing pages, scrollspy ensures that users can move efficiently through content while maintaining context, resulting in a polished and user-friendly design.</p>
</div>

Nested navigation

Item 1

This section introduces the scrollspy concept and explains its purpose. Scrollspy allows navigation links to highlight dynamically as the user scrolls through the page, giving a clear sense of location and improving usability. Proper sectioning ensures that each part of the page is easily identifiable, even on long-form content or multi-section layouts.

Keep in mind that the JavaScript plugin selects the most relevant element when multiple targets are visible. Ensuring clear separation between sections helps maintain accurate highlighting.

Item 1-1

Here, we dive deeper into how scrollspy determines the active section. The plugin calculates which element is most prominently visible in the viewport and highlights its corresponding navigation link. Understanding this behavior helps in designing layouts that avoid overlapping content or multiple visible targets at once.

Understanding this mechanism is essential for building pages where content overlaps or where multiple sections are visible at the same time. Developers need to carefully structure the page to avoid conflicting active states, which could confuse users. For example, on a documentation page with dense technical content, adding sufficient padding and section height ensures that the active link always corresponds to the section most relevant to the reader.

Item 1-2

To ensure scrollspy works smoothly, keep sections clearly separated and give each section sufficient height. Avoid placing multiple active targets in the same viewport simultaneously, as this can cause inaccurate highlighting. Testing on different screen sizes is also important to maintain consistent behavior.

Additionally, maintaining consistent styling, spacing, and padding across sections helps prevent visual confusion. Sticky or fixed navigation bars are recommended so that users can always see which section is active. Testing across different screen sizes and devices is crucial, as viewport height changes can affect which section is considered active. Following these best practices ensures that scrollspy enhances usability rather than causing frustration.

Item 2

This section covers practical implementation strategies. Scrollspy can be paired with sticky navigation bars, smooth scrolling, and offset adjustments to create an intuitive experience. It’s commonly used on documentation pages, tutorials, and product landing pages where users need to track their reading position easily.

It’s also important to account for offsets, especially when using sticky headers. The offset determines how far from the top of the viewport a section must appear before it is considered active. Fine-tuning this value ensures that the correct navigation link is highlighted even when fixed headers obscure part of the section. Developers can also use scrollspy in combination with other interactive components, such as collapsible sections, tabs, or modal windows, for complex page layouts.

Item 3

Scrollspy also supports nested sections, which is useful for complex content structures. Nested items allow users to see sub-sections of a main topic without losing context. Proper configuration ensures smooth highlighting even when multiple nested sections are visible simultaneously.

Advanced usage also includes handling multiple active targets. Careful section design, unique IDs, and consistent offsets ensure the plugin correctly identifies the active section, even when multiple elements are visible at once. Developers must consider responsiveness, as viewport height changes can affect which section is highlighted.

Item 3-1

This example demonstrates how sub-items are tracked independently within a parent section. Each sub-section has its own navigation link that becomes active as users scroll, giving precise control over detailed content areas.

For instance, a multi-part tutorial might have a main chapter as the parent section and detailed lessons as sub-items. As the user scrolls through each lesson, the sub-item navigation highlights individually, while the parent section remains visible in the navigation hierarchy. This structure allows readers to track their progress easily without losing sight of the overall chapter or topic. Keep in mind that the JavaScript plugin selects the most relevant element when multiple targets are visible. Ensuring clear separation between sections helps maintain accurate highlighting.

Item 3-2

When using nested scrollspy targets, it’s crucial to maintain sufficient spacing between sub-sections to avoid overlapping highlights. Very short or closely spaced sections can result in flickering active states or confusion about which link is selected. Consistent section styling, padding, and headings help ensure smooth navigation highlighting. Proper testing across multiple devices and screen sizes guarantees a reliable experience for all users.

<div class="row">
  <div class="col-5 sm:col-4">
    <nav id="tab-scrollspy" class="h-full">
      <nav class="nav nav-primary flex-col h-full">
        <a class="nav-link" href="#item-1">Item 1</a>
        <nav class="nav nav-primary flex-col">
          <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
          <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
        </nav>
        <a class="nav-link" href="#item-2">Item 2</a>
        <a class="nav-link" href="#item-3">Item 3</a>
        <nav class="nav nav-primary flex-col">
          <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
          <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
        </nav>
      </nav>
    </nav>
  </div>

  <div class="col-7 sm:col-8">
    <div data-bs-spy="scroll" data-bs-target="#tab-scrollspy" data-bs-smooth-scroll="true" class="h-100 overflow-y-scroll" tabindex="0">
      <div id="item-1">
        <h5>Item 1</h5>
        <p>This section introduces the scrollspy concept and explains its purpose. Scrollspy allows navigation links to highlight dynamically as the user scrolls through the page, giving a clear sense of location and improving usability. Proper sectioning ensures that each part of the page is easily identifiable, even on long-form content or multi-section layouts.</p>
        <p>Keep in mind that the JavaScript plugin selects the most relevant element when multiple targets are visible. Ensuring clear separation between sections helps maintain accurate highlighting.</p>
      </div>
      <div id="item-1-1">
        <h6>Item 1-1</h6>
        <p>Here, we dive deeper into how scrollspy determines the active section. The plugin calculates which element is most prominently visible in the viewport and highlights its corresponding navigation link. Understanding this behavior helps in designing layouts that avoid overlapping content or multiple visible targets at once.</p>
        <p>Understanding this mechanism is essential for building pages where content overlaps or where multiple sections are visible at the same time. Developers need to carefully structure the page to avoid conflicting active states, which could confuse users. For example, on a documentation page with dense technical content, adding sufficient padding and section height ensures that the active link always corresponds to the section most relevant to the reader.</p>
      </div>
      <div id="item-1-2">
        <h6>Item 1-2</h6>
        <p>To ensure scrollspy works smoothly, keep sections clearly separated and give each section sufficient height. Avoid placing multiple active targets in the same viewport simultaneously, as this can cause inaccurate highlighting. Testing on different screen sizes is also important to maintain consistent behavior.</p>
        <p>Additionally, maintaining consistent styling, spacing, and padding across sections helps prevent visual confusion. Sticky or fixed navigation bars are recommended so that users can always see which section is active. Testing across different screen sizes and devices is crucial, as viewport height changes can affect which section is considered active. Following these best practices ensures that scrollspy enhances usability rather than causing frustration.</p>
      </div>
      <div id="item-2">
        <h5>Item 2</h5>
        <p>This section covers practical implementation strategies. Scrollspy can be paired with sticky navigation bars, smooth scrolling, and offset adjustments to create an intuitive experience. It’s commonly used on documentation pages, tutorials, and product landing pages where users need to track their reading position easily.</p>
        <p>It’s also important to account for offsets, especially when using sticky headers. The offset determines how far from the top of the viewport a section must appear before it is considered active. Fine-tuning this value ensures that the correct navigation link is highlighted even when fixed headers obscure part of the section. Developers can also use scrollspy in combination with other interactive components, such as collapsible sections, tabs, or modal windows, for complex page layouts.</p>
      </div>
      <div id="item-3">
        <h5>Item 3</h5>
        <p>Scrollspy also supports nested sections, which is useful for complex content structures. Nested items allow users to see sub-sections of a main topic without losing context. Proper configuration ensures smooth highlighting even when multiple nested sections are visible simultaneously.</p>
        <p>Advanced usage also includes handling multiple active targets. Careful section design, unique IDs, and consistent offsets ensure the plugin correctly identifies the active section, even when multiple elements are visible at once. Developers must consider responsiveness, as viewport height changes can affect which section is highlighted.</p>
      </div>
      <div id="item-3-1">
        <h6>Item 3-1</h6>
        <p>This example demonstrates how sub-items are tracked independently within a parent section. Each sub-section has its own navigation link that becomes active as users scroll, giving precise control over detailed content areas.</p>
        <p>For instance, a multi-part tutorial might have a main chapter as the parent section and detailed lessons as sub-items. As the user scrolls through each lesson, the sub-item navigation highlights individually, while the parent section remains visible in the navigation hierarchy. This structure allows readers to track their progress easily without losing sight of the overall chapter or topic. Keep in mind that the JavaScript plugin selects the most relevant element when multiple targets are visible. Ensuring clear separation between sections helps maintain accurate highlighting.</p>
      </div>
      <div id="item-3-2">
        <h6>Item 3-2</h6>
        <p>When using nested scrollspy targets, it’s crucial to maintain sufficient spacing between sub-sections to avoid overlapping highlights. Very short or closely spaced sections can result in flickering active states or confusion about which link is selected. Consistent section styling, padding, and headings help ensure smooth navigation highlighting. Proper testing across multiple devices and screen sizes guarantees a reliable experience for all users.</p>
      </div>
    </div>
  </div>
</div>

List group

Item 1 Item 2 Item 3 Item 4

Item 1

Welcome to this scrollspy demo section. As you move down the page, notice how the navigation link updates automatically to reflect the section currently in view. This creates a smoother browsing experience and helps users stay aware of where they are on a long page.

Scrollspy is commonly used in documentation, dashboards, and multi-section layouts. It enhances usability by linking scrolling behavior with navigation elements, ensuring that the interface remains intuitive and easy to follow.

Item 2

The scrollspy functionality continuously monitors the user’s scroll position within the page. As you move past different content sections, the corresponding navigation item becomes active. This feature provides immediate visual feedback, making it easier to locate and revisit specific sections.

Behind the scenes, the JavaScript plugin calculates which section is visible in the viewport and updates the navigation state accordingly. Proper spacing and unique section identifiers help the scrollspy determine which part of the page should be highlighted.

Item 3

Scrollspy can be applied to many real-world scenarios. It’s ideal for long-form documentation, user guides, and educational pages where readers need to navigate through structured content efficiently. On corporate websites, it can help highlight key areas like company overview, services, and contact sections without requiring page reloads.

For developers, scrollspy simplifies navigation in single-page applications by keeping the user’s focus aligned with their position. It’s also useful in dashboards or analytics tools, where users frequently move between different content blocks or metrics.

Item 4

Scrollspy adds polish and professionalism to web interfaces by enhancing the relationship between navigation and content. It keeps users oriented, reduces confusion, and creates a sense of flow as they explore a page.

When implemented with thoughtful spacing, accessible markup, and smooth scrolling effects, scrollspy can dramatically improve the user experience. Whether for tutorials, product overviews, or landing pages, it’s a lightweight yet powerful feature that helps users stay connected to their content journey.

<div class="row">
  <div class="col-4">
    <div id="list-example" class="list-group">
      <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
      <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
      <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
      <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
    </div>
  </div>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="h-70 overflow-y-auto" tabindex="0">
      <h4 id="list-item-1">Item 1</h4>
      <p>Welcome to this scrollspy demo section. As you move down the page, notice how the navigation link updates automatically to reflect the section currently in view. This creates a smoother browsing experience and helps users stay aware of where they are on a long page.</p>
      <p>Scrollspy is commonly used in documentation, dashboards, and multi-section layouts. It enhances usability by linking scrolling behavior with navigation elements, ensuring that the interface remains intuitive and easy to follow.</p>
      <h4 id="list-item-2">Item 2</h4>
      <p>The scrollspy functionality continuously monitors the user’s scroll position within the page. As you move past different content sections, the corresponding navigation item becomes active. This feature provides immediate visual feedback, making it easier to locate and revisit specific sections.</p>
      <p>Behind the scenes, the JavaScript plugin calculates which section is visible in the viewport and updates the navigation state accordingly. Proper spacing and unique section identifiers help the scrollspy determine which part of the page should be highlighted.</p>
      <h4 id="list-item-3">Item 3</h4>
      <p>Scrollspy can be applied to many real-world scenarios. It’s ideal for long-form documentation, user guides, and educational pages where readers need to navigate through structured content efficiently. On corporate websites, it can help highlight key areas like company overview, services, and contact sections without requiring page reloads.</p>
      <p>For developers, scrollspy simplifies navigation in single-page applications by keeping the user’s focus aligned with their position. It’s also useful in dashboards or analytics tools, where users frequently move between different content blocks or metrics.</p>
      <h4 id="list-item-4">Item 4</h4>
      <p>Scrollspy adds polish and professionalism to web interfaces by enhancing the relationship between navigation and content. It keeps users oriented, reduces confusion, and creates a sense of flow as they explore a page.</p>
      <p>When implemented with thoughtful spacing, accessible markup, and smooth scrolling effects, scrollspy can dramatically improve the user experience. Whether for tutorials, product overviews, or landing pages, it’s a lightweight yet powerful feature that helps users stay connected to their content journey.</p>
    </div>
  </div>
</div>

Simple anchors

Item 1 Item 2 Item 3 Item 4 Item 5

Item 1

Item 2

Item 3

Item 4

Item 5

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

<div class="row">
  <div class="col-5 sm:col-4">
    <div id="simple-list-example" class="flex flex-col gap-2 text-center">
      <a class="p-2 rounded text-info active:bg-info-lighter active:font-semibold" href="#simple-list-item-1">Item 1</a>
      <a class="p-2 rounded text-info active:bg-info-lighter active:font-semibold" href="#simple-list-item-2">Item 2</a>
      <a class="p-2 rounded text-info active:bg-info-lighter active:font-semibold" href="#simple-list-item-3">Item 3</a>
      <a class="p-2 rounded text-info active:bg-info-lighter active:font-semibold" href="#simple-list-item-4">Item 4</a>
      <a class="p-2 rounded text-info active:bg-info-lighter active:font-semibold" href="#simple-list-item-5">Item 5</a>
    </div>
  </div>
  <div class="col-7 sm:col-8">
    <div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="h-70 overflow-y-auto" tabindex="0">
      <h4 id="simple-list-item-1">Item 1</h4>
      <p>Welcome to this scrollspy demo section. As you move down the page, notice how the navigation link updates automatically to reflect the section currently in view. This creates a smoother browsing experience and helps users stay aware of where they are on a long page.</p>
      <p>Scrollspy is commonly used in documentation, dashboards, and multi-section layouts. It enhances usability by linking scrolling behavior with navigation elements, ensuring that the interface remains intuitive and easy to follow.</p>
      <h4 id="simple-list-item-2">Item 2</h4>
      <p>The scrollspy functionality continuously monitors the user’s scroll position within the page. As you move past different content sections, the corresponding navigation item becomes active. This feature provides immediate visual feedback, making it easier to locate and revisit specific sections.</p>
      <p>Behind the scenes, the JavaScript plugin calculates which section is visible in the viewport and updates the navigation state accordingly. Proper spacing and unique section identifiers help the scrollspy determine which part of the page should be highlighted.</p>
      <h4 id="simple-list-item-3">Item 3</h4>
       <p>Scrollspy can be applied to many real-world scenarios. It’s ideal for long-form documentation, user guides, and educational pages where readers need to navigate through structured content efficiently. On corporate websites, it can help highlight key areas like company overview, services, and contact sections without requiring page reloads.</p>
      <p>For developers, scrollspy simplifies navigation in single-page applications by keeping the user’s focus aligned with their position. It’s also useful in dashboards or analytics tools, where users frequently move between different content blocks or metrics.</p>
      <h4 id="simple-list-item-4">Item 4</h4>
      <p>Scrollspy adds polish and professionalism to web interfaces by enhancing the relationship between navigation and content. It keeps users oriented, reduces confusion, and creates a sense of flow as they explore a page.</p>
      <p>When implemented with thoughtful spacing, accessible markup, and smooth scrolling effects, scrollspy can dramatically improve the user experience. Whether for tutorials, product overviews, or landing pages, it’s a lightweight yet powerful feature that helps users stay connected to their content journey.</p>
      <h4 id="simple-list-item-5">Item 5</h4>
      <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
    </div>
  </div>
</div>

Previous Basic Next Overlays

Getting started

Foundations

Components

Navigation

Navbar

Basic example

Nav

Form

Text

Color schemes

Containers

Scrolling

External content

Collapsed content

Offcanvas

Navs and Tabs

Examples

Tabs

Color variants

JavaScript behavior

Using data attributes

Breadcrumb

Basic example

Link color

Icon

Separators

Badge breadcrumb

Pagination

Basic pagination

Filled pagination

Subtle Pagination

Outlined pagination

Circle pagination

Pagination sizes

Pagination Edge Navigator

Next/Prev button pagination

Table pagination

List

Basic list

List with avatar & action button

Active list

Link & button

Numbered

Checkboxes and radios

With badge

Pinned subheader

Horizontal list group

Custom

Alice Johnson

Diana Lee

Ethan Brown

Scrollspy

Navbar

First heading

Second heading

Third heading

Fourth heading

Fifth heading

Nested navigation

Item 1

Item 1-1

Item 1-2

Item 2

Item 3

Item 3-1

Item 3-2

List group

Item 1

Item 2

Item 3

Item 4

Simple anchors

Item 1

Item 2

Item 3

Item 4

Item 5