How to make a .nav-link inactive?

I am using a Bootstrap nav-bar for a wizard progress indicator. I want to make sure that steps of the wizard which have not been visited yet are not clickable. I would like them to appear in the nav-bar, but have them be greyed out and the links be disabled.

Can this be done in the Bootstrap nav-bar?

You can add the disabled class to the container <li>:

<ul class="nav nav-list">
   <li class="disabled"><a href="index.html">...</a></li>
</ul>

However, to disallow users clicking them, you should use JavaScript to prevent this:

$(document).ready(function() {
   $(".nav li.disabled a").click(function() {
     return false;
   });
});

Another way is replacing the href property with an anchor (#) temporarily.

The right way to do this is using an <a>nchor tag without href attribute.

While this is a hardly known technique it is totally valid HTML and leads to an element with all the styling that is attributed to the <a> tag but with no linking functionality.

<ul class="nav nav-list">
   <li><a>...</a></li>
</ul>

See W3C's HTML specification for technical background:

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.

This can be done completly in CSS (unless you need to support ie <11) with the pointer-events property. However, by turning pointer events off for a I also no longer get the not-allowed cursor, so I set it on the disabled li. (I know this question is quite old but is still the first search result)

This is my SCSS for that purpose:

ul.nav {
    li.disabled {
        cursor: not-allowed;

        a {
            pointer-events: none;
        }
    }
}