Add wizard / progress tracker

[macropin]

It would be great if you could add a progress tracker navigation device to your supported styles / examples.

These are now pretty common place navigation items and I would think that other people would want this too.

I've subverted a 'pager' for this purpose with some custom styles. But it still doesn't feel right.

NB Some more examples

http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/

[rizqidjamaluddin]

I'd imagine progress trackers to vary wildly in design, and standard tools like buttons, dropdown and navigation lists can work for them. Is there a particular style you think would be useful? Maybe like breadcrumbs, but arrows to the right instead of vertical separating lines?

[macropin]

I'm not really sure about the best design. I'm not really a UI guy, but I would like to see something that is consistent, and I think the breadcrumbs suggestion has merit.

[rizqidjamaluddin]

One issue is that it's quite difficult to create angular lines without resorting to images (or SVG). Pretty much all of Bootstrap relies on manipulating CSS to get the effects we need, so it could be a problem. Maybe for now, breadcrumbs but with arrows instead of slashes?

[mdo]

We won't be adding this to Bootstrap, but I do encourage you to create an add-on to the toolkit that enables folks to use this.

[jorgenhorstink]

Mark, sorry for reopening, but I'm curious for the reason why not to add it. Today I needed a wizard-like progress component for a sign up form. A wizard-like progress component is a special case of a breadcrumb imho. I just don't see why the breadcrumb component is part of the Bootstrap toolkit, while a wizard progress component will not be. I think of Bootstrap as an abstract toolkit with atomic building blocks for creating clean user interfaces. A wizard progress component looks pretty atomic to me, and very useful to a great part of the users.

Example what I made today, extending the breadcrumb functionality (<ul class="breadcrumb wizard">):

http://img513.imageshack.us/img513/6143/screenshot20120307at546.png

@rizqidjamaluddin what you see in the image above is 100% CSS, no images...

[rizqidjamaluddin]

Can you make a jsfiddle of that? I can't see the image link you posted, imageshack restrictions.

[wub]

@rizqidjamaluddin Here's another link. Hopefully you've no Imgur restrictions! http://i.imgur.com/8svSw.png

[macropin]

@jorgenhorstink I really like the look of what you've done. Can you please stage the css / html somewhere, either a jsfiddle, or a gist

[rizqidjamaluddin]

Hey, that looks really nice. At the very least, make sure you release that as a separate download, please, it could be useful! A jsfiddle would be awesome; I think you should adopt Bootstrap's colors (in particular, the default blue) for the active step, use blue hyperlinks for past steps, and use gray hyperlinks for future steps. Maybe also use gradients like buttons. That would also make it easy to attach icons to them.

[mfrimu]

Hello jorgenhorstink,

Wizard looks great! Could you share it, I'd love to try it on my current project.?

Thanks,

[j-hernandez]

@jorgenhorstink Just finished porting a 1.4 app to 2.0.2 and have started trying to sort out an easy interface for building some reports within the app, this looks like it would be suitable. Any plans to put the project on github?

[jorgenhorstink]

Okey, I'm going to try to put a gist online tomorrow... A great way to
celebrate my birthday ;)

cheers

On 28 mrt. 2012, at 19:52, j-hernandez
reply@reply.github.com
wrote:

@jorgenhorstink Just finished porting a 1.4 app to 2.0.2 and have started trying to sort out an easy interface for building some reports within the app, this looks like it would be suitable. Any plans to put the project on github?

---

Reply to this email directly or view it on GitHub:
#1982 (comment)

[xxbillouxx]

+1 for re-opening

should be included in BS

[diviak]

+1

[adamjgrant]

You may want to start this issue on kickstrap. I've already got step-wise progress bars.

[xxbillouxx]

@ajkochanowicz thx for your contribution, but I prefer this one : http://i.imgur.com/8svSw.png

@ajkochanowicz : is it possible to create this kind of progress bar ?

[adamjgrant]

It's surely possible. My main goal was to extend bs functionality without bloating it by using something already existing in the interface (progress bar).

It may suffice to make your design a mod of the inline flush buttons already included with Bootstrap. I'd imaging all that's needed is a tick mark and some js to keep some of the buttons depressed or have an extra css class for completed steps.

I do like the look of those, though. I'm kind of rushing to get KS released elegantly by the 15th so I may not have time yet to add new features, but I'll keep this on the table.

[sskati]

I really like http://i.imgur.com/8svSw.png, can someone post the source code for that please?

[Anahkiasen]

You can find it over here : http://socialpublish.io/

[sskati]

Thanks!

[huyl]

@jorgenhorstink Looks great. I'd love a gist, but I guess I'll get it from http://socialpublish.io/

[ghost]

I have written my own bootstrap design compatible wizard / progress tracker with css only (no images needed):

(thx to MGaetan89: updated with rounded corners)

here is the html:

<div class="wizard">
    <a><span class="badge">1</span> Set Global Properties</a>
    <a><span class="badge">2</span> Specify Entry Scheme</a>
    <a class="current"><span class="badge badge-inverse">3</span> Create Test Entry</a>
    <a><span class="badge">4</span> Check Your Data and Generate Portal</a> 
</div>

and the css (no images needed):

.wizard a {padding: 12px 12px 10px 12px; margin-right:5px; background:#efefef; position:relative; display:inline-block; }
.wizard a:before {width:0px; height:0px; border-top: 20px inset transparent; border-bottom: 20px inset transparent; border-left: 20px solid #fff; position: absolute; content: ""; top: 0; left: 0;}
.wizard a:after {width:0px; height:0px; border-top: 20px inset transparent; border-bottom: 20px inset transparent; border-left: 20px solid #efefef; position: absolute; content: ""; top: 0; right: -20px; z-index:2;}
.wizard a:first-child:before {border:none;}
.wizard a:last-child:after {border:none;}

.wizard a:first-child {-moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px 0 0 4px; border-radius:   4px 0 0 4px;}
.wizard a:last-child {-moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0 4px 4px 0; border-radius:   0 4px 4px 0;}

.wizard .badge {margin:0 5px 0 18px; position:relative; top:-1px;}
.wizard a:first-child .badge {margin-left:0;}

.wizard .current {background:#007ACC; color:#fff;}
.wizard .current:after {border-left-color:#007ACC;}

hope you like it - feedback is welcome :)

[thezoggy]

personally i like this: http://www.dynamicdrive.com/dynamicindex16/formwizard.htm
might be worth combine the breadcrumb style nav with the carousel to make something simliar

[MGaetan89]

@wotaewer : This is great. I think that a small border-radius on the first and last element would be nice too :)

[ghost]

@MGaetan89: thx for the feedback - good idea - already changed it :)

[mtanvir]

@wotaewer Life saver! I adopted your style for ul, work wonders. Many thanks.

[NelsonReis]

@wotaewer Nice one! You can add the following code to avoid the :hover behavior on the items:
.wizard a:hover { text-decoration: none; } .wizard a:not(.current):hover { color:#08C; }
Maybe you could add it to a gist, so that improvements would become easier to track.
Have you suggested this on a pull-request?

[truancylounge]

Thanks a lot guys, saved me a lot of work!

I am just starting out on the client but will def contribute more as time goes on.

APPRECIATE ALL YOUR HARD WORK in making us catch up to speed.

[truancylounge]

@wotaewer and others , Quick question, how can we make these wizards fixed on top?

Thanks in advance.

[thezoggy]

@wotaewer made a jsfiddle with your wizard as well as including a breadcrumb example to show how the structure is different.
http://jsfiddle.net/H7J94/5/

while stylistically i do like your wizard, minus the hover.. i think that the markup could be redone so that it more closely resembles the breadcrumb but just extended. also, the use of some of your selectors seem less than desirable from a compatibility standpoint as well as making things more complex than it needs to be.

started to do a breadcrumb wizard version and while i can make it look similar you cant make it do the background color for that segment very easily.. thus additional markup is needed to wrap things :(

[Shuro]

👍 Nice Solutions, exactly what i searched within bootstrap, should be added, didn't know why not

[gilluminate]

I've got something in the oven for this: https://github.com/gilluminate/Bootstrap-Wizard

I'm also attempting to use the CSS suggested by @wotaewer

Please help me test it and please contribute!

[xopher]

I don't think the badges are appropriate for numbering steps. Badges serve a very specific purpose which is to display a count (IMO). I've forked the JSFiddle provided above and cleared out the badges and replaced them with icons (empty stars for incomplete steps, stars for completed steps). Additionally, I've added the chevron to the end of the last step because I prefer it that way, if you don't, just uncomment the only commented line.

http://jsfiddle.net/GER7j/7/

[gilluminate]

Nice observation @xopher. The bootstrap docs say:

"Badges are small, simple components for displaying an indicator or count of some sort."

I'm inclined to think that numbering steps is a type of count, albeit a different kind of count than we normally see badges used (like email notification), in that it counts the number of steps.

In my plugin mentioned above, I am actually ONLY showing badges when the user is on a phone/portrait size screen and using Bootstrap Responsive. It looks nice, but after your comment, I'm not sure how I feel about it.

How would you suggest dealing with smaller sized screens in your jsfiddle contribution other than simply wrapping the steps and eventually stacking them?

[xopher]

I just looked more closely at your plugin and kudos for making the markup an ordered list. I thought it should be, but didn't want to get too pedantic in my previous comment.

Honestly, I didn't give this a lot of thought, I just tinkered with the JSFiddle to get it closer to my preferences.

Your responsive version with the badges alone actually looks quite nice, I get it, but using the badge element still feels forced to me.

I agree with the OP's suggestion that this should be a variation of pagination, and as such, for a responsive version, I would probably use the typical pager containing only the numbers, add a proper Title to the content of each step, and then add the title of the next/previous steps to the buttons at the bottom.

[berezovskyi]

@xopher Thanks for your fiddle! It's exactly what I was looking for. In my fork I've implemented different color and pointer for disabled state (as all steps after current are usually disabled by design).

[VinceG]

FYI
https://github.com/VinceG/twitter-bootstrap-wizard

[MGaetan89]

@VinceG nice job! On the last example "Multiple wizards" if you click on a tab, an alert says the tab-click is disable, but the current tab is changed anyway. Otherwise it looks like a great tool :)

[VinceG]

@MGaetan89 Thanks! Notice that the event does not return false. If i did return false in that event it won't go to the that tab. This is working as intended. Thanks again.

[gilluminate]

I've recently upgraded https://github.com/gilluminate/Bootstrap-Wizard to utilize pager links rather than buttons for the back/next buttons, which seemed more appropriate. I also replaced badges with a slightly modified version of labels, which seemed more appropriate.

Screenshot:
https://raw.github.com/gilluminate/Bootstrap-Wizard/master/screenshot.png

By The Way, @xopher, if you use an un-ordered list, it will simply leave the numbering off until the responsive kicks in. It gives the developer a choice in a more semantic way.

[justintoth]

This is great, thanks for taking the time to build this!! This definitely should be a component in Bootstrap, a wizard is a very common UI component just as much as other included things are like modal popups.

[cschandragiri]

@wotaewer: Great job! Just what I was looking for. You saved my day!

[rorra]

It would be great to have a feature like this out of the box, you saved me a lot of time, thx 👍

[vaneves]

I created a simple wizard with Twitter Bootstrap.

CSS:

/*## Wizard ##*/
.wizard { width: 100%; margin: 0; padding: 0; background: #F5F5F5; height: 10px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0px 1px 0px 0px #CCC; box-shadow: inset 0px 1px 0px 0px #CCC; list-style: none; margin-bottom: 40px; margin-top: 25px; }
.wizard li { display: table-cell; width: 1%; float: none; text-align: center; }
.wizard li span { display: block; width: 30px; height: 25px; background: #F5F5F5; text-align: center; color: #999; margin: auto; margin-top: -10px; padding-top: 5px; font-size: 1.1em; font-weight: bold; -webkit-border-radius:15px; border-radius: 15px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); -webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.15); -webkit-box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.15); }
.wizard li.active span { background: #0088CC; color: #FFF; }

HTML:

<ul class="wizard">         
    <li><span>1</span>Primeiro</li>
    <li class="active"><span>2</span>Segundo</li>
    <li><span>3</span>Terceiro</li>
    <li><span>4</span>Quarto</li>
</ul>

[TK11703]

FuelUX has a wizard component, but it does not integrate very easily... IMHO.

[adewes]

Nice work, I integrated it into my site! +1 for making the wizard a core part of Bootstrap.

[TK11703]

I dont know why I am having issues here. I just want to use the wizard.
I have a page where I include the fuelux css, jquery, bootstrap, and then loader.
I get am error where it says missing moment...

I include why can't I use the wizard plugin by itself?

[zzullick]

I used LESS to re-create what we have above in this thread originally by wotaewer and made it compatible with the .nav-justified class.

You can use it by simply adding the class "nav-wizard" to your element just like you use "nav-pills" or "nav-tabs".

Here is the code for anyone interested:

// Nav Wizard
// -------------------------
.nav-wizard {
  > li {
    float: left;

    > a {
        position: relative;
        background-color: @nav-link-hover-bg;
    }
    &:not(:first-child) > a {
        padding-left: 35px;

        &:before {
            width: 0px;
            height: 0px;
            border-top: 20px inset transparent;
            border-bottom: 20px inset transparent;
            border-left: 20px solid #fff;
            position: absolute;
            content: "";
            top: 0;
            left: 0;
        }
    }
    &:first-child > a {
        border-top-left-radius: @nav-pills-border-radius;
        border-bottom-left-radius: @nav-pills-border-radius;
    }
    &:not(:last-child) > a {
        margin-right: 6px;

        &:after {
            width: 0px;
            height: 0px;
            border-top: 20px inset transparent;
            border-bottom: 20px inset transparent;
            border-left: 20px solid @nav-link-hover-bg;
            position: absolute;
            content: "";
            top: 0;
            right: -20px;
            z-index: 2;
        }
    }
    &:last-child > a {
        border-top-right-radius: @nav-pills-border-radius;
        border-bottom-right-radius: @nav-pills-border-radius;
    }
    &:hover {
        > a {
            background-color: darken(@nav-link-hover-bg, 10%);

            &:before {
                border-right-color: darken(@nav-link-hover-bg, 10%);
            }
            &:after {
                border-left-color: darken(@nav-link-hover-bg, 10%);
            }   
        }
    }

    // Active state
    &.active > a {
      &,
      &:hover,
      &:focus {
        color: @nav-pills-active-link-hover-color;
        background-color: @nav-pills-active-link-hover-bg;
      }

      &:after {
        border-left-color: @nav-pills-active-link-hover-bg;
      }
    }
  }
}

.nav-wizard.nav-justified {
    > li {
        float: none;

        > a {
            padding: @nav-link-padding;
        }
    }

    // Small screens size, remove the "arrows" and just show it like stacked pills.
    @media (max-width: @screen-sm-min) {
        > li > a {
            border-radius: @nav-pills-border-radius;
            margin-right: 0;

            &:before,
            &:after {
              border: none !important;
            }
        }
    }
}

[olemarius]

@zzullick Awesome! I added support for li.disabled as well (inside &:hover):

            &.disabled {
                a {
                    background-color: darken(@nav-link-hover-bg, 10%);
                }

                &:before {
                    border-right-color: darken(@nav-link-hover-bg, 10%);
                }

                &:after {
                    border-left-color: darken(@nav-link-hover-bg, 10%);
                }
            }

[acornejo]

@zzullick

It worked great for me. I created a github repository with a bower component (for easy installation).

Please feel free to submit issues or patches to improve it (it is good enough for me).

Repo here:

https://github.com/acornejo/bootstrap-nav-wizard

Demo here:

http://acornejo.github.io/bootstrap-nav-wizard/