"Form Process Steps"
Bootstrap 3.1.0 Snippet by alilishan

<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"> <div class="row bs-wizard" style="border-bottom:0;"> <div class="col-xs-3 bs-wizard-step complete"> <div class="text-center bs-wizard-stepnum">Step 1</div> <div class="progress"><div class="progress-bar"></div></div> <a href="#" class="bs-wizard-dot"></a> <div class="bs-wizard-info text-center">Lorem ipsum dolor sit amet.</div> </div> <div class="col-xs-3 bs-wizard-step complete"><!-- complete --> <div class="text-center bs-wizard-stepnum">Step 2</div> <div class="progress"><div class="progress-bar"></div></div> <a href="#" class="bs-wizard-dot"></a> <div class="bs-wizard-info text-center">Nam mollis tristique erat vel tristique. Aliquam erat volutpat. Mauris et vestibulum nisi. Duis molestie nisl sed scelerisque vestibulum. Nam placerat tristique placerat</div> </div> <div class="col-xs-3 bs-wizard-step active"><!-- complete --> <div class="text-center bs-wizard-stepnum">Step 3</div> <div class="progress"><div class="progress-bar"></div></div> <a href="#" class="bs-wizard-dot"></a> <div class="bs-wizard-info text-center">Integer semper dolor ac auctor rutrum. Duis porta ipsum vitae mi bibendum bibendum</div> </div> <div class="col-xs-3 bs-wizard-step disabled"><!-- active --> <div class="text-center bs-wizard-stepnum">Step 4</div> <div class="progress"><div class="progress-bar"></div></div> <a href="#" class="bs-wizard-dot"></a> <div class="bs-wizard-info text-center"> Curabitur mollis magna at blandit vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</div> </div> </div> </div> </div>
.bs-wizard {margin-top: 40px;} /*Form Wizard*/ .bs-wizard {border-bottom: solid 1px #e0e0e0; padding: 0 0 10px 0;} .bs-wizard > .bs-wizard-step {padding: 0; position: relative;} .bs-wizard > .bs-wizard-step + .bs-wizard-step {} .bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #595959; font-size: 16px; margin-bottom: 5px;} .bs-wizard > .bs-wizard-step .bs-wizard-info {color: #999; font-size: 14px;} .bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #fbe8aa; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;} .bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #fbbd19; border-radius: 50px; position: absolute; top: 8px; left: 8px; } .bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0;} .bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #fbe8aa;} .bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;} .bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;} .bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;} .bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;} .bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f5f5;} .bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;} .bs-wizard > .bs-wizard-step:first-child > .progress {left: 50%; width: 50%;} .bs-wizard > .bs-wizard-step:last-child > .progress {width: 50%;} .bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; } /*END Form Wizard*/

Related: See More


Questions / Comments:

Awesome

Abishek Shivan () - 2 years ago - Reply 0


I need this progress bar vertically, can someone please help me?

AzzaKoos () - 3 years ago - Reply 0


did you ever figure out how to get this vertically?

Kleigh () - 3 years ago - Reply 0


Nice

Riyaz Khan () - 3 years ago - Reply 0


What is controlling the animation from one step to the next? I get a strange animation when the bar fills up from each step. You'll see two divs filling up at the same time (from left to right). Any way of making it a little more smooth with the 2nd div filling up after the 1st div is complete? Or turning off the animation? See image. http://imgur.com/fehMgJg

dnguyen () - 4 years ago - Reply 0


Found it in the bootstrap.css file. I had to override the 3 transition properties.

.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #337ab7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
/*-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;*/
}

dnguyen () - 4 years ago - Reply 0


You don't need to change bootstrap. I only changed the following css rules:

.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {

transition-timing-function: linear;

transition-duration: 1s;

width:100%;

}

.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {

transition-timing-function: linear;

transition-delay: 1s;

transition-duration: 1s;

width:50%;

}

Murat Ozgul () - 3 years ago - Reply 0


If I put this inside a modal, a white break appears halfway between last 2 steps. You can see it here: http://bootsnipp.com/user/s.... Any ideas why modal is messing things up?

Screenshot: http://i.imgur.com/ptix9ne.png

mrchief () - 4 years ago - Reply 0


I think it is because the width of the col-xs-4 is set to 33.333333% in the Bootstrap CSS so you get this interesting problem where that 0.111111% is the line that you are seeing in between the divs.

maxsurguy () - 4 years ago - Reply 0


Hmmm... Seems logical. For now I'm handling with a -1px margin.

Ok, so the minimum you need to counteract the rounding error is -0.2px

.bs-wizard > .bs-wizard-step:last-child > .progress {width: 50%;margin-left:-0.2px}

or better yet:

.bs-wizard > .bs-wizard-step:last-child > .progress {width: 50%; margin-left:-0.111111%} :)

mrchief () - 4 years ago - Reply 0


Thanks

jhj () - 4 years ago - Reply 0


Thanks

Nice () - 4 years ago - Reply 0


How to move the progress bar to the left

Momoski () - 4 years ago - Reply 0


Like a boss.

Bang () - 4 years ago - Reply 0


This is pretty easy to retcon into 2.3.2 as well: just replace the .col-xs-3 classes with an appropriate .spanN, and change the .progress-bar classes to .bar in both the HTML and CSS.

pettazz () - 5 years ago - Reply 0


can't get in working in bootstrap 2.3.2, there a bunch of empty space left between steps. Can you please share your CSS or a link to your implementation?

igor () - 4 years ago - Reply 0


This is lifted straight out of a working version of a site: https://gist.github.com/pet...

pettazz () - 4 years ago - Reply 0


Awesomeness, thanks so much! So added .bs-wizard > .bs-wizard-step {margin: 0 -1px 0 0; ... } is what made a difference.
Any idea on how to make this responsive? It works on desktop, but breaks on mobile. The original bootstrap 3 version resizes properly.

igor () - 4 years ago - Reply 0


My guess is that's because the .col-xs-3 classes are responsive in BS3 but the .spanNs didn't work the same way in 2.3.2.

pettazz () - 4 years ago - Reply 0