<div class="crmb-wizard">

  <div class="panel">
    <div class="panel-body">
      <ul class="nav nav-pills">
        <li ng-repeat="step in steps" ng-class="{'active':step.selected, 'disabled': !crmbWizardCtrl.isSelectable(step)}" class="{{crmbWizardNavClass}}">
          <a href="" ng-click="crmbWizardCtrl.isSelectable(step) && crmbWizardCtrl.select(step)">
            {{crmbWizardCtrl.iconFor($index)}}
            {{1 + $index}}.
            {{step.$parent.$eval(step.crmTitle)}}</a>
          <!-- Don't know a good way to localize text like "1. Title" -->
        </li>
      </ul>
    </div>
  </div>

  <div class="panel">
    <div class="panel-body">
      <div class="crmb-wizard-body" ng-transclude/>
    </div>
  </div>

  <div class="panel">
    <div class="panel-body">
      <div class="row">
        <div class="col-md-6" style="text-align: left">
          <div class="crmb-wizard-button-left"></div>
        </div>
        <div class="col-md-6" style="text-align: right">
          <div class="crmb-wizard-button-right"></div>
        </div>
      </div>
    </div>
  </div>

</div>

<div class="crmb-wizard">

  <div class="panel crmb-wizard-title">
    <div class="panel-body">
      <ul class="nav nav-pills">
        <li ng-repeat="step in steps" ng-class="{'active':step.selected, 'disabled': !crmbWizardCtrl.isSelectable(step)}" class="{{crmbWizardNavClass}}">
          <a href="" ng-click="crmbWizardCtrl.isSelectable(step) && crmbWizardCtrl.select(step)">
            <span class="crmb-wizard-number"> {{1 + $index}} </span>
            {{step.$parent.$eval(step.crmTitle)}}</a>
          <!-- Don't know a good way to localize text like "1. Title" -->
        </li>
      </ul>
    </div>
  </div>

  <div class="panel crmb-wizard-body">
    <div class="panel-body">
      <div class="crmb-wizard-body" ng-transclude/>
    </div>
  </div>

  <div class="panel crmb-wizard-footer">
    <div class="panel-body">
      <div class="row">
        <div class="col-md-6" style="text-align: left">
          <div class="crmb-wizard-button-left"></div>
        </div>
        <div class="col-md-6" style="text-align: right">
          <div class="crmb-wizard-button-right"></div>
        </div>
      </div>
    </div>
  </div>

</div>

Add classes to different wizzard panels for styling - add wrapping div around the number to match the design
HW-259: Add classes to different wizzard panels for styling - add wrapping div around the number to match the design
