<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container" style="width: 75%; margin: 10px auto;"> <div class="row multistep"> <div class="col-xs-3 multistep-step complete"> <div class="text-center multistep-stepname">Completed Step</div> <div class="progress"><div class="progress-bar"></div></div> <a href="#" class="multistep-dot"></a> </div> <div class="col-xs-3 multistep-step current"> <div class="text-center multistep-stepname">Current Step</div> <div class="progress"><div class="progress-bar"></div></div> <a href="#" class="multistep-dot"></a> </div> <div class="col-xs-3 multistep-step next"> <div class="text-center multistep-stepname">Next Step</div> <div class="progress"><div class="progress-bar"></div></div> <a href="#" class="multistep-dot"></a> </div> <div class="col-xs-3 multistep-step disabled"> <div class="text-center multistep-stepname">Final Step</div> <div class="progress"><div class="progress-bar"></div></div> <a href="#" class="multistep-dot"></a> </div> </div> </div>

/* Multistep */ /* See below for SASS (allows you easily set dot radius and progress bar thickness and adjusts everything else! */ .multistep .multistep-step { padding: 0; position: relative; margin-bottom: 10px; } .multistep .multistep-step .multistep-stepname { margin-bottom: 16px; color: #595959; font-size: 1.6rem; white-space: nowrap; } .multistep .multistep-step .multistep-dot { position: absolute; right: 50%; left: 50%; width: 32px; height: 32px; display: block; margin-top: -16px; margin-left: -15.5px; border-radius: 50%; background: #f5f5f5; /* Inner Dot */ } .multistep .multistep-step .multistep-dot:after { content: ' '; border-radius: 50px; position: absolute; top: 8px; bottom: 8px; left: 8px; right: 8px; background: #e0e0e0; } .multistep .multistep-step .progress { position: absolute; width: 100%; height: 10.56px; margin-top: -5.28px; box-shadow: none; border-radius: 0; } .multistep .multistep-step .progress .progress-bar { width: 0px; box-shadow: none; background: #fbe8aa; } .multistep .multistep-step:first-child > .progress { left: 50%; width: 50%; } .multistep .multistep-step:last-child > .progress { width: 50%; } .multistep .multistep-step.complete .multistep-dot { background: #fbe8aa; } .multistep .multistep-step.complete .multistep-dot:after { background: #fbbd19; } .multistep .multistep-step.complete .progress > .progress-bar { width: 100%; } .multistep .multistep-step.next:hover .multistep-dot { background: #fbe8aa; } .multistep .multistep-step.next:hover .multistep-dot:after { background: #fbbd19; } .multistep .multistep-step.current .multistep-dot { background: #fbe8aa; } .multistep .multistep-step.current .multistep-dot:after { background: #fbbd19; } .multistep .multistep-step.current .progress > .progress-bar { width: 50%; } .multistep .multistep-step.current:first-child > .progress > .progress-bar { width: 0%; } .multistep .multistep-step.current:last-child > .progress > .progress-bar { width: 100%; } .multistep .multistep-step a.multistep-dot { pointer-events: none; } .multistep .multistep-step.next a.multistep-dot { pointer-events: all; } /* SASS $inactiveColor: #f5f5f5; $inactiveDotColor: #e0e0e0; $activeColor: #fbe8aa; $activeDotColor: #fbbd19; $stepNameColor: #595959; $dotRadius: 16px; $barThickness: $dotRadius * .66; $stepNameSize: 1.6rem; .multistep { .multistep-step { padding: 0; position: relative; margin-bottom: 10px; .multistep-stepname { margin-bottom: $dotRadius; color: $stepNameColor; font-size: $stepNameSize; white-space: nowrap; } .multistep-dot { position: absolute; right: 50%; left: 50%; width: $dotRadius * 2; height: $dotRadius * 2; display: block; margin-top: -$dotRadius; margin-left: -$dotRadius + .5; border-radius: 50%; background: $inactiveColor; &:after { content: ' '; border-radius: 50px; position: absolute; top: $dotRadius / 2; bottom: $dotRadius / 2; left: $dotRadius / 2; right: $dotRadius / 2; background: $inactiveDotColor; } } .progress { position: absolute; width: 100%; height: $barThickness; margin-top: -$barThickness / 2; box-shadow: none; border-radius: 0; .progress-bar { width: 0px; box-shadow: none; background: $activeColor; } } &:first-child > .progress { left: 50%; width: 50%; } &:last-child > .progress { width: 50%; } &.complete { .multistep-dot { background: $activeColor; &:after { background: $activeDotColor; } } .progress > .progress-bar { width: 100%; } } &.next:hover { .multistep-dot { background: $activeColor; } .multistep-dot:after { background: $activeDotColor; } } &.current { .multistep-dot { background: $activeColor; &:after { background: $activeDotColor; } } .progress > .progress-bar { width: 50%; } &:first-child > .progress > .progress-bar { width: 0%; } &:last-child > .progress > .progress-bar { width: 100%; } } a.multistep-dot { pointer-events: none; } &.next a.multistep-dot { pointer-events: all; } } } */