Colors

Primary

Success

Warning

Danger

Info

Direction

RTL

Change text direction

To switch the text direction of your webpage from LTR to RTL, please consult the detailed instructions provided in the relevant section of our documentation.

Border width, px

Rounding, rem

Back to settings

To apply the provided styles to your webpage, enclose them within a <style> tag and insert this tag into the <head> section of your HTML document after the following link to the main stylesheet:
<link href="assets/css/theme.min.css">

Scrollspy

Automatically update navigation or list group components based on scroll position to indicate which link is currently active in the viewport.

Navbar

First heading

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.

Second heading

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.

Third heading

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.

Fourth heading

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.

Fifth heading

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.

<!-- Navbar with scrollspy enabled navigation -->
<nav id="scrollspyNavbar" class="navbar navbar-expand-md bg-body-tertiary rounded px-3 pe-md-2 mb-4">
  <a class="navbar-brand" href="#">Cartzilla</a>
  <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#scrollspyNavbarNav" aria-controls="scrollspyNavbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="scrollspyNavbarNav">
    <ul class="navbar-nav ms-auto">
      <li class="nav-item">
        <a class="nav-link fs-sm" href="#scrollspySection1">First</a>
      </li>
      <li class="nav-item">
        <a class="nav-link fs-sm" href="#scrollspySection2">Second</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link fs-sm dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
        <ul class="dropdown-menu dropdown-menu-end" style="--cz-dropdown-min-width: 10rem;">
          <li><a class="dropdown-item" href="#scrollspySection3">Third</a></li>
          <li><a class="dropdown-item" href="#scrollspySection4">Fourth</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#scrollspySection5">Fifth</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

<!-- Scrollable container with anchors -->
<div class="overflow-auto px-3" data-bs-spy="scroll" data-bs-target="#scrollspyNavbar" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" style="max-height: 120px">
  <div id="scrollspySection1" class="pb-3">
    <h5>First heading</h5>
    <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 id="scrollspySection2" class="pb-3">
    <h5>Second heading</h5>
    <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 id="scrollspySection3" class="pb-3">
    <h5>Third heading</h5>
    <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 id="scrollspySection4" class="pb-3">
    <h5>Fourth heading</h5>
    <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 id="scrollspySection5">
    <h5>Fifth heading</h5>
    <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>

List group with nested nav

Item 1

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.

Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

Item 1-1

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.

Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

Item 1-2

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.

Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

Item 2

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.

Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

Item 3

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.

Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

Item 3-1

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.

Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

Item 3-2

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.

Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

<div class="row">
  <div class="col-md-3">

    <!-- Collapse toggle button shown on screens smaller 768px (md) -->
    <button type="button" class="btn btn-outline-secondary w-100 d-md-none" data-bs-toggle="collapse" data-bs-target="#navCollapse" aria-expanded="false" aria-controls="navCollapse">
      <i class="ci-menu fs-base ms-n1 me-2"></i>
      Navigation
    </button>

    <!-- Collapse -->
    <div class="collapse d-md-block" id="navCollapse">

      <!-- List group with nested underline navs -->
      <nav id="scrollspyNestedNav" class="list-group list-group-borderless pt-3 pt-md-0">
        <a class="list-group-item list-group-item-action" href="#item-1">Item 1</a>
        <ul class="nav nav-underline flex-column border-start ms-2 my-2" style="gap: .25rem;">
          <li class="nav-item">
            <a class="nav-link fw-normal" href="#item-1-1">Item 1-1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link fw-normal" href="#item-1-2">Item 1-2</a>
          </li>
        </ul>
        <a class="list-group-item list-group-item-action" href="#item-2">Item 2</a>
        <a class="list-group-item list-group-item-action" href="#item-3">Item 3</a>
        <ul class="nav nav-underline flex-column border-start ms-2 my-2" style="gap: .25rem;">
          <li class="nav-item">
            <a class="nav-link fw-normal" href="#item-3-1">Item 3-1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link fw-normal" href="#item-3-2">Item 3-2</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>

  <!-- Scrollable container with anchors -->
  <div class="col-md-9 pt-4 pt-md-0">
    <div class="overflow-auto pe-2 px-md-3" data-bs-spy="scroll" data-bs-target="#scrollspyNestedNav"  data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" style="height: 360px">
      <div id="item-1" class="pb-3">
        <h4>Item 1</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>
        <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
      </div>
      <div id="item-1-1" class="pb-3">
        <h5>Item 1-1</h5>
        <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>
        <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
      </div>
      <div id="item-1-2" class="pb-3">
        <h5>Item 1-2</h5>
        <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>
        <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
      </div>
      <div id="item-2" class="pb-3">
        <h4>Item 2</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>
        <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
      </div>
      <div id="item-3" class="pb-3">
        <h4>Item 3</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>
        <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
      </div>
      <div id="item-3-1" class="pb-3">
        <h5>Item 3-1</h5>
        <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>
        <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
      </div>
      <div id="item-3-2">
        <h5>Item 3-2</h5>
        <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>
        <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
      </div>
    </div>
  </div>
</div>

Tabs

First heading

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.

Second heading

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.

Third heading

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.

<!-- Scrollspy enabled nav tabs -->
<ul id="scrollspyTabs" class="nav nav-tabs mb-4" style="max-width: 350px">
  <li class="nav-item" >
    <a class="nav-link" href="#scrollspyTabsSection1">First</a>
  </li>
  <li class="nav-item" >
    <a class="nav-link" href="#scrollspyTabsSection2">Second</a>
  </li>
  <li class="nav-item" >
    <a class="nav-link" href="#scrollspyTabsSection3">Third</a>
  </li>
</ul>

<!-- Scrollable container with anchors -->
<div class="overflow-auto px-2" data-bs-spy="scroll" data-bs-target="#scrollspyTabs" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" style="max-height: 120px">
  <div id="scrollspyTabsSection1" class="pb-3">
    <h5>First heading</h5>
    <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 id="scrollspyTabsSection2" class="pb-3">
    <h5>Second heading</h5>
    <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 id="scrollspyTabsSection3">
    <h5>Third heading</h5>
    <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>

Pills

First heading

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.

Second heading

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.

Third heading

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.

<!-- Scrollspy enabled nav pills -->
<ul id="scrollspyPills" class="nav nav-pills mb-4">
  <li class="nav-item" >
    <a class="nav-link" href="#scrollspyPillsSection1">First</a>
  </li>
  <li class="nav-item" >
    <a class="nav-link" href="#scrollspyPillsSection2">Second</a>
  </li>
  <li class="nav-item" >
    <a class="nav-link" href="#scrollspyPillsSection3">Third</a>
  </li>
</ul>

<!-- Scrollable container with anchors -->
<div class="overflow-auto px-2" data-bs-spy="scroll" data-bs-target="#scrollspyPills" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" style="max-height: 120px">
  <div id="scrollspyPillsSection1" class="pb-3">
    <h5>First heading</h5>
    <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 id="scrollspyPillsSection2" class="pb-3">
    <h5>Second heading</h5>
    <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 id="scrollspyPillsSection3">
    <h5>Third heading</h5>
    <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>