---
categories: [Widgets]
layout: page
title: Wizard
resource: true
url-js-extra: '//rawgit.com/jonmiles/bootstrap-treeview/v1.2.0/dist/bootstrap-treeview.min.js'
---
<h2>Initializing</h2>
<button class="btn btn-default" data-toggle="modal" data-target="#initializing">Launch wizard showing initialization
  state
</button>
<div class="example-pf "><!-- for testing/dev; not for production -->
  <div class="modal" id="initializing" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg wizard-pf">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <dt class="modal-title">Wizard Title</dt>
        </div>
        <div class="modal-body wizard-pf-body clearfix">
          <div class="wizard-pf-steps hidden">
            <ul class="wizard-pf-steps-indicator">
              <li>
                <a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
              </li>
              <li>
                <a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
              </li>
              <li>
                <a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
              </li>
            </ul>
          </div>

          <div class="wizard-pf-sidebar hidden">
            <ul class="list-group">
              <li class="list-group-item active">
                <a>
                  <span class="wizard-pf-substep-number">1A.</span>
                  <span class="wizard-pf-substep-title">General</span>
                </a>
              </li>
              <li class="list-group-item">
                <a>
                  <span class="wizard-pf-substep-number">1B.</span>
                  <span class="wizard-pf-substep-title">Masters &amp; Nodes</span>
                </a>
              </li>
              <li class="list-group-item">
                <a>
                  <span class="wizard-pf-substep-number">1C.</span>
                  <span class="wizard-pf-substep-title">CDN Channel</span>
                </a>
              </li>
            </ul>
          </div><!-- /.wizard-pf-sidebar -->

          <div class="wizard-pf-main">
            <div class="blank-slate-pf">
              <div class="spinner spinner-lg blank-slate-pf-icon"></div>
              <h3 class="blank-slate-pf-main-action">Loading Wizard</h3>
              <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
                vivamus, lorem sociosqu eget nunc amet. </p>
            </div>

          </div>

        </div><!-- /.wizard-pf-body -->

        <!-- TODO: disable buttons -->
        <div class="modal-footer wizard-pf-footer">
          <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-default disabled" data-dismiss="modal">
            <span class="i fa fa-angle-left"></span>
            Back
          </button>
          <button type="button" class="btn btn-primary disabled" data-dismiss="modal">
            Next
            <span class="i fa fa-angle-right"></span>
          </button>
        </div><!-- /.wizard-pf-footer -->

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</div><!-- /.example-pf (not for production) -->

<h2>First Step</h2>
<button class="btn btn-default" data-toggle="modal" data-target="#firstStep">Launch wizard showing first step</button>
<div class="example-pf "><!-- for testing/dev; not for production -->
  <div class="modal " id="firstStep" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg wizard-pf">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
          <dt class="modal-title">Wizard Title</dt>
        </div>
        <div class="modal-body wizard-pf-body clearfix">
          <div class="wizard-pf-steps">
            <ul class="wizard-pf-steps-indicator">
              <li class="active">
                <a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
              </li>
              <li>
                <a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
              </li>
              <li>
                <a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
              </li>
            </ul>
          </div>

          <div class="wizard-pf-sidebar">
            <ul class="list-group">
              <li class="list-group-item active clearfix">
                <a>
                  <span class="wizard-pf-substep-number">1A.</span>
                  <span class="wizard-pf-substep-title">Details</span>
                </a>
              </li>
              <li class="list-group-item">
                <a>
                  <span class="wizard-pf-substep-number">1B.</span>
                  <span class="wizard-pf-substep-title">Progress</span>
                </a>
              </li>
          </div><!-- /.wizard-pf-sidebar -->

          <div class="wizard-pf-main">
            <div>
              <form class="form-horizontal">
                <div class="form-group required">
                  <label class="col-sm-2 control-label" for="textInput-markup">Name</label>
                  <div class="col-sm-10">
                    <input type="text" id="textInput-markup" class="form-control">
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-2 control-label" for="descriptionInput-markup">Description (Optional)</label>
                  <div class="col-sm-10">
                    <textarea id="descriptionInput-markup" class="form-control" rows="2"></textarea>
                  </div>
                </div>
              </form>
            </div>
          </div><!-- /.wizard-pf-main -->

        </div><!-- /.wizard-pf-body -->

        <div class="modal-footer wizard-pf-footer">
          <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-default disabled" data-dismiss="modal">
            <span class="i fa fa-angle-left"></span>
            Back
          </button>
          <button type="button" class="btn btn-primary " data-dismiss="modal">
            Next
            <span class="i fa fa-angle-right"></span>
          </button>

        </div><!-- /.wizard-pf-footer -->

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</div><!-- /.example-pf (not for production) -->

<h2>Review Step</h2>
<button class="btn btn-default" data-toggle="modal" data-target="#secondStep">Launch wizard showing review step</button>
<div class="example-pf "><!-- for testing/dev; not for production -->
  <div class="modal " id="secondStep" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg wizard-pf">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
          <dt class="modal-title">Wizard Title</dt>
        </div>
        <div class="modal-body wizard-pf-body clearfix">
          <div class="wizard-pf-steps">
            <ul class="wizard-pf-steps-indicator">
              <li class="viewed-pf">
                <a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
              </li>
              <li class="viewed-pf">
                <a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
              </li>
              <li class="active">
                <a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
              </li>
            </ul>
          </div>

          <div class="wizard-pf-sidebar">
            <ul class="list-group">
              <li class="list-group-item">
                <a>
                  <span class="wizard-pf-substep-number">3A.</span>
                  <span class="wizard-pf-substep-title">Details</span>
                </a>
              </li>
              <li class="list-group-item active">
                <a>
                  <span class="wizard-pf-substep-number">3B.</span>
                  <span class="wizard-pf-substep-title">Progress</span>
                </a>
              </li>
            </ul>
          </div><!-- /.wizard-pf-sidebar -->

          <div class="wizard-pf-main">
            <div>
              <div class="wizard-pf-review-page">
                <div id="treeview1"></div>
                <script>
                  $(function() {
                    var defaultData = [
                      {
                        text: 'First Step',
                        state: {
                          expanded: false
                        },
                        nodes: [
                          {
                            text: '1A: Details listed here'
                          },
                          {
                            text: '1B: Progress listed here'}
                        ]
                      },
                      {
                        text: 'Second Step',
                        nodes: [
                          {
                            text: '2A: Details listed here'
                          },
                          {
                            text: '2B: Progress listed here'}
                        ]
                      }
                    ];
                    $('#treeview1').treeview({
                      collapseIcon: "fa fa-angle-down",
                      data: defaultData,
                      expandIcon: "fa fa-angle-right",
                      showBorder: false
                    });
                  });
                </script>

              </div>
            </div>
          </div><!-- /.wizard-pf-main -->

        </div><!-- /.wizard-pf-body -->

        <div class="modal-footer wizard-pf-footer">
          <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">
            <span class="i fa fa-angle-left"></span>
            Back
          </button>
          <button type="button" class="btn btn-primary " data-dismiss="modal">
            Next
            <span class="i fa fa-angle-right"></span>
          </button>

        </div><!-- /.wizard-pf-footer -->

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</div><!-- /.example-pf (not for production) -->

<h2>Last Step</h2>
<button class="btn btn-default" data-toggle="modal" data-target="#done">Launch wizard showing finalizing
  state
</button>
<div class="example-pf "><!-- for testing/dev; not for production -->
  <div class="modal" id="done" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg wizard-pf">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <dt class="modal-title">Wizard Title</dt>
        </div>
        <div class="modal-body wizard-pf-body clearfix">
          <div class="wizard-pf-steps">
            <ul class="wizard-pf-steps-indicator">
              <li class="viewed-pf">
                <a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
              </li>
              <li class="viewed-pf">
                <a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
              </li>
              <li class="active">
                <a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
              </li>
            </ul>
          </div>

          <div class="wizard-pf-sidebar">
            <ul class="list-group">
              <li class="list-group-item">
                <a>
                  <span class="wizard-pf-substep-number">3A.</span>
                  <span class="wizard-pf-substep-title">Details</span>
                </a>
              </li>
              <li class="list-group-item active">
                <a>
                  <span class="wizard-pf-substep-number">3B.</span>
                  <span class="wizard-pf-substep-title">Progress</span>
                </a>
              </li>
            </ul>
          </div><!-- /.wizard-pf-sidebar -->

          <div class="wizard-pf-main">
            <div class="blank-slate-pf">
              <div class="spinner spinner-lg blank-slate-pf-icon"></div>
              <h3 class="blank-slate-pf-main-action">Deployment in progress</h3>
              <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
                vivamus, lorem sociosqu eget nunc amet. </p>
            </div>

          </div>

        </div><!-- /.wizard-pf-body -->

        <!-- TODO: disable buttons -->
        <div class="modal-footer wizard-pf-footer">
          <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-default disabled" data-dismiss="modal">
            <span class="i fa fa-angle-left"></span>
            Back
          </button>
          <button type="button" class="btn btn-primary disabled" data-dismiss="modal">
            Deploy
            <span class="i fa fa-angle-right"></span>
          </button>
        </div><!-- /.wizard-pf-footer -->

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</div><!-- /.example-pf (not for production) -->

<h2>Completed</h2>
<button class="btn btn-default" data-toggle="modal" data-target="#finalizing">Launch wizard showing finalizing
  state
</button>
<div class="example-pf "><!-- for testing/dev; not for production -->
  <div class="modal" id="finalizing" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg wizard-pf">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <dt class="modal-title">Wizard Title</dt>
        </div>
        <div class="modal-body wizard-pf-body clearfix">
          <div class="wizard-pf-steps">
            <ul class="wizard-pf-steps-indicator">
              <li class="viewed-pf">
                <a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
              </li>
              <li class="viewed-pf">
                <a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
              </li>
              <li class="active">
                <a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
              </li>
            </ul>
          </div>

          <div class="wizard-pf-sidebar">
            <ul class="list-group">
              <li class="list-group-item">
                <a>
                  <span class="wizard-pf-substep-number">3A.</span>
                  <span class="wizard-pf-substep-title">Details</span>
                </a>
              </li>
              <li class="list-group-item active">
                <a>
                  <span class="wizard-pf-substep-number">3B.</span>
                  <span class="wizard-pf-substep-title">Progress</span>
                </a>
              </li>
            </ul>
          </div><!-- /.wizard-pf-sidebar -->

          <div class="wizard-pf-main">
            <div class="blank-slate-pf">
              <div class="wizard-pf-success-icon"><span class="glyphicon glyphicon-ok-circle"></span></div>
              <h3 class="blank-slate-pf-main-action">Deployment was successful</h3>
              <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
                vivamus, lorem sociosqu eget nunc amet. </p>
              <button type="button" class="btn btn-lg btn-primary">
                View Deployment
              </button>

            </div>

          </div>

        </div><!-- /.wizard-pf-body -->

        <!-- TODO: disable buttons -->
        <div class="modal-footer wizard-pf-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            <span class="i fa fa-angle-left"></span>
            Back
          </button>
          <button type="button" class="btn btn-primary" data-dismiss="modal">
            Close
          </button>
        </div><!-- /.wizard-pf-footer -->

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</div><!-- /.example-pf (not for production) -->