Wizard style navigation tabs for bootstrap

nav-wizard.bootstrap.css

.nav-pills.nav-wizard > li {
  position: relative;
  overflow: visible;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}
.nav-pills.nav-wizard > li + li {
  margin-left: 0;
}
.nav-pills.nav-wizard > li:first-child {
  border-left: 0;
}
.nav-pills.nav-wizard > li:first-child a {
  border-radius: 5px 0 0 5px;
}
.nav-pills.nav-wizard > li:last-child {
  border-right: 0;
}
.nav-pills.nav-wizard > li:last-child a {
  border-radius: 0 5px 5px 0;
}
.nav-pills.nav-wizard > li a {
  border-radius: 0;
  background-color: #eee;
}
.nav-pills.nav-wizard > li:not(:last-child) a:after {
  position: absolute;
  content: "";
  top: 0px;
  right: -20px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 0 20px 20px;
  border-color: transparent transparent transparent #eee;
  z-index: 150;
}
.nav-pills.nav-wizard > li:not(:first-child) a:before {
  position: absolute;
  content: "";
  top: 0px;
  left: -20px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 0 20px 20px;
  border-color: #eee #eee #eee transparent;
  z-index: 150;
}
.nav-pills.nav-wizard > li:hover:not(:last-child) a:after {
  border-color: transparent transparent transparent #aaa;
}
.nav-pills.nav-wizard > li:hover:not(:first-child) a:before {
  border-color: #aaa #aaa #aaa transparent;
}
.nav-pills.nav-wizard > li:hover a {
  background-color: #aaa;
  color: #fff;
}
.nav-pills.nav-wizard > li.active:not(:last-child) a:after {
  border-color: transparent transparent transparent #428bca;
}
.nav-pills.nav-wizard > li.active:not(:first-child) a:before {
  border-color: #428bca #428bca #428bca transparent;
}
.nav-pills.nav-wizard > li.active a {
  background-color: #428bca;
}

nav-wizard.bootstrap.less

.nav-pills {
    &.nav-wizard {
        > li {
            position: relative;
            overflow: visible;
            border-right: 15px solid transparent;
            border-left: 15px solid transparent;
 
            + li {
                margin-left: 0;
            }
          
            &:first-child {
                border-left: 0;
 
                a {
                    border-radius:5px 0 0 5px;
                }
            }
 
            &:last-child {
                border-right: 0;
 
                a {
                    border-radius:0 5px 5px 0;
                }
            }
 
            a {
                border-radius: 0;
                background-color: #eee;
            }
 
            &:not(:last-child) a:after {
                position: absolute;
                content: "";
                top: 0px;
                right: -20px;
                width: 0px;
                height: 0px;
                border-style: solid;
                border-width: 20px 0 20px 20px;
                border-color: transparent transparent transparent #eee;
                z-index: 150;
            }
 
            &:not(:first-child) a:before {
                position: absolute;
                content: "";
                top: 0px;
                left: -20px;
                width: 0px;
                height: 0px;
                border-style: solid;
                border-width: 20px 0 20px 20px;
                border-color: #eee #eee #eee transparent;
                z-index: 150;
            }
 
            &:hover {
                &:not(:last-child) a:after {
                    border-color: transparent transparent transparent #aaa;
                }
 
                &:not(:first-child) a:before {
                    border-color: #aaa #aaa #aaa transparent;
                }
 
                a {
                    background-color: #aaa;
                    color: #fff;
                }
            }
 
            &.active {
                &:not(:last-child) a:after {
                    border-color: transparent transparent transparent #428bca;
                }
 
                &:not(:first-child) a:before {
                    border-color: #428bca #428bca #428bca transparent;
                }
 
                a {
                    background-color: #428bca;
                }
            }
        }
    }
}

any change need to be done in HTML?

go here
http://benjii.me/2014/03/wizard-style-navigation-tabs-for-bootstrap/

This looks nice, but what purpose would it serve since most navigation-style designs have the intent to submit a form upon navigating to/from a step?

Need to add the following to make it safe on non-white backgrounds.

.nav-pills {
  &.nav-wizard {
    >li+li {
      margin-left: 0;
    }

Thanks for that @stnor, gist has been updated :)

if I have 4 navs

A -> B -> C -> D

how to:

1. if user at A. nav B, C and D was disabled
2. if user at A, user can't acces C or D without through B
3. when user already at B (and already fill questionnaire at A (connect with database)), nav A change color to green

thanks for your answerd

Just an FYI, this is more or less broken when using Bootstrap 4 - the nav pill structure has been slightly updated. Here's a BS4-compatible CSS version: https://gist.github.com/tiesont/5b291c8344944f22c3d67cb902464048