Content for step 3
<div class="clr-wizard main-container">
<div class="modal">
<div class="modal-dialog modal-xl" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<div class="content-container">
<nav class="nav-panel sidenav">
<div class="text-light">
<div class="wizard-title">
Wizard Title
</div>
</div>
<ol class="nav navList" role="tablist">
<li class="clr-nav-link complete" role="presentation"
id="clr-tabs-0-tab-0" aria-selected="true"
aria-controls="clr-tabs-0-content-0">
<button class="btn btn-link nav-link" type="button">
Step 1
</button>
</li>
<li class="clr-nav-link skipped" role="presentation"
id="clr-tabs-0-tab-1" aria-selected="true"
aria-controls="clr-tabs-0-content-1">
<button class="btn btn-link nav-link" type="button">
Step 2
</button>
</li>
<li class="clr-nav-link active" role="presentation"
id="clr-tabs-0-tab-2" aria-selected="true"
aria-controls="clr-tabs-0-content-2">
<button class="btn btn-link nav-link" type="button">
Step 3
</button>
</li>
<li class="clr-nav-link disabled" role="presentation"
id="clr-tabs-0-tab-3" aria-selected="true"
aria-controls="clr-tabs-0-content-3">
<button class="btn btn-link nav-link" type="button">
Step 4
</button>
</li>
</ol>
</nav>
<main class="content-area">
<button aria-label="Close" class="close" type="button">
<span aria-hidden="true">×</span>
</button>
<div class="clr-nav-content" role="tabpanel" id="clr-tabs-0-content-0"
aria-hidden="true" aria-labelledby="clr-tabs-0-tab-0" data-hidden="true">
<section>
<label class="text-light">Title for step 1</label>
<div class="content-wrapper">Content for step 1</div>
</section>
</div>
<div class="clr-nav-content" role="tabpanel" id="clr-tabs-0-content-1"
aria-hidden="true" aria-labelledby="clr-tabs-0-tab-1" data-hidden="true">
<section>
<label class="text-light">Title for step 2</label>
<div class="content-wrapper">Content for step 2</div>
</section>
</div>
<div class="clr-nav-content active" role="tabpanel" id="clr-tabs-0-content-2"
aria-hidden="false" aria-labelledby="clr-tabs-0-tab-2" data-hidden="false">
<section>
<label class="text-light">Title for step 3</label>
<div class="content-wrapper">Content for step 3</div>
</section>
</div>
<div class="clr-nav-content" role="tabpanel" id="clr-tabs-0-content-3"
aria-hidden="true" aria-labelledby="clr-tabs-0-tab-3" data-hidden="true">
<section>
<label class="text-light">Title for step 4</label>
<div class="content-wrapper">Content for step 4</div>
</section>
</div>
</main>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-link">Cancel</button>
<button class="btn btn-outline">Back</button>
<button class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
<div class="modal-backdrop" aria-hidden="true"></div>
</div>