Topic: dotted scrollspy and bootstrap 4.0 alpha 6

trymkb pro asked 6 years ago

Dots are not positioned correctly and end up horizontal instead of vertical. Fixed by adding this to my custom stylesheet:
.dotted-scrollspy li.nav-item {
    box-sizing: border-box;
    color: rgb(41, 43, 44);
.dotted-scrollspy .nav {
    display: block;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
.dotted-scrollspy li {
    padding: 0;

Kamil Paciepnik free answered 6 years ago

Hi trymkb, Thanks for reporting a bug. Try this code:
<section id="one"></section>
<section id="two"></section>
<section id="three"></section>
<section id="four"></section>
<section id="five"></section>
<section id="six"></section>

<!-- Scrollspy -->
<div class="dotted-scrollspy hidden-sm-down">
    <ul class="nav smooth-scroll d-flex flex-column">
        <li class="nav-item"><a class="nav-link" href="#one"><span></span></a></li>
        <li class="nav-item"><a class="nav-link" href="#two"><span></span></a></li>
        <li class="nav-item"><a class="nav-link" href="#three"><span></span></a></li>
        <li class="nav-item"><a class="nav-link" href="#four"><span></span></a></li>
        <li class="nav-item"><a class="nav-link" href="#five"><span></span></a></li>
        <li class="nav-item"><a class="nav-link" href="#six"><span></span></a></li>
.dotted-scrollspy li {
    display: block;
    padding: 0 0px;

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No