<div class="col-12 col-lg-4 my-3">
            <div class="col-12 bdcomponent text-center">
                <div class="desc mb-3">Step</div>
                <div class="col-12">
                    <div id="multi-step-form-container">
                        <!-- Form Steps / Progress Bar -->
                        <ul class="col-12 col-lg-8 form-stepper form-stepper-horizontal text-center mx-auto pl-0">
                            <!-- Step 1 -->
                            <li class="form-stepper-active text-center form-stepper-list" step="1">
                                <a class="mx-2">
                                    <span class="form-stepper-circle">
                                        <span>1</span>
                                    </span>
                                    <div class="label">Paso 01</div>
                                </a>
                            </li>
                            <!-- Step 2 -->
                            <li class="form-stepper-unfinished text-center form-stepper-list" step="2">
                                <a class="mx-2">
                                    <span class="form-stepper-circle text-muted">
                                        <span>2</span>
                                    </span>
                                    <div class="label text-muted">Paso 02</div>
                                </a>
                            </li>
                            <!-- Step 3 -->
                            <li class="form-stepper-unfinished text-center form-stepper-list" step="3">
                                <a class="mx-2">
                                    <span class="form-stepper-circle text-muted">
                                        <span>3</span>
                                    </span>
                                    <div class="label text-muted">Paso 03</div>
                                </a>
                            </li>
                            <!-- Step 4 -->
                            <li class="form-stepper-unfinished text-center form-stepper-list" step="4">
                                <a class="mx-2">
                                    <span class="form-stepper-circle text-muted">
                                        <span>4</span>
                                    </span>
                                    <div class="label text-muted">Paso 04</div>
                                </a>
                            </li>
                            <!-- Step 5 -->
                            <li class="form-stepper-unfinished text-center form-stepper-list" step="5">
                                <a class="mx-2">
                                    <span class="form-stepper-circle text-muted">
                                        <span>5</span>
                                    </span>
                                    <div class="label text-muted">Paso 05</div>
                                </a>
                            </li>
                        </ul>
                        <!-- Step Wise Form Content -->
                        <form id="userAccountSetupForm" name="userAccountSetupForm" enctype="multipart/form-data" method="POST">
                            <!-- Step 1 Content -->
                            <section id="step-1" class="form-step">
                                <div class="font-normal">Título 01</div>
                                <!-- Step 1 input fields -->
                                <div class="mt-3">
                                    <div class="col-12">
                                        Sección 01
                                    </div>
                                </div>
                                <div class="mt-3 text-center">
                                    <button class="button btn-navigate-form-step mx-3" type="button" step_number="2">Siguente <i class="ti ti-chevron-right"></i></button>
                                </div>
                            </section>
                            <!-- Step 2 Content, default hidden on page load. -->
                            <section id="step-2" class="form-step d-none">
                                <div class="font-normal">Título 02</div>
                                <!-- Step 2 input fields -->
                                    <div class="mt-3">
                                        <div class="col-12">
                                            Sección 02
                                        </div>
                                    </div>
                                    <button class="button btn-navigate-form-step mx-3" type="button" step_number="1"><i class="ti ti-chevron-left"></i> Anterior</button>
                                    <button class="button btn-navigate-form-step mx-3" type="button" step_number="3">Siguente <i class="ti ti-chevron-right"></i></button>
                                </div>
                            </section>
                            <!-- Step 3 Content, default hidden on page load. -->
                            <section id="step-3" class="form-step d-none">
                                <div class="font-normal">Título 03</div>
                                <!-- Step 3 input fields -->
                                <div class="mt-3">
                                    <div class="col-12">
                                        Sección 03
                                    </div>
                                </div>
                                <div class="mt-3 text-center">
                                    <button class="button btn-navigate-form-step mx-3" type="button" step_number="2"><i class="ti ti-chevron-left"></i> Anterior</button>
                                    <button class="button btn-navigate-form-step mx-3" type="button" step_number="4">Siguente <i class="ti ti-chevron-right"></i></button>
                                </div>
                            </section>
                            <!-- Step 4 Content, default hidden on page load. -->
                            <section id="step-4" class="form-step d-none">
                                <div class="font-normal">Título 04</div>
                                <!-- Step 4 input fields -->
                                <div class="mt-3">
                                    <div class="col-12">
                                        Sección 04
                                    </div>
                                </div>
                                <div class="mt-3 text-center">
                                    <button class="button btn-navigate-form-step mx-3" type="button" step_number="3"><i class="ti ti-chevron-left"></i> Anterior</button>
                                    <button class="button btn-navigate-form-step mx-3" type="button" step_number="5">Siguente <i class="ti ti-chevron-right"></i></button>
                                </div>
                            </section>
                            <!-- Step 5 Content, default hidden on page load. -->
                            <section id="step-5" class="form-step d-none">
                                <div class="font-normal">Título 05</div>
                                <!-- Step 4 input fields -->
                                <div class="mt-3">
                                    <div class="col-12">
                                        Sección 05
                                    </div>
                                </div>
                                <div class="mt-3 text-center">
                                    <button class="button btn-navigate-form-step mx-3" type="button" step_number="4"><i class="ti ti-chevron-left"></i> Anterior</button>
                                    <button class="button submit-btn mx-3" type="button" data-toggle="modal" data-target="#exampleModal"><i class="ti ti-checklist"></i> Finalizar</button>
                                </div>
                            </section>
                        </form>
                    </div>        
                </div>
                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title title-modal-custom" id="exampleModalLabel">Finalizar proceso de matrícula</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                                </button>
                            </div>
                            <div class="modal-body text-center">
                                Estoy seguro de matricular al alumn@:<br><span class="bold-font">Sebastían Ignacio Barra Calderón</span>
                            </div>
                            <div class="text-center">
                                <a href="#" data-dismiss="modal"><button type="button" class="btn-modal-cerrar mx-3" data-dismiss="modal">Cancelar</button></a>
                                <a href="#" data-dismiss="modal"><button type="button" class="btn-modal-aceptar mx-3">Aceptar</button></a>
                            </div>
                            </div>
                        </div>
                    </div>
                    
                

                    
                    <div class="col-12 col-lg-2 mx-auto text-center">
                            <nav aria-label="Page navigation example">
                                <ul class="pagination">
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true">«</span>
                                    <span class="sr-only">Previous</span>
                                    </a>
                                </li>
                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true">»</span>
                                    <span class="sr-only">Next</span>
                                    </a>
                                </li>
                                </ul>
                            </nav>
                        </div>