gentelella

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <link rel="stylesheet" href="/gentelella/assets/css/just-the-docs-default.css"> <link rel="stylesheet" href="/gentelella/assets/css/just-the-docs-head-nav.css" id="jtd-head-nav-stylesheet"> <style id="jtd-nav-activation"> .site-nav > ul.nav-list:first-child > li:not(:nth-child(3)) > a, .site-nav > ul.nav-list:first-child > li > ul > li a { background-image: none; } .site-nav > ul.nav-list:not(:first-child) a, .site-nav li.external a { background-image: none; } .site-nav > ul.nav-list:first-child > li:nth-child(3) > a { font-weight: 600; text-decoration: none; }.site-nav > ul.nav-list:first-child > li:nth-child(3) > button svg { transform: rotate(-90deg); }.site-nav > ul.nav-list:first-child > li.nav-list-item:nth-child(3) > ul.nav-list { display: block; } </style> <script src="/gentelella/assets/js/vendor/lunr.min.js"></script> <script src="/gentelella/assets/js/just-the-docs.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="/gentelella/favicon.ico" type="image/x-icon">  <title>Configuration | Gentelella Admin Template</title> <meta name="generator" content="Jekyll v3.9.5" /> <meta property="og:title" content="Configuration" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations" /> <meta property="og:description" content="Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations" /> <link rel="canonical" href="http://localhost:4000/gentelella/configuration/" /> <meta property="og:url" content="http://localhost:4000/gentelella/configuration/" /> <meta property="og:site_name" content="Gentelella Admin Template" /> <meta property="og:image" content="http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg" /> <meta property="twitter:title" content="Configuration" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","description":"Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations","headline":"Configuration","image":"http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg","url":"http://localhost:4000/gentelella/configuration/"}</script>  </head> <body> <a class="skip-to-main" href="#main-content">Skip to main content</a> <svg xmlns="http://www.w3.org/2000/svg" class="d-none"> <symbol id="svg-link" viewBox="0 0 24 24"> <title>Link</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"> <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> </svg> </symbol> <symbol id="svg-menu" viewBox="0 0 24 24"> <title>Menu</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"> <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line> </svg> </symbol> <symbol id="svg-arrow-right" viewBox="0 0 24 24"> <title>Expand</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"> <polyline points="9 18 15 12 9 6"></polyline> </svg> </symbol>  <symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"> <title id="svg-external-link-title">(external link)</title> <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line> </symbol> <symbol id="svg-doc" viewBox="0 0 24 24"> <title>Document</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"> <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline> </svg> </symbol> <symbol id="svg-search" viewBox="0 0 24 24"> <title>Search</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"> <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </symbol>  <symbol id="svg-copy" viewBox="0 0 16 16"> <title>Copy</title> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"> <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/> <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/> </svg> </symbol> <symbol id="svg-copied" viewBox="0 0 16 16"> <title>Copied</title> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16"> <path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/> <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/> </svg> </symbol> </svg> <div class="side-bar"> <div class="site-header" role="banner"> <a href="/gentelella/" class="site-title lh-tight"> Gentelella Admin Template </a> <button id="menu-button" class="site-button btn-reset" aria-label="Toggle menu" aria-pressed="false"> <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg> </button> </div> <nav aria-label="Main" id="site-nav" class="site-nav"> <ul class="nav-list"><li class="nav-list-item"><a href="/gentelella/" class="nav-list-link">Gentelella Admin Template Documentation</a></li><li class="nav-list-item"><a href="/gentelella/installation/" class="nav-list-link">Installation Guide</a></li><li class="nav-list-item"><a href="/gentelella/configuration/" class="nav-list-link">Configuration</a></li><li class="nav-list-item"><a href="/gentelella/components/" class="nav-list-link">Components Guide</a></li><li class="nav-list-item"><a href="/gentelella/performance/" class="nav-list-link">Performance Guide</a></li><li class="nav-list-item"><a href="/gentelella/deployment/" class="nav-list-link">Deployment Guide</a></li><li class="nav-list-item"><a href="/gentelella/customization/" class="nav-list-link">Customization Guide</a></li><li class="nav-list-item"><a href="/gentelella/api-integration/" class="nav-list-link">API Integration</a></li></ul> </nav> <footer class="site-footer"> This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll. </footer> </div> <div class="main" id="top"> <div id="main-header" class="main-header"> <div class="search" role="search"> <div class="search-input-wrap"> <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search Gentelella Admin Template" aria-label="Search Gentelella Admin Template" autocomplete="off"> <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label> </div> <div id="search-results" class="search-results"></div> </div> <nav aria-label="Auxiliary" class="aux-nav"> <ul class="aux-nav-list"> <li class="aux-nav-list-item"> <a href="//github.com/puikinsh/gentelella" class="site-button" > Gentelella on GitHub </a> </li> <li class="aux-nav-list-item"> <a href="//colorlib.com" class="site-button" > Colorlib </a> </li> </ul> </nav> </div> <div class="main-content-wrap"> <div id="main-content" class="main-content"> <main> <h1 class="no_toc" id="configuration-guide"> <a href="#configuration-guide" class="anchor-heading" aria-labelledby="configuration-guide"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Configuration Guide </h1> Complete guide to configuring and customizing Gentelella Admin Template <h2 class="no_toc text-delta" id="table-of-contents"> <a href="#table-of-contents" class="anchor-heading" aria-labelledby="table-of-contents"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Table of contents </h2> <ol id="markdown-toc"> <li><a href="#vite-configuration" id="markdown-toc-vite-configuration">Vite Configuration</a> <ol> <li><a href="#basic-configuration" id="markdown-toc-basic-configuration">Basic Configuration</a></li> <li><a href="#advanced-vite-options" id="markdown-toc-advanced-vite-options">Advanced Vite Options</a> <ol> <li><a href="#development-optimizations" id="markdown-toc-development-optimizations">Development Optimizations</a></li> <li><a href="#production-optimizations" id="markdown-toc-production-optimizations">Production Optimizations</a></li> </ol> </li> </ol> </li> <li><a href="#sass-configuration" id="markdown-toc-sass-configuration">SASS Configuration</a> <ol> <li><a href="#main-sass-file" id="markdown-toc-main-sass-file">Main SASS File</a></li> <li><a href="#bootstrap-customization" id="markdown-toc-bootstrap-customization">Bootstrap Customization</a></li> <li><a href="#custom-component-styles" id="markdown-toc-custom-component-styles">Custom Component Styles</a></li> </ol> </li> <li><a href="#module-configuration" id="markdown-toc-module-configuration">Module Configuration</a> <ol> <li><a href="#smart-loading-system" id="markdown-toc-smart-loading-system">Smart Loading System</a></li> <li><a href="#chart-module-configuration" id="markdown-toc-chart-module-configuration">Chart Module Configuration</a></li> <li><a href="#form-module-configuration" id="markdown-toc-form-module-configuration">Form Module Configuration</a></li> </ol> </li> <li><a href="#environment-variables" id="markdown-toc-environment-variables">Environment Variables</a> <ol> <li><a href="#development-environment" id="markdown-toc-development-environment">Development Environment</a></li> <li><a href="#production-environment" id="markdown-toc-production-environment">Production Environment</a></li> <li><a href="#using-environment-variables" id="markdown-toc-using-environment-variables">Using Environment Variables</a></li> </ol> </li> <li><a href="#performance-configuration" id="markdown-toc-performance-configuration">Performance Configuration</a> <ol> <li><a href="#bundle-optimization" id="markdown-toc-bundle-optimization">Bundle Optimization</a></li> <li><a href="#asset-optimization" id="markdown-toc-asset-optimization">Asset Optimization</a></li> </ol> </li> <li><a href="#advanced-configuration" id="markdown-toc-advanced-configuration">Advanced Configuration</a> <ol> <li><a href="#typescript-support" id="markdown-toc-typescript-support">TypeScript Support</a></li> <li><a href="#eslint-configuration" id="markdown-toc-eslint-configuration">ESLint Configuration</a></li> <li><a href="#prettier-configuration" id="markdown-toc-prettier-configuration">Prettier Configuration</a></li> </ol> </li> <li><a href="#next-steps" id="markdown-toc-next-steps">Next Steps</a></li> </ol><hr /> <h2 id="vite-configuration"> <a href="#vite-configuration" class="anchor-heading" aria-labelledby="vite-configuration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Vite Configuration </h2> <h3 id="basic-configuration"> <a href="#basic-configuration" class="anchor-heading" aria-labelledby="basic-configuration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Basic Configuration </h3> The <code class="language-plaintext highlighter-rouge">vite.config.js</code> file contains optimized settings for both development and production builds: <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>import { defineConfig } from 'vite'; import { resolve } from 'path'; export default defineConfig({ // Development server configuration server: { port: 3000, host: true, open: true }, // Build configuration build: { outDir: 'dist', assetsDir: 'assets', rollupOptions: { input: { // All 42 HTML files are configured as entry points 'index': 'production/index.html', 'index2': 'production/index2.html', 'index3': 'production/index3.html', 'form': 'production/form.html', 'form_advanced': 'production/form_advanced.html', 'tables': 'production/tables.html', 'charts': 'production/chartjs.html', // ... and 35 more pages }, output: { // Manual chunk splitting for optimal loading manualChunks: { 'vendor-core': ['bootstrap', '@popperjs/core'], 'vendor-charts': ['chart.js', 'morris.js'], 'vendor-forms': ['select2', 'tempus-dominus'], 'vendor-tables': ['datatables.net'], 'vendor-utils': ['dayjs', 'nprogress'] } } }, // Asset optimization assetsInlineLimit: 4096, minify: 'terser', terserOptions: { compress: { drop_console: true, drop_debugger: true } } } }); </code></pre></div></div> <h3 id="advanced-vite-options"> <a href="#advanced-vite-options" class="anchor-heading" aria-labelledby="advanced-vite-options"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Advanced Vite Options </h3> <h4 id="development-optimizations"> <a href="#development-optimizations" class="anchor-heading" aria-labelledby="development-optimizations"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Development Optimizations </h4> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>export default defineConfig({ server: { // Custom port port: 3001, // Enable HTTPS for local development https: true, // Proxy API requests proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } }, // Enable source maps in development css: { devSourcemap: true } }); </code></pre></div></div> <h4 id="production-optimizations"> <a href="#production-optimizations" class="anchor-heading" aria-labelledby="production-optimizations"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Production Optimizations </h4> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>export default defineConfig({ build: { // Target modern browsers for smaller bundles target: 'es2018', // Enable CSS code splitting cssCodeSplit: true, // Generate source maps for production debugging sourcemap: true, // Optimize chunk size chunkSizeWarningLimit: 1000 } }); </code></pre></div></div><hr /> <h2 id="sass-configuration"> <a href="#sass-configuration" class="anchor-heading" aria-labelledby="sass-configuration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> SASS Configuration </h2> <h3 id="main-sass-file"> <a href="#main-sass-file" class="anchor-heading" aria-labelledby="main-sass-file"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Main SASS File </h3> The <code class="language-plaintext highlighter-rouge">src/main.scss</code> file is the entry point for all styles: <div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Modern @use syntax (recommended) @use "bootstrap/scss/bootstrap"; @use "./scss/custom.scss"; // Legacy @import syntax (still supported) // @import "bootstrap/scss/bootstrap"; // @import "./scss/custom.scss"; </code></pre></div></div> <h3 id="bootstrap-customization"> <a href="#bootstrap-customization" class="anchor-heading" aria-labelledby="bootstrap-customization"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Bootstrap Customization </h3> Create <code class="language-plaintext highlighter-rouge">src/scss/bootstrap-custom.scss</code> to override Bootstrap variables: <div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Override Bootstrap variables BEFORE importing Bootstrap $primary: #73879C; $secondary: #6c757d; $success: #26B99A; $info: #3498DB; $warning: #F39C12; $danger: #E74C3C; // Typography $font-family-base: 'Roboto', 'Helvetica Neue', Arial, sans-serif; $font-size-base: 14px; $line-height-base: 1.5; // Sidebar customization $sidebar-width: 230px; $sidebar-bg: #2A3F54; $sidebar-text-color: #E7E7E7; // Import Bootstrap with your customizations @import "bootstrap/scss/bootstrap"; </code></pre></div></div> <h3 id="custom-component-styles"> <a href="#custom-component-styles" class="anchor-heading" aria-labelledby="custom-component-styles"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Custom Component Styles </h3> Create <code class="language-plaintext highlighter-rouge">src/scss/components/</code> directory for modular styles: <div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// src/scss/components/_dashboard.scss .dashboard-card { border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease-in-out; &:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .card-header { background: linear-gradient(135deg, $primary, darken($primary, 10%)); color: white; border-radius: 8px 8px 0 0; } } // src/scss/components/_sidebar.scss .sidebar { width: $sidebar-width; background-color: $sidebar-bg; .nav-link { color: $sidebar-text-color; padding: 12px 20px; border-radius: 4px; margin: 2px 10px; transition: all 0.3s ease; &:hover { background-color: rgba(255,255,255,0.1); color: white; } &.active { background-color: $primary; color: white; } } } </code></pre></div></div><hr /> <h2 id="module-configuration"> <a href="#module-configuration" class="anchor-heading" aria-labelledby="module-configuration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Module Configuration </h2> <h3 id="smart-loading-system"> <a href="#smart-loading-system" class="anchor-heading" aria-labelledby="smart-loading-system"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Smart Loading System </h3> Configure which modules load automatically vs. on-demand: <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// src/main-core.js - Always loaded essentials import 'bootstrap/dist/js/bootstrap.bundle.min.js'; import './js/custom.min.js'; // Initialize core functionality document.addEventListener('DOMContentLoaded', function() { // Initialize tooltips const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]'); const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl) ); // Initialize popovers const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]'); const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl) ); }); // Dynamic module loading export async function loadModule(moduleName) { try { switch(moduleName) { case 'charts': return await import('./modules/charts.js'); case 'forms': return await import('./modules/forms.js'); case 'tables': return await import('./modules/tables.js'); case 'dashboard': return await import('./modules/dashboard.js'); default: throw new Error(`Unknown module: ${moduleName}`); } } catch (error) { console.error(`Failed to load module ${moduleName}:`, error); return null; } } </code></pre></div></div> <h3 id="chart-module-configuration"> <a href="#chart-module-configuration" class="anchor-heading" aria-labelledby="chart-module-configuration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Chart Module Configuration </h3> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// src/modules/charts.js import Chart from 'chart.js/auto'; export const chartConfig = { // Default Chart.js configuration defaultOptions: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } }, scales: { y: { beginAtZero: true } } }, // Chart themes themes: { primary: { backgroundColor: 'rgba(115, 135, 156, 0.1)', borderColor: '#73879C', pointBackgroundColor: '#73879C' }, success: { backgroundColor: 'rgba(38, 185, 154, 0.1)', borderColor: '#26B99A', pointBackgroundColor: '#26B99A' } } }; export function initializeCharts() { // Auto-initialize charts on page load const chartElements = document.querySelectorAll('.chart-container canvas'); chartElements.forEach(canvas => { const chartType = canvas.dataset.chartType || 'line'; const chartData = JSON.parse(canvas.dataset.chartData || '{}'); new Chart(canvas, { type: chartType, data: chartData, options: chartConfig.defaultOptions }); }); } </code></pre></div></div> <h3 id="form-module-configuration"> <a href="#form-module-configuration" class="anchor-heading" aria-labelledby="form-module-configuration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Form Module Configuration </h3> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// src/modules/forms.js import { DateTime } from 'tempus-dominus'; export const formConfig = { // Select2 configuration select2: { theme: 'bootstrap-5', width: '100%', placeholder: 'Select an option...', allowClear: true }, // Date picker configuration datePicker: { display: { theme: 'light', components: { calendar: true, date: true, month: true, year: true, decades: true, clock: false } }, localization: { format: 'MM/dd/yyyy' } }, // Validation rules validation: { errorClass: 'is-invalid', successClass: 'is-valid', errorElement: 'div', errorPlacement: function(error, element) { error.addClass('invalid-feedback'); element.closest('.form-group').append(error</