Fuel UX wizard component not displaying correctly
fuelux, twitter-bootstrap, wizard
Solution
Okay I found the problem.
The tag
<html lang="en">
needs to include the fuelux class:
<html lang="en" class="fuelux">
Problem
I'm trying to use the fuel ux wizard component as shown in the example: http://exacttarget.github.io/fuelux/#wizard but it does not display correctly. My code is: ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/fuelux.css" rel="stylesheet"> <script src="js/jquery-1.9.1.js" type="text/javascript"></script> <script src="js/fuelux/require.js"></script> <script src="js/fuelux/all.js"></script> </head> <body> <div class="container"> <div id="workflowWizard" class="wizard"> <ul class="steps"> <li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li> <li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li> <li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li> <li data-target="#step4"><span class="badge">4</span>Step 4<span class="chevron"></span></li> <li data-target="#step5"><span class="badge">5</span>Step 5<span class="chevron"></span></li> </ul> <div class="actions"> <button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button> <button class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button> </div> <div class="step-content"> <div class="step-pane active" id="step1">This is step 1</div> <div class="step-pane" id="step2">This is step 2</div> <div class="step-pane" id="step3">This is step 3</div> <div class="step-pane" id="step4">This is step 4</div> <div class="step-pane" id="step5">This is step 5</div> </div> </div> </body> ``` Any ideas on what i'm missing?