Scrollspy bs 3.3.7 => 4.4.0

[joeldom]

convert style-guide Scrollspy from 3.3.7 to 4.4.0

docs: https://getbootstrap.com/docs/4.0/components/scrollspy/

bopotstrap 4.4.0

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item2</a>
    <a class="nav-link" href="#item-3">Item3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

bootstrap 3.7.7

<nav class="bs-docs-sidebar">
          <ul id="sidebar" class="nav nav-stacked fixed">
            <li><a href="#getting-started">Alpha</a>
              <ul class="nav nav-stacked">
                <li><a href="#the-begining">The Begining</a></li>
                <li><a href="#into-the-void">Into the Void</a></li>
                <li><a href="#Goals">Goals</a>
                  <ul class="nav nav-stacked">
                    <li><a href="#Goals1">01</span></a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="#Color">Color</a>
              <ul class="nav nav-stacked">
                  <li><a href="#Primary-Colors">Primary Colors</a></li>
                  <li><a href="#Secondary-Colors">Secondary Colors</a></li>
                  <li><a href="#Alternate-Colors">Alternate Colors</a></li>
              </ul>
            </li>
            <li><a href="#Typography">Typography</a>
              <ul class="nav nav-stacked">
                <li><a href="#typed1">Typed.js</span></a></li>
                <li><a href="#typography-roboto">Roboto</a></li>
                <li><a href="#typography-roboto-mono">Roboto Mono</a></li>
                <li><a href="#typography-NotoSans">Noto Sans</a></li>
                <li><a href="#typography-Helvetica">Helvetica</a></li>
                <li><a href="#Quotes">Quotes</a></li>
                <li><a href="#Article">Article</a></li>
              </ul>
            </li>
            <li><a href="#Buttons">Buttons</a>
              <ul class="nav nav-stacked">
                <li><a href="#Usage">Usage</a></li>
                <li><a href="#Pagination">Pagination</a></li>
              </ul>
            </li>
            <li><a href="#Timeline">Timeline</a></li>
            <li><a href="#output">Elements</a>
              <ul class="nav nav-stacked">
                <li><a href="#Multi-Step">Multi-Step</a></li>
              </ul>
            </li>
            <li><a href="#code">Code</a>
              <ul class="nav nav-stacked">
                <li><a href="#code-code-counts">Variables</a></li>
                <li><a href="#code-colsplit">Classes</a></li>
              </ul>
            </li>
            <li>&nbsp;</li>
            <li><a class="back-to-top" href="#header">Back to top</a></li>
            <li><small>ver 5 : 1.21.2020</small></li>
          </ul>
          <div class="viewport">Viewport: <span id="monitor"></span>px</div>
          </div>
        </nav>