HTML

  1. <div id="rootwizard">
  2. <ul>
  3. <li><a href="#tab1" data-toggle="tab"><span class="label">1</span> First</a></li>
  4. <li><a href="#tab2" data-toggle="tab"><span class="label">2</span> Second</a></li>
  5. <li><a href="#tab3" data-toggle="tab"><span class="label">3</span> Third</a></li>
  6. <li><a href="#tab4" data-toggle="tab"><span class="label">4</span> Forth</a></li>
  7. <li><a href="#tab5" data-toggle="tab"><span class="label">5</span> Fifth</a></li>
  8. <li><a href="#tab6" data-toggle="tab"><span class="label">6</span> Sixth</a></li>
  9. <li><a href="#tab7" data-toggle="tab"><span class="label">7</span> Seventh</a></li>
  10. </ul>
  11. <div class="tab-content">
  12. <div class="tab-pane" id="tab1">
  13. 1
  14. </div>
  15. <div class="tab-pane" id="tab2">
  16. 2
  17. </div>
  18. <div class="tab-pane" id="tab3">
  19. 3
  20. </div>
  21. <div class="tab-pane" id="tab4">
  22. 4
  23. </div>
  24. <div class="tab-pane" id="tab5">
  25. 5
  26. </div>
  27. <div class="tab-pane" id="tab6">
  28. 6
  29. </div>
  30. <div class="tab-pane" id="tab7">
  31. 7
  32. </div>
  33. <ul class="pager wizard">
  34. <li class="previous first" style="display:none;"><a href="#">First</a></li>
  35. <li class="previous"><a href="#">Previous</a></li>
  36. <li class="next last" style="display:none;"><a href="#">Last</a></li>
  37. <li class="next"><a href="#">Next</a></li>
  38. </ul>
  39. </div>
  40. </div>

JS

  1. $(document).ready(function() {
  2. $('#rootwizard').bootstrapWizard({'tabClass': 'bwizard-steps'});
  3. });

CSS

  1. .bwizard-steps {
  2. display: inline-block;
  3. margin: 0; padding: 0;
  4. background: #fff }
  5. .bwizard-steps .active {
  6. color: #fff;
  7. background: #007ACC }
  8. .bwizard-steps .active:after {
  9. border-left-color: #007ACC }
  10. .bwizard-steps .active a {
  11. color: #fff;
  12. cursor: default }
  13. .bwizard-steps .label {
  14. position: relative;
  15. top: -1px;
  16. margin: 0 5px 0 0; padding: 1px 5px 2px }
  17. .bwizard-steps .active .label {
  18. background-color: #333;}
  19. .bwizard-steps li {
  20. display: inline-block; position: relative;
  21. margin-right: 5px;
  22. padding: 12px 17px 10px 30px;
  23. *display: inline;
  24. *padding-left: 17px;
  25. background: #efefef;
  26. line-height: 18px;
  27. list-style: none;
  28. zoom: 1; }
  29. .bwizard-steps li:first-child {
  30. padding-left: 12px;
  31. -moz-border-radius: 4px 0 0 4px;
  32. -webkit-border-radius: 4px 0 0 4px;
  33. border-radius: 4px 0 0 4px; }
  34. .bwizard-steps li:first-child:before {
  35. border: none }
  36. .bwizard-steps li:last-child {
  37. margin-right: 0;
  38. -moz-border-radius: 0 4px 4px 0;
  39. -webkit-border-radius: 0 4px 4px 0;
  40. border-radius: 0 4px 4px 0; }
  41. .bwizard-steps li:last-child:after {
  42. border: none }
  43. .bwizard-steps li:before {
  44. position: absolute;
  45. left: 0; top: 0;
  46. height: 0; width: 0;
  47. border-bottom: 20px inset transparent;
  48. border-left: 20px solid #fff;
  49. border-top: 20px inset transparent;
  50. content: "" }
  51. .bwizard-steps li:after {
  52. position: absolute;
  53. right: -20px; top: 0;
  54. height: 0; width: 0;
  55. border-bottom: 20px inset transparent;
  56. border-left: 20px solid #efefef;
  57. border-top: 20px inset transparent;
  58. content: "";
  59. z-index: 2; }
  60. .bwizard-steps a {
  61. color: #333 }
  62. .bwizard-steps a:hover {
  63. text-decoration: none }
  64. .bwizard-steps.clickable li:not(.active) {
  65. cursor: pointer }
  66. .bwizard-steps.clickable li:hover:not(.active) {
  67. background: #ccc }
  68. .bwizard-steps.clickable li:hover:not(.active):after {
  69. border-left-color: #ccc }
  70. .bwizard-steps.clickable li:hover:not(.active) a {
  71. color: #08c }
  72. @media (max-width: 480px) {
  73. /* badges only on small screens */
  74. .bwizard-steps li:after,
  75. .bwizard-steps li:before {
  76. border: none }
  77. .bwizard-steps li,
  78. .bwizard-steps li.active,
  79. .bwizard-steps li:first-child,
  80. .bwizard-steps li:last-child {
  81. margin-right: 0;
  82. padding: 0;
  83. background-color: transparent }
  84. }