Assets
En el costado lateral izquierdo de esta página podrás encontrar un menú con todos los filtros de asset.
Actualmente no hay ningun elemento seleccionado.
Campo de texto
                                
                                <input class="form-control input-text px-3" type="text" placeholder="Placeholder">
Input Buscador
                                
                                <div class="input-group mb-3 input-max-width-custom">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text search-icon-custom" id="basic-addon1"><i class="ti ti-search"></i></span>
                                    </div>
                                    <input type="text" class="form-control search-custom" placeholder="Buscar" aria-label="Username" aria-describedby="basic-addon1">
                                </div>
Recuadros colegios
                                    
                                        <div class="form-group">
                                        <textarea class="form-control px-2" id="#" placeholder="Nombre del incidente" style="height: 100px !important;border-radius:10px !important;" rows="3"></textarea>
                                        </div>
Input combobox
                                
                                    <div class="form-group">
                                        <select class="main-input">
                                        <option disabled selected>- Seleccione -</option>
                                        <option value="1" class="opt">Ejemplo 01</option>
                                        <option value="2" class="opt">Ejemplo 02</option>
                                        <option value="3" class="opt">Ejemplo 03 etc...</option>
                                        </select>
                                    </div>
Input de examinar
                                    
                                        <input class="form-control exam-button" type="file" id="formFile">
Toggle
Contenido Toggle 
                                    
                                    <label class="switch">
                                        <input type="checkbox">
                                        <span class="slider round"></span>
                                    </label>
                                    Contenido Toggle
Radio button
                                    
                                    <div class="form-check radio-custom ml-0 pl-0 mb-2">
                                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                                        <label class="form-check-label" for="flexRadioDefault1">
                                            Ingrese texto complementario
                                        </label>
                                    </div>
Checkbox
                                    
                                    <div class="form-check d-inline-none mx-3">
                                    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                        <label class="form-check-label" for="flexCheckDefault">
                                            Texto de prueba
                                        </label>
                                    </div>
Tabla normal
Ejemplo 01 Ejemplo 02 Acción Detalles
Data 01 Data 02 
                                
                                <table class="table table-striped">
                                    <thead>
                                    <tr>
                                    <th scope="col">Ejemplo 01</th>
                                    <th class="hidde-item" scope="col">Ejemplo 02</th>
                                    <th scope="col">Acción</th>
                                    <th class="btn-details" scope="col">Detalles</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                    <td>Data 01</td>
                                    <td class="hidde-item">Data 02</td>
                                    <td><a href="#"><i class="ti ti-edit"></i></a> <a href="#"><i class="ti ti-trash"></i></a></td>
                                    <td class="btn-details"><a href="#" class="table-icon-details" data-toggle="modal" data-target="#exampleModalCenter"><i class="ti ti-list-details"></i></a></td>
                                    </tr>
                                    </tbody>
                                </table>
Tabla avanzada
- - - - -
- - - - Detalles
- - - - - - - -
- - - - - - - - 
                                    
                                    <table class="table table-striped tbl-custom">
                                            <thead>
                                            <tr> 
                                            <th class="hidde-item" rowspan="2">-</th> 
                                            <th class="bd-left bg-tr-final align-middle text-center" rowspan="2">-</th> 
                                            <th class="hidde-item bd-left bg-tr-final align-middle text-center" rowspan="2">-</th> 
                                            <th class="hidde-item bd-left bg-tr-notas text-center" colspan="4">-</th>
                                            <th class="hidde-item bd-left bg-tr-final align-middle text-center" rowspan="2">-</th> 
                                            </tr> 
                                            <tr>
                                            <th class="hidde-item text-center" scope="col">-</th>
                                            <th class="hidde-item text-center" scope="col">-</th>
                                            <th class="hidde-item text-center" scope="col">-</th>
                                            <th class="hidde-item text-center" scope="col">-</th>
                                            <th class="btn-details" scope="col">Detalles</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                            <td class="hidde-item text-center">-</td>
                                            <td class="text-center">-</td>
                                            <td class="hidde-item text-center">-</td>
                                            <td class="hidde-item text-center">-</td>
                                            <td class="hidde-item text-center">-</td>
                                            <td class="hidde-item text-center">-</td>
                                            <td class="hidde-item text-center">-</td>
                                            <td class="hidde-item text-center">-</td>
                                            <td class="btn-details"><a href="#" class="table-icon-details" data-toggle="modal" data-target="#exampleModalCenter"><i class="ti ti-list-details"></i></a></td>
                                            </tr>
                                            <tr class="brd-top"> 
                                            <th class="hidde-item text-center bgceldas" scope="col">-</th>
                                            <th class="hidde-item text-center bgceldas" scope="col">-</th>
                                            <th class="hidde-item text-center bgceldas" scope="col">-</th>
                                            <th class="hidde-item text-center bgceldas" scope="col">-</th>
                                            <th class="hidde-item text-center bgceldas" scope="col">-</th>
                                            <th class="hidde-item text-center bgceldas" scope="col">-</th>
                                            <th class="hidde-item text-center bgceldas" scope="col">-</th>
                                            <th class="hidde-item text-center bgceldas" scope="col">-</th>
                                            </tr> 
                                            </tbody>
                                        </table>
Botón aceptar
Aceptar
 
                                        
                                        <a href="#"><div class="btn-modal-aceptar mx-auto">Boton</div></a>
Botón anular
Anular
 
                                        
                                        <a href="#"><div class="btn-modal-anular mx-auto">Botón</div></a>
Botón cancelar
Cancelar
 
                                        
                                        <a href="#"><div class="btn-modal-cerrar mx-auto">Botón</div></a>
Botón sólo para tablas
Importar
                                        
                                        <div class="btn-celdas">Importar</div></a>
Botón Dropdown
Opción 01 Opción 02 Opción 03 Opción 04 
                                    
                                    <button class="btn-superior" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="ti ti-menu-2"></i> <div class="btn-acciones">Acciones</div>
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                        <a class="dropdown-item" href="#"><i class="ti ti-accessible"></i> Opción 01</a>
                                        <a class="dropdown-item" href="#"><i class="ti ti-accessible"></i> Opción 02</a>
                                        <a class="dropdown-item" href="#"><i class="ti ti-accessible"></i> Opción 03</a>
                                        <a class="dropdown-item" href="#"><i class="ti ti-accessible"></i> Opción 04</a>
                                    </div>
Menu superior motivación
Opciones
 
                                    
                                    <a href="#">
                                    <div class="cube-menu">
                                        <i class="ti ti-eye"></i>
                                        <div class="txt-cube-menu">Ver</div>
                                    </div>
                                    </a>
Paginador
                                
                                <div class="col-6 col-sm-3 col-lg-2 mx-auto text-center mt-3">
                                        <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>
Step
                                    
                                    <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>
Modal
Esto es un modal, desea salir?
Aceptar
Cerrar
 
                                    
                                    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                        <div class="modal-dialog modal-cs modal-dialog-centered mx-auto" role="document">
                            <div class="modal-content">
                            <a href="#" data-dismiss="modal"><div class="btn-cerrar-mdlb" data-dismiss="modal"><i class="ti ti-x"></i></div></a>
                            <div class="modal-header">
                                <h5 class="modal-title mx-auto" id="exampleModalLongTitle">Titulo</h5>
                            </div>
                            <div class="modal-body">
                            <div class="col-12 px-0">
                                <div class="row">
                                    Texto
                                </div>
                            </div>
                            <div class="modal-footer pb-0 modal-align">
                                <div class="row">
                                    <div class="col-6 text-center"><a href="#" data-dismiss="modal"><button type="button" class="btn-modal-aceptar btn-width mx-3">Enviar</button></a></div>
                                    <div class="col-6 text-center"><a href="#" data-dismiss="modal"><button type="button" class="btn-modal-cerrar btn-width mx-3" data-dismiss="modal">Limpiar</button></a></div>
                                </div>
                            </div>
                                </div>
                            </div>
                        </div>
Tab
Tab 01
Tab 02 
                     
                     <div class="col-lg-12 px-0">
                     <ul class="nav nav-tabs mt-custom-top" id="myTab" role="tablist">
                        <li class="nav-item nav-reorder">
                            <a class="tab-custom nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Tab 01</a>
                        </li>
                        <li class="nav-item nav-reorder">
                            <a class="tab-custom nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Tab 02</a>
                        </li>
                     </ul>
                     <div class="tab-content bg-tab" id="myTabContent">
                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                Tab 01
                        </div>
                        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                Tab 02
                        </div>
                     </div>
                     </div>
Text área
AQUI LA IMAGEN
San Francisco de La Florida
Alumnos
213
N° Alumnos promedio
250
Promedio Global
6.2
 
                                
                                <a class="div-colegio" href="niveles.php">
                                    <div class="col-12 div-color p-3">
                                        <div class="row">
                                            <div class="col-12 text-center my-3">
                                                <img class="logo-colegio" src="../images/logosanfrancisco.png">
                                            </div>
                                            <div class="col-12">
                                                <div class="row">
                                                    <div class="col-12 my-2 text-center titulo-colegios">San Francisco de La Florida</div>
                                                    <div class="col-4 small-text text-center p-0">Alumnos
                                                        <div class="col-12 bold-font numeros-notas text-center">213</div>
                                                    </div>
                                                    <div class="col-4 small-text text-center p-0">N° Alumnos promedio
                                                        <div class="col-12 bold-font numeros-notas text-center">250</div>
                                                    </div>
                                                    <div class="col-4 small-text text-center p-0">Promedio Global
                                                        <div class="col-12 bold-font numeros-notas text-center">6.2</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
Barra de progreso
25%
                                
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
                                    </div>
Estrellas de evaluación
                                
                                <i class="star ti ti-star-filled"></i><i class="star ti ti-star-filled"></i><i class="star ti ti-star-filled"></i><i class="star ti ti-star"></i><i class="star ti ti-star"></i>
Acordéon
Contenido
Contenido 
                                
                                    <div id="accordion">
                                        <div class="card">
                                            <div class="card-header" id="headingOne">
                                            <h5 class="mb-0">
                                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                <i class="ti ti-chevron-right"></i> Acordeón 01
                                                </button>
                                            </h5>
                                            </div>
                                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                                            <div class="card-body">
                                                Contenido
                                            </div>
                                            </div>
                                        </div>
                                        <div class="card">
                                            <div class="card-header" id="headingTwo">
                                            <h5 class="mb-0">
                                                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                                <i class="ti ti-chevron-right"></i> Acordeón 02
                                                </button>
                                            </h5>
                                            </div>
                                            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                                            <div class="card-body">
                                                Contenido
                                            </div>
                                            </div>
                                        </div>
                                        <div class="card">
                                            <div class="card-header" id="headingThree">
                                            <h5 class="mb-0">
                                                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                                <i class="ti ti-chevron-right"></i> Acordeón 03
                                                </button>
                                            </h5>
                                            </div>
                                            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                                            <div class="card-body">
                                                Contenido
                                            </div>
                                            </div>
                                        </div>
                                    </div>