<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>