[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
Backup
/
14082024
/
Data
/
htdocs
/
htdocs
/
siakad
/
mahasiswa
/
[
Home
]
File: forms-advanced.html
<!DOCTYPE html> <html lang="en"> <!-- Mirrored from coderthemes.com/minton_html/layouts/default/forms-advanced.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 11 Jul 2022 06:08:18 GMT --> <head> <meta charset="utf-8" /> <title>Form Advanced | Minton - Admin & Dashboard Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" /> <meta content="Coderthemes" name="author" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- App favicon --> <link rel="shortcut icon" href="assets/images/favicon.ico"> <!-- Plugins css --> <link href="assets/libs/mohithg-switchery/switchery.min.css" rel="stylesheet" type="text/css" /> <link href="assets/libs/multiselect/css/multi-select.css" rel="stylesheet" type="text/css" /> <link href="assets/libs/select2/css/select2.min.css" rel="stylesheet" type="text/css" /> <link href="assets/libs/selectize/css/selectize.bootstrap3.css" rel="stylesheet" type="text/css" /> <link href="assets/libs/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css" rel="stylesheet" type="text/css" /> <!-- App css --> <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" id="bs-stylesheet" /> <link href="assets/css/app.min.css" rel="stylesheet" type="text/css" id="app-stylesheet" /> <!-- icons --> <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" /> </head> <body class="loading" data-layout='{"mode": "light", "width": "fluid", "menuPosition": "fixed", "sidebar": { "color": "light", "size": "default", "showuser": false}, "topbar": {"color": "dark"}, "showRightSidebarOnPageLoad": true}'> <!-- Begin page --> <div id="wrapper"> <!-- Topbar Start --> <div class="navbar-custom"> <div class="container-fluid"> <ul class="list-unstyled topnav-menu float-end mb-0"> <li class="d-none d-lg-block"> <form class="app-search"> <div class="app-search-box dropdown"> <div class="input-group"> <input type="search" class="form-control" placeholder="Search..." id="top-search"> <button class="btn" type="submit"> <i class="fe-search"></i> </button> </div> <div class="dropdown-menu dropdown-lg" id="search-dropdown"> <!-- item--> <div class="dropdown-header noti-title"> <h5 class="text-overflow mb-2">Found <span class="text-danger">09</span> results</h5> </div> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-home me-1"></i> <span>Analytics Report</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-aperture me-1"></i> <span>How can I help you?</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-settings me-1"></i> <span>User profile settings</span> </a> <!-- item--> <div class="dropdown-header noti-title"> <h6 class="text-overflow mb-2 text-uppercase">Users</h6> </div> <div class="notification-list"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <div class="d-flex"> <img class="d-flex me-2 rounded-circle" src="assets/images/users/avatar-2.jpg" alt="Generic placeholder image" height="32"> <div> <h5 class="m-0 font-14">Erwin E. Brown</h5> <span class="font-12 mb-0">UI Designer</span> </div> </div> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <div class="d-flex"> <img class="d-flex me-2 rounded-circle" src="assets/images/users/avatar-5.jpg" alt="Generic placeholder image" height="32"> <div> <h5 class="m-0 font-14">Jacob Deo</h5> <span class="font-12 mb-0">Developer</span> </div> </div> </a> </div> </div> </div> </form> </li> <li class="dropdown d-inline-block d-lg-none"> <a class="nav-link dropdown-toggle arrow-none waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <i class="fe-search noti-icon"></i> </a> <div class="dropdown-menu dropdown-lg dropdown-menu-end p-0"> <form class="p-3"> <input type="text" class="form-control" placeholder="Search ..." aria-label="Search"> </form> </div> </li> <li class="dropdown d-none d-lg-inline-block"> <a class="nav-link dropdown-toggle arrow-none waves-effect waves-light" data-toggle="fullscreen" href="#"> <i class="fe-maximize noti-icon"></i> </a> </li> <li class="dropdown d-none d-lg-inline-block topbar-dropdown"> <a class="nav-link dropdown-toggle arrow-none waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <i class="fe-grid noti-icon"></i> </a> <div class="dropdown-menu dropdown-lg dropdown-menu-end p-0"> <div class="p-2"> <div class="row g-0"> <div class="col"> <a class="dropdown-icon-item" href="#"> <img src="assets/images/brands/github.png" alt="Github"> <span>GitHub</span> </a> </div> <div class="col"> <a class="dropdown-icon-item" href="#"> <img src="assets/images/brands/dribbble.png" alt="dribbble"> <span>Dribbble</span> </a> </div> <div class="col"> <a class="dropdown-icon-item" href="#"> <img src="assets/images/brands/slack.png" alt="slack"> <span>Slack</span> </a> </div> </div> <div class="row g-0"> <div class="col"> <a class="dropdown-icon-item" href="#"> <img src="assets/images/brands/g-suite.png" alt="G Suite"> <span>G Suite</span> </a> </div> <div class="col"> <a class="dropdown-icon-item" href="#"> <img src="assets/images/brands/bitbucket.png" alt="bitbucket"> <span>Bitbucket</span> </a> </div> <div class="col"> <a class="dropdown-icon-item" href="#"> <img src="assets/images/brands/dropbox.png" alt="dropbox"> <span>Dropbox</span> </a> </div> </div> </div> </div> </li> <li class="dropdown d-none d-lg-inline-block topbar-dropdown"> <a class="nav-link dropdown-toggle arrow-none waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <img src="assets/images/flags/us.jpg" alt="user-image" height="14"> </a> <div class="dropdown-menu dropdown-menu-end"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <img src="assets/images/flags/germany.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">German</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <img src="assets/images/flags/italy.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">Italian</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <img src="assets/images/flags/spain.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">Spanish</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <img src="assets/images/flags/russia.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">Russian</span> </a> </div> </li> <li class="dropdown notification-list topbar-dropdown"> <a class="nav-link dropdown-toggle waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <i class="fe-bell noti-icon"></i> <span class="badge bg-danger rounded-circle noti-icon-badge">5</span> </a> <div class="dropdown-menu dropdown-menu-end dropdown-lg"> <!-- item--> <div class="dropdown-item noti-title"> <h5 class="m-0"> <span class="float-end"> <a href="#" class="text-dark"> <small>Clear All</small> </a> </span>Notification </h5> </div> <div class="noti-scroll" data-simplebar> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item active"> <div class="notify-icon bg-soft-primary text-primary"> <i class="mdi mdi-comment-account-outline"></i> </div> <p class="notify-details">Doug Dukes commented on Admin Dashboard <small class="text-muted">1 min ago</small> </p> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <div class="notify-icon"> <img src="assets/images/users/avatar-2.jpg" class="img-fluid rounded-circle" alt="" /> </div> <p class="notify-details">Mario Drummond</p> <p class="text-muted mb-0 user-msg"> <small>Hi, How are you? What about our next meeting</small> </p> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <div class="notify-icon"> <img src="assets/images/users/avatar-4.jpg" class="img-fluid rounded-circle" alt="" /> </div> <p class="notify-details">Karen Robinson</p> <p class="text-muted mb-0 user-msg"> <small>Wow ! this admin looks good and awesome design</small> </p> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <div class="notify-icon bg-soft-warning text-warning"> <i class="mdi mdi-account-plus"></i> </div> <p class="notify-details">New user registered. <small class="text-muted">5 hours ago</small> </p> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <div class="notify-icon bg-info"> <i class="mdi mdi-comment-account-outline"></i> </div> <p class="notify-details">Caleb Flakelar commented on Admin <small class="text-muted">4 days ago</small> </p> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <div class="notify-icon bg-secondary"> <i class="mdi mdi-heart"></i> </div> <p class="notify-details">Carlos Crouch liked <b>Admin</b> <small class="text-muted">13 days ago</small> </p> </a> </div> <!-- All--> <a href="javascript:void(0);" class="dropdown-item text-center text-primary notify-item notify-all"> View all <i class="fe-arrow-right"></i> </a> </div> </li> <li class="dropdown notification-list topbar-dropdown"> <a class="nav-link dropdown-toggle nav-user me-0 waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <img src="assets/images/users/avatar-1.jpg" alt="user-image" class="rounded-circle"> <span class="pro-user-name ms-1"> Nik Patel <i class="mdi mdi-chevron-down"></i> </span> </a> <div class="dropdown-menu dropdown-menu-end profile-dropdown "> <!-- item--> <div class="dropdown-header noti-title"> <h6 class="text-overflow m-0">Welcome !</h6> </div> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="ri-account-circle-line"></i> <span>My Account</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="ri-settings-3-line"></i> <span>Settings</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="ri-wallet-line"></i> <span>My Wallet <span class="badge bg-success float-end">3</span> </span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="ri-lock-line"></i> <span>Lock Screen</span> </a> <div class="dropdown-divider"></div> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="ri-logout-box-line"></i> <span>Logout</span> </a> </div> </li> <li class="dropdown notification-list"> <a href="javascript:void(0);" class="nav-link right-bar-toggle waves-effect waves-light"> <i class="fe-settings noti-icon"></i> </a> </li> </ul> <!-- LOGO --> <div class="logo-box"> <a href="index.html" class="logo logo-dark text-center"> <span class="logo-sm"> <img src="assets/images/logo-sm-dark.png" alt="" height="24"> <!-- <span class="logo-lg-text-light">Minton</span> --> </span> <span class="logo-lg"> <img src="assets/images/logo-dark.png" alt="" height="20"> <!-- <span class="logo-lg-text-light">M</span> --> </span> </a> <a href="index.html" class="logo logo-light text-center"> <span class="logo-sm"> <img src="assets/images/logo-sm.png" alt="" height="24"> </span> <span class="logo-lg"> <img src="assets/images/logo-light.png" alt="" height="20"> </span> </a> </div> <ul class="list-unstyled topnav-menu topnav-menu-left m-0"> <li> <button class="button-menu-mobile waves-effect waves-light"> <i class="fe-menu"></i> </button> </li> <li> <!-- Mobile menu toggle (Horizontal Layout)--> <a class="navbar-toggle nav-link" data-bs-toggle="collapse" data-bs-target="#topnav-menu-content"> <div class="lines"> <span></span> <span></span> <span></span> </div> </a> <!-- End mobile menu toggle--> </li> <li class="dropdown d-none d-xl-block"> <a class="nav-link dropdown-toggle waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> Create New <i class="mdi mdi-chevron-down"></i> </a> <div class="dropdown-menu"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <i class="fe-briefcase me-1"></i> <span>New Projects</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <i class="fe-user me-1"></i> <span>Create Users</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <i class="fe-bar-chart-line- me-1"></i> <span>Revenue Report</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <i class="fe-settings me-1"></i> <span>Settings</span> </a> <div class="dropdown-divider"></div> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <i class="fe-headphones me-1"></i> <span>Help & Support</span> </a> </div> </li> <li class="dropdown dropdown-mega d-none d-xl-block"> <a class="nav-link dropdown-toggle waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> Mega Menu <i class="mdi mdi-chevron-down"></i> </a> <div class="dropdown-menu dropdown-megamenu"> <div class="row"> <div class="col-sm-8"> <div class="row"> <div class="col-md-4"> <h5 class="text-dark mt-0">UI Components</h5> <ul class="list-unstyled megamenu-list"> <li> <a href="javascript:void(0);">Widgets</a> </li> <li> <a href="javascript:void(0);">Nestable List</a> </li> <li> <a href="javascript:void(0);">Range Sliders</a> </li> <li> <a href="javascript:void(0);">Masonry Items</a> </li> <li> <a href="javascript:void(0);">Sweet Alerts</a> </li> <li> <a href="javascript:void(0);">Treeview Page</a> </li> <li> <a href="javascript:void(0);">Tour Page</a> </li> </ul> </div> <div class="col-md-4"> <h5 class="text-dark mt-0">Applications</h5> <ul class="list-unstyled megamenu-list"> <li> <a href="javascript:void(0);">eCommerce Pages</a> </li> <li> <a href="javascript:void(0);">CRM Pages</a> </li> <li> <a href="javascript:void(0);">Email</a> </li> <li> <a href="javascript:void(0);">Calendar</a> </li> <li> <a href="javascript:void(0);">Team Contacts</a> </li> <li> <a href="javascript:void(0);">Task Board</a> </li> <li> <a href="javascript:void(0);">Email Templates</a> </li> </ul> </div> <div class="col-md-4"> <h5 class="text-dark mt-0">Extra Pages</h5> <ul class="list-unstyled megamenu-list"> <li> <a href="javascript:void(0);">Left Sidebar with User</a> </li> <li> <a href="javascript:void(0);">Menu Collapsed</a> </li> <li> <a href="javascript:void(0);">Small Left Sidebar</a> </li> <li> <a href="javascript:void(0);">New Header Style</a> </li> <li> <a href="javascript:void(0);">Search Result</a> </li> <li> <a href="javascript:void(0);">Gallery Pages</a> </li> <li> <a href="javascript:void(0);">Maintenance & Coming Soon</a> </li> </ul> </div> </div> </div> <div class="col-sm-4"> <div class="text-center mt-3"> <h3 class="text-dark">Special Discount Sale!</h3> <h4>Save up to 70% off.</h4> <button class="btn btn-primary rounded-pill mt-3">Download Now</button> </div> </div> </div> </div> </li> </ul> <div class="clearfix"></div> </div> </div> <!-- end Topbar --> <!-- ========== Left Sidebar Start ========== --> <div class="left-side-menu"> <!-- LOGO --> <div class="logo-box"> <a href="index.html" class="logo logo-dark text-center"> <span class="logo-sm"> <img src="assets/images/logo-sm-dark.png" alt="" height="24"> <!-- <span class="logo-lg-text-light">Minton</span> --> </span> <span class="logo-lg"> <img src="assets/images/logo-dark.png" alt="" height="20"> <!-- <span class="logo-lg-text-light">M</span> --> </span> </a> <a href="index.html" class="logo logo-light text-center"> <span class="logo-sm"> <img src="assets/images/logo-sm.png" alt="" height="24"> </span> <span class="logo-lg"> <img src="assets/images/logo-light.png" alt="" height="20"> </span> </a> </div> <div class="h-100" data-simplebar> <!-- User box --> <div class="user-box text-center"> <img src="assets/images/users/avatar-1.jpg" alt="user-img" title="Mat Helme" class="rounded-circle avatar-md"> <div class="dropdown"> <a href="#" class="text-reset dropdown-toggle h5 mt-2 mb-1 d-block" data-bs-toggle="dropdown">Nik Patel</a> <div class="dropdown-menu user-pro-dropdown"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-user me-1"></i> <span>My Account</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-settings me-1"></i> <span>Settings</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-lock me-1"></i> <span>Lock Screen</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-log-out me-1"></i> <span>Logout</span> </a> </div> </div> <p class="text-reset">Admin Head</p> </div> <!--- Sidemenu --> <div id="sidebar-menu"> <ul id="side-menu"> <li class="menu-title">Navigation</li> <li> <a href="#sidebarDashboards" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarDashboards" class="waves-effect"> <i class="ri-dashboard-line"></i> <span class="badge bg-success rounded-pill float-end">3</span> <span> Dashboards </span> </a> <div class="collapse" id="sidebarDashboards"> <ul class="nav-second-level"> <li> <a href="index.html">Sales</a> </li> <li> <a href="dashboard-crm.html">CRM</a> </li> <li> <a href="dashboard-analytics.html">Analytics</a> </li> </ul> </div> </li> <li> <a href="#sidebarLayouts" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarLayouts"> <i class="ri-layout-line"></i> <span> Layouts </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarLayouts"> <ul class="nav-second-level"> <li> <a href="layouts-horizontal.html">Horizontal</a> </li> <li> <a href="layouts-detached.html">Detached</a> </li> <li> <a href="layouts-two-column.html">Two Column Menu</a> </li> <li> <a href="layouts-preloader.html">Preloader</a> </li> </ul> </div> </li> <li class="menu-title mt-2">Apps</li> <li> <a href="apps-chat.html"> <i class="ri-message-2-line"></i> <span> Chat </span> </a> </li> <li> <a href="#sidebarEcommerce" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarEcommerce"> <i class="ri-shopping-cart-2-line"></i> <span class="badge bg-danger float-end">New</span> <span> Ecommerce </span> </a> <div class="collapse" id="sidebarEcommerce"> <ul class="nav-second-level"> <li> <a href="ecommerce-products.html">Products List</a> </li> <li> <a href="ecommerce-products-grid.html">Products Grid</a> </li> <li> <a href="ecommerce-product-detail.html">Product Detail</a> </li> <li> <a href="ecommerce-product-create.html">Create Product</a> </li> <li> <a href="ecommerce-customers.html">Customers</a> </li> <li> <a href="ecommerce-orders.html">Orders</a> </li> <li> <a href="ecommerce-orders-detail.html">Order Detail</a> </li> <li> <a href="ecommerce-sellers.html">Sellers</a> </li> <li> <a href="ecommerce-cart.html">Shopping Cart</a> </li> <li> <a href="ecommerce-checkout.html">Checkout</a> </li> </ul> </div> </li> <li> <a href="apps-calendar.html"> <i class="ri-calendar-2-line"></i> <span> Calendar </span> </a> </li> <li> <a href="#sidebarEmail" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarEmail"> <i class="ri-mail-line"></i> <span> Email </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarEmail"> <ul class="nav-second-level"> <li> <a href="email-inbox.html">Inbox</a> </li> <li> <a href="email-read.html">Read Email</a> </li> <li> <a href="email-templates.html">Email Templates</a> </li> </ul> </div> </li> <li> <a href="apps-companies.html"> <i class="ri-building-4-line"></i> <span> Companies </span> </a> </li> <li> <a href="#sidebarTasks" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarTasks"> <i class="ri-task-line"></i> <span> Tasks </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarTasks"> <ul class="nav-second-level"> <li> <a href="task-list.html">List</a> </li> <li> <a href="task-details.html">Details</a> </li> <li> <a href="task-kanban-board.html">Kanban Board</a> </li> </ul> </div> </li> <li> <a href="apps-tickets.html"> <i class="ri-customer-service-2-line"></i> <span> Tickets </span> </a> </li> <li> <a href="#sidebarContacts" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarContacts"> <i class="ri-profile-line"></i> <span> Contacts </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarContacts"> <ul class="nav-second-level"> <li> <a href="contacts-list.html">Members List</a> </li> <li> <a href="contacts-profile.html">Profile</a> </li> </ul> </div> </li> <li> <a href="apps-file-manager.html"> <i class="ri-folders-line"></i> <span> File Manager </span> </a> </li> <li class="menu-title mt-2">Custom</li> <li> <a href="#sidebarAuth" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarAuth"> <i class="ri-shield-user-line"></i> <span> Auth Pages </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarAuth"> <ul class="nav-second-level"> <li> <a href="auth-login.html">Log In</a> </li> <li> <a href="auth-login-2.html">Log In 2</a> </li> <li> <a href="auth-register.html">Register</a> </li> <li> <a href="auth-register-2.html">Register 2</a> </li> <li> <a href="auth-signin-signup.html">Signin - Signup</a> </li> <li> <a href="auth-signin-signup-2.html">Signin - Signup 2</a> </li> <li> <a href="auth-recoverpw.html">Recover Password</a> </li> <li> <a href="auth-recoverpw-2.html">Recover Password 2</a> </li> <li> <a href="auth-lock-screen.html">Lock Screen</a> </li> <li> <a href="auth-lock-screen-2.html">Lock Screen 2</a> </li> <li> <a href="auth-logout.html">Logout</a> </li> <li> <a href="auth-logout-2.html">Logout 2</a> </li> <li> <a href="auth-confirm-mail.html">Confirm Mail</a> </li> <li> <a href="auth-confirm-mail-2.html">Confirm Mail 2</a> </li> </ul> </div> </li> <li> <a href="#sidebarExpages" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarExpages"> <i class="ri-pages-line"></i> <span> Extra Pages </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarExpages"> <ul class="nav-second-level"> <li> <a href="pages-starter.html">Starter</a> </li> <li> <a href="pages-timeline.html">Timeline</a> </li> <li> <a href="pages-sitemap.html">Sitemap</a> </li> <li> <a href="pages-invoice.html">Invoice</a> </li> <li> <a href="pages-faqs.html">FAQs</a> </li> <li> <a href="pages-search-results.html">Search Results</a> </li> <li> <a href="pages-pricing.html">Pricing</a> </li> <li> <a href="pages-maintenance.html">Maintenance</a> </li> <li> <a href="pages-coming-soon.html">Coming Soon</a> </li> <li> <a href="pages-gallery.html">Gallery</a> </li> <li> <a href="pages-404.html">Error 404</a> </li> <li> <a href="pages-404-alt.html">Error 404-alt</a> </li> <li> <a href="pages-500.html">Error 500</a> </li> </ul> </div> </li> <li class="menu-title mt-2">Components</li> <li> <a href="#sidebarBaseui" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarBaseui"> <i class="ri-pencil-ruler-2-line"></i> <span> Base UI </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarBaseui"> <ul class="nav-second-level"> <li> <a href="ui-avatars.html">Avatars</a> </li> <li> <a href="ui-buttons.html">Buttons</a> </li> <li> <a href="ui-cards.html">Cards</a> </li> <li> <a href="ui-carousel.html">Carousel</a> </li> <li> <a href="ui-dropdowns.html">Dropdowns</a> </li> <li> <a href="ui-video.html">Embed Video</a> </li> <li> <a href="ui-general.html">General UI</a> </li> <li> <a href="ui-grid.html">Grid</a> </li> <li> <a href="ui-images.html">Images</a> </li> <li> <a href="ui-list-group.html">List Group</a> </li> <li> <a href="ui-modals.html">Modals</a> </li> <li> <a href="ui-notifications.html">Notifications</a> </li> <li> <a href="ui-offcanvas.html">Offcanvas</a> </li> <li> <a href="ui-placeholders.html">Placeholders</a> </li> <li> <a href="ui-portlets.html">Portlets</a> </li> <li> <a href="ui-progress.html">Progress</a> </li> <li> <a href="ui-ribbons.html">Ribbons</a> </li> <li> <a href="ui-spinners.html">Spinners</a> </li> <li> <a href="ui-tabs-accordions.html">Tabs & Accordions</a> </li> <li> <a href="ui-tooltips-popovers.html">Tooltips & Popovers</a> </li> <li> <a href="ui-typography.html">Typography</a> </li> </ul> </div> </li> <li> <a href="#sidebarExtendedui" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarExtendedui"> <i class="ri-stack-line"></i> <span class="badge bg-info float-end">Hot</span> <span> Extended UI </span> </a> <div class="collapse" id="sidebarExtendedui"> <ul class="nav-second-level"> <li> <a href="extended-nestable.html">Nestable List</a> </li> <li> <a href="extended-range-slider.html">Range Slider</a> </li> <li> <a href="extended-sweet-alert.html">Sweet Alert</a> </li> <li> <a href="extended-tour.html">Tour Page</a> </li> <li> <a href="extended-treeview.html">Treeview</a> </li> <li> <a href="extended-scrollspy.html">Scrollspy</a> </li> </ul> </div> </li> <li> <a href="widgets.html"> <i class="ri-honour-line"></i> <span> Widgets </span> </a> </li> <li> <a href="#sidebarIcons" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarIcons"> <i class="ri-markup-line"></i> <span> Icons </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarIcons"> <ul class="nav-second-level"> <li> <a href="icons-feather.html">Feather</a> </li> <li> <a href="icons-remix.html">Remix</a> </li> <li> <a href="icons-boxicons.html">Boxicons</a> </li> <li> <a href="icons-mdi.html">Material Design</a> </li> <li> <a href="icons-font-awesome.html">Font Awesome 5</a> </li> <li> <a href="icons-weather.html">Weather</a> </li> </ul> </div> </li> <li> <a href="#sidebarForms" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarForms"> <i class="ri-eraser-line"></i> <span> Forms </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarForms"> <ul class="nav-second-level"> <li> <a href="forms-elements.html">General Elements</a> </li> <li> <a href="forms-advanced.html">Advanced</a> </li> <li> <a href="forms-validation.html">Validation</a> </li> <li> <a href="forms-pickers.html">Pickers</a> </li> <li> <a href="forms-wizard.html">Wizard</a> </li> <li> <a href="forms-masks.html">Masks</a> </li> <li> <a href="forms-quilljs.html">Quilljs Editor</a> </li> <li> <a href="forms-file-uploads.html">File Uploads</a> </li> <li> <a href="forms-x-editable.html">X Editable</a> </li> </ul> </div> </li> <li> <a href="#sidebarTables" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarTables"> <i class="ri-table-line"></i> <span> Tables </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarTables"> <ul class="nav-second-level"> <li> <a href="tables-basic.html">Basic Tables</a> </li> <li> <a href="tables-datatables.html">Data Tables</a> </li> <li> <a href="tables-editable.html">Editable Tables</a> </li> <li> <a href="tables-responsive.html">Responsive Tables</a> </li> <li> <a href="tables-footables.html">FooTable</a> </li> <li> <a href="tables-tablesaw.html">Tablesaw Tables</a> </li> </ul> </div> </li> <li> <a href="#sidebarCharts" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarCharts"> <i class="ri-bar-chart-line"></i> <span> Charts </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarCharts"> <ul class="nav-second-level"> <li> <a href="charts-flot.html">Flot</a> </li> <li> <a href="charts-apex.html">Apex</a> </li> <li> <a href="charts-morris.html">Morris</a> </li> <li> <a href="charts-chartjs.html">Chartjs</a> </li> <li> <a href="charts-c3.html">C3</a> </li> <li> <a href="charts-peity.html">Peity</a> </li> <li> <a href="charts-chartist.html">Chartist</a> </li> <li> <a href="charts-sparklines.html">Sparklines</a> </li> <li> <a href="charts-knob.html">Jquery Knob</a> </li> </ul> </div> </li> <li> <a href="#sidebarMaps" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarMaps"> <i class="ri-map-pin-line"></i> <span> Maps </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarMaps"> <ul class="nav-second-level"> <li> <a href="maps-google.html">Google</a> </li> <li> <a href="maps-vector.html">Vector</a> </li> <li> <a href="maps-mapael.html">Mapael</a> </li> </ul> </div> </li> <li> <a href="#sidebarMultilevel" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarMultilevel"> <i class="ri-share-line"></i> <span> Multi Level </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarMultilevel"> <ul class="nav-second-level"> <li> <a href="#sidebarMultilevel2" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarMultilevel2"> Second Level <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarMultilevel2"> <ul class="nav-second-level"> <li> <a href="javascript: void(0);">Item 1</a> </li> <li> <a href="javascript: void(0);">Item 2</a> </li> </ul> </div> </li> <li> <a href="#sidebarMultilevel3" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarMultilevel3"> Third Level <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarMultilevel3"> <ul class="nav-second-level"> <li> <a href="javascript: void(0);">Item 1</a> </li> <li> <a href="#sidebarMultilevel4" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarMultilevel4"> Item 2 <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarMultilevel4"> <ul class="nav-second-level"> <li> <a href="javascript: void(0);">Item 1</a> </li> <li> <a href="javascript: void(0);">Item 2</a> </li> </ul> </div> </li> </ul> </div> </li> </ul> </div> </li> </ul> </div> <!-- End Sidebar --> <div class="clearfix"></div> </div> <!-- Sidebar -left --> </div> <!-- Left Sidebar End --> <!-- ============================================================== --> <!-- Start Page Content here --> <!-- ============================================================== --> <div class="content-page"> <div class="content"> <!-- Start Content--> <div class="container-fluid"> <!-- start page title --> <div class="row"> <div class="col-12"> <div class="page-title-box"> <h4 class="page-title">Form Advanced</h4> <div class="page-title-right"> <ol class="breadcrumb m-0"> <li class="breadcrumb-item"><a href="javascript: void(0);">Minton</a></li> <li class="breadcrumb-item"><a href="javascript: void(0);">Forms</a></li> <li class="breadcrumb-item active">Form Advanced</li> </ol> </div> </div> </div> </div> <!-- end page title --> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-body"> <h4 class="header-title">Selectize</h4> <p class="sub-header"> Selectize is the hybrid of a textbox and <code><select></code> box. It's jQuery-based and it's useful for tagging, contact lists, country selectors, and so on. </p> <div class="row"> <div class="col-lg-6"> <div class="mb-3"> <label class="form-label">Default</label> <input type="text" id="selectize-tags" value="Awesome, Admin, Dashboard"> </div> </div> <div class="col-lg-6"> <div class="mb-3"> <label class="form-label">Select</label> <br/> <select id="selectize-select"> <option data-display="Select">Nothing</option> <option value="1">Some option</option> <option value="2">Another option</option> <option value="3" disabled>A disabled option</option> <option value="4">Potato</option> </select> </div> </div> </div> <div class="row"> <div class="col-lg-6"> <div class="mb-3"> <label class="form-label">Maximum Allow</label> <select id="selectize-maximum"> <option value="">Select a state...</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA" selected>California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="DC">District of Columbia</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY" selected>Wyoming</option> </select> <div class="clearfix"></div> </div> </div> <div class="col-lg-6"> <div class="mb-3"> <label class="form-label">Links</label> <select id="selectize-links"></select> </div> </div> </div> <div class="row"> <div class="col-lg-6"> <div class="mb-3"> <label class="form-label">Confirm Delete Alert</label> <input type="text" id="selectize-confirm" value="awesome,neat,yeah"> </div> </div> <div class="col-lg-6"> <div class="mb-3"> <label class="form-label">Basic Optgroups</label> <select id="selectize-optgroup" multiple placeholder="Select gear..."> <option value="">Select gear...</option> <optgroup label="Climbing"> <option value="pitons">Pitons</option> <option value="cams">Cams</option> <option value="nuts">Nuts</option> <option value="bolts">Bolts</option> <option value="stoppers">Stoppers</option> <option value="sling">Sling</option> </optgroup> <optgroup label="Skiing"> <option value="skis">Skis</option> <option value="skins">Skins</option> <option value="poles">Poles</option> </optgroup> </select> </div> </div> </div> <div class="row"> <div class="col-lg-6"> <div class="mb-3"> <label class="form-label">Programmatic Optgroups</label> <select id="selectize-programmatic" placeholder="Select animal..."></select> </div> </div> <div class="col-lg-6"> <div class="mb-3"> <label class="form-label">Optgroup Columns</label> <input type="text" id="selectize-optgroup-column" placeholder="Select cars..."> </div> </div> </div> <div class="row"> <div class="col-lg-6"> <div class="mb-3 mb-lg-0"> <label class="form-label">Remove Button</label> <input type="text" class="selectize-close-btn" value="awesome,neat"> </div> </div> <div class="col-lg-6"> <div> <label class="form-label" for="select-code-language">Dropdown Header</label> <select id="select-code-language" class="selectize-drop-header" placeholder="Select a language..."> <option value="txt">Text</option> <option value="md">Markdown</option> <option value="html">HTML</option> <option value="php">PHP</option> <option value="python">Python</option> <option value="java">Java</option> <option value="js" selected>JavaScript</option> <option value="ruby">Ruby</option> <option value="vhdl">VHDL</option> <option value="verilog">Verilog</option> <option value="c#">C#</option> <option value="c++">C/C++</option> </select> </div> </div> </div> </div> <!-- end card-body --> </div> <!-- end card--> </div> <!-- end col --> </div> <!-- end row --> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-body"> <h4 class="header-title">Switchery</h4> <p class="sub-header"> iOS 7 style switches for your checkboxes </p> <div class="row"> <div class="col-lg-6"> <label class="mb-1">Basic</label> <p class="text-muted font-13"> Add an attribute <code> data-plugin="switchery" data-color="@colors"</code> to your input element and it will be converted into switch. </p> <div class="switchery-demo"> <input type="checkbox" checked data-plugin="switchery" data-color="#039cfd"/> <input type="checkbox" checked data-plugin="switchery" data-color="#f1b53d"/> <input type="checkbox" checked data-plugin="switchery" data-color="#1bb99a"/> <input type="checkbox" checked data-plugin="switchery" data-color="#ff5d48"/> <input type="checkbox" checked data-plugin="switchery" data-color="#3db9dc"/> <input type="checkbox" checked data-plugin="switchery" data-color="#2b3d51"/> <input type="checkbox" checked data-plugin="switchery" data-color="#9261c6"/> <input type="checkbox" checked data-plugin="switchery" data-color="#ff7aa3"/> <input type="checkbox" checked data-plugin="switchery" data-color="#98a6ad"/> </div> </div> <div class="col-lg-6"> <label class="mb-1 mt-3 mt-lg-0">Sizes & Secondary color</label> <p class="text-muted font-13"> Add an attribute <code> data-size="small",data-size="large"</code> to your input element and it will be converted into switch. Add an attribute <code> data-color="@color" data-secondary-color="@color"</code> to your input element and it will be converted into switch. </p> <div class="switchery-demo"> <input type="checkbox" checked data-plugin="switchery" data-color="#64b0f2" data-size="small"/> <input type="checkbox" checked data-plugin="switchery" data-color="#ff7aa3"/> <input type="checkbox" checked data-plugin="switchery" data-color="#2b3d51" data-size="large"/> <input type="checkbox" data-plugin="switchery" data-color="#1bb99a" data-secondary-color="#ff5d48" /> <input type="checkbox" data-plugin="switchery" data-color="#9261c6" data-secondary-color="#ff7aa3" checked /> </div> </div> </div> </div> <!-- end card-body --> </div> <!-- end card--> </div> <!-- end col --> </div> <!-- end row --> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-body"> <h4 class="header-title">Select2</h4> <p class="sub-header">The jQuery replacement for select boxes</p> <div class="row"> <div class="col-md-6"> <p class="mb-1 fw-medium">Single Select</p> <p class="text-muted font-13"> Select2 can take a regular select box like this... </p> <select class="form-control" data-toggle="select2"> <option>Select</option> <optgroup label="Alaskan/Hawaiian Time Zone"> <option value="AK">Alaska</option> <option value="HI">Hawaii</option> </optgroup> <optgroup label="Pacific Time Zone"> <option value="CA">California</option> <option value="NV">Nevada</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> </optgroup> <optgroup label="Mountain Time Zone"> <option value="AZ">Arizona</option> <option value="CO">Colorado</option> <option value="ID">Idaho</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NM">New Mexico</option> <option value="ND">North Dakota</option> <option value="UT">Utah</option> <option value="WY">Wyoming</option> </optgroup> <optgroup label="Central Time Zone"> <option value="AL">Alabama</option> <option value="AR">Arkansas</option> <option value="IL">Illinois</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="OK">Oklahoma</option> <option value="SD">South Dakota</option> <option value="TX">Texas</option> <option value="TN">Tennessee</option> <option value="WI">Wisconsin</option> </optgroup> <optgroup label="Eastern Time Zone"> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="IN">Indiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="OH">Ohio</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WV">West Virginia</option> </optgroup> </select> </div> <!-- end col --> <div class="col-md-6"> <p class="mb-1 fw-medium mt-3 mt-md-0">Multiple Select</p> <p class="text-muted font-13"> Select2 can take a regular select box like this... </p> <select class="form-control select2-multiple" data-toggle="select2" multiple="multiple" data-placeholder="Choose ..."> <optgroup label="Alaskan/Hawaiian Time Zone"> <option value="AK">Alaska</option> <option value="HI">Hawaii</option> </optgroup> <optgroup label="Pacific Time Zone"> <option value="CA">California</option> <option value="NV">Nevada</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> </optgroup> <optgroup label="Mountain Time Zone"> <option value="AZ">Arizona</option> <option value="CO">Colorado</option> <option value="ID">Idaho</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NM">New Mexico</option> <option value="ND">North Dakota</option> <option value="UT">Utah</option> <option value="WY">Wyoming</option> </optgroup> <optgroup label="Central Time Zone"> <option value="AL">Alabama</option> <option value="AR">Arkansas</option> <option value="IL">Illinois</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="OK">Oklahoma</option> <option value="SD">South Dakota</option> <option value="TX">Texas</option> <option value="TN">Tennessee</option> <option value="WI">Wisconsin</option> </optgroup> <optgroup label="Eastern Time Zone"> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="IN">Indiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="OH">Ohio</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WV">West Virginia</option> </optgroup> </select> </div> <!-- end col --> </div> <!-- end row --> </div> <!-- end card-body--> </div> <!-- end card--> </div> <!-- end col--> </div> <!-- end row--> <div class="row"> <div class="col-lg-12"> <div class="card"> <div class="card-body"> <h4 class="header-title">Bootstrap MaxLength</h4> <p class="sub-header">Uses the HTML5 attribute "maxlength" to work.</p> <div class="row"> <div class="col-md-6"> <div> <label class="mb-1 fw-medium">Default usage</label> <p class="text-muted font-13"> The badge will show up by default when the remaining chars are 10 or less: </p> <input type="text" class="form-control" maxlength="25" name="defaultconfig" id="defaultconfig" /> </div> <div> <label class="mb-1 mt-4 fw-medium">Threshold value</label> <p class="text-muted font-13"> Do you want the badge to show up when there are 20 chars or less? Use the <code>threshold</code> option: </p> <input type="text" maxlength="25" name="thresholdconfig" class="form-control" id="thresholdconfig" /> </div> <div> <label class="mb-1 mt-4 fw-medium">All the options</label> <p class="text-muted m-b-15 font-13"> Please note: if the <code>alwaysShow</code> option is enabled, the <code>threshold</code> option is ignored. </p> <input type="text" class="form-control" maxlength="25" name="alloptions" id="alloptions" /> </div> </div> <!-- end col --> <div class="col-md-6"> <div class="mt-3 mt-md-0"> <label class="mb-1 fw-medium">Position</label> <p class="text-muted font-13"> All you need to do is specify the <code>placement</code> option, with one of those strings. If none is specified, the positioning will be defauted to 'bottom'. </p> <input type="text" class="form-control" maxlength="25" name="placement" id="placement" /> <div> <label class="mb-1 mt-4 fw-medium">Textareas</label> <p class="text-muted font-13"> Bootstrap maxlength supports textarea as well as inputs. Even on old IE. </p> <textarea id="textarea" class="form-control" maxlength="225" rows="3" placeholder="This textarea has a limit of 225 chars."></textarea> </div> </div> </div> <!-- end col --> </div> <!-- end row --> </div> <!-- end card-body --> </div> <!-- end card --> </div> <!-- end col --> </div> <!-- end row --> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-body"> <h4 class="header-title">Multiple Select</h4> <p class="sub-header">Example of multiple select.</p> <div class="row"> <div class="col-md-4"> <h5 class="mt-0 font-14 mb-1">Default</h5> <p class="text-muted font-13"> Use a <code> <select multiple /></code> as your input element for a tags input, to gain true multivalue support. </p> <select multiple="multiple" class="multi-select" id="my_multi_select1" name="my_multi_select1[]" data-plugin="multiselect"> <option>Dallas Cowboys</option> <option>New York Giants</option> <option selected>Philadelphia Eagles</option> <option selected>Washington Redskins</option> <option>Chicago Bears</option> <option>Detroit Lions</option> <option>Green Bay Packers</option> <option>Minnesota Vikings</option> <option selected>Atlanta Falcons</option> <option>Carolina Panthers</option> <option>New Orleans Saints</option> <option>Tampa Bay Buccaneers</option> <option>Arizona Cardinals</option> <option>St. Louis Rams</option> <option>San Francisco 49ers</option> <option>Seattle Seahawks</option> </select> </div> <!-- end col --> <div class="col-md-4"> <h5 class="mb-1 font-14 mt-3 mt-md-0 fw-medium">Grouped Options</h5> <p class="text-muted font-13"> Use a <code> <select multiple /></code> as your input element for a tags input, to gain true multivalue support. </p> <select multiple="multiple" class="multi-select" id="my_multi_select2" name="my_multi_select2[]" data-plugin="multiselect" data-selectable-optgroup="true"> <optgroup label="NFC EAST"> <option>Dallas Cowboys</option> <option>New York Giants</option> <option>Philadelphia Eagles</option> <option>Washington Redskins</option> </optgroup> <optgroup label="NFC NORTH"> <option>Chicago Bears</option> <option>Detroit Lions</option> <option>Green Bay Packers</option> <option>Minnesota Vikings</option> </optgroup> <optgroup label="NFC SOUTH"> <option>Atlanta Falcons</option> <option>Carolina Panthers</option> <option>New Orleans Saints</option> <option>Tampa Bay Buccaneers</option> </optgroup> <optgroup label="NFC WEST"> <option>Arizona Cardinals</option> <option>St. Louis Rams</option> <option>San Francisco 49ers</option> <option>Seattle Seahawks</option> </optgroup> </select> </div> <!-- end col --> <div class="col-md-4"> <h5 class="mb-1 mt-3 mt-md-0 font-14">Searchable</h5> <p class="text-muted font-13"> Use a <code> <select multiple /></code> as your input element for a tags input, to gain true multivalue support. </p> <select name="country" class="multi-select" multiple="" id="my_multi_select3" > <option value="AF">Afghanistan</option> <option value="AL">Albania</option> <option value="DZ">Algeria</option> <option value="AS">American Samoa</option> <option value="AD">Andorra</option> <option value="AO">Angola</option> <option value="AI">Anguilla</option> <option value="AQ">Antarctica</option> <option value="AR">Argentina</option> <option value="AM">Armenia</option> <option value="AW">Aruba</option> <option value="AU">Australia</option> <option value="AT">Austria</option> <option value="AZ">Azerbaijan</option> <option value="BS">Bahamas</option> <option value="BH">Bahrain</option> <option value="BD">Bangladesh</option> <option value="BB">Barbados</option> <option value="BY">Belarus</option> <option value="BE">Belgium</option> <option value="BZ">Belize</option> <option value="BJ">Benin</option> <option value="BM">Bermuda</option> <option value="BT">Bhutan</option> <option value="BO">Bolivia</option> <option value="BA">Bosnia and Herzegowina</option> <option value="BW">Botswana</option> <option value="BV">Bouvet Island</option> <option value="BR">Brazil</option> <option value="IO">British Indian Ocean Territory</option> <option value="BN">Brunei Darussalam</option> <option value="BG">Bulgaria</option> <option value="BF">Burkina Faso</option> <option value="BI">Burundi</option> <option value="KH">Cambodia</option> <option value="CM">Cameroon</option> <option value="CA">Canada</option> <option value="CV">Cape Verde</option> <option value="KY">Cayman Islands</option> <option value="CF">Central African Republic</option> <option value="TD">Chad</option> <option value="CL">Chile</option> <option value="CN">China</option> <option value="CX">Christmas Island</option> <option value="CC">Cocos (Keeling) Islands</option> <option value="CO">Colombia</option> <option value="KM">Comoros</option> <option value="CG">Congo</option> <option value="CD">Congo, the Democratic Republic of the</option> <option value="CK">Cook Islands</option> <option value="CR">Costa Rica</option> <option value="CI">Cote d'Ivoire</option> <option value="HR">Croatia (Hrvatska)</option> <option value="CU">Cuba</option> <option value="CY">Cyprus</option> <option value="CZ">Czech Republic</option> <option value="DK">Denmark</option> <option value="DJ">Djibouti</option> <option value="DM">Dominica</option> <option value="DO">Dominican Republic</option> <option value="EC">Ecuador</option> <option value="EG">Egypt</option> <option value="SV">El Salvador</option> <option value="GQ">Equatorial Guinea</option> <option value="ER">Eritrea</option> <option value="EE">Estonia</option> <option value="ET">Ethiopia</option> <option value="FK">Falkland Islands (Malvinas)</option> <option value="FO">Faroe Islands</option> <option value="FJ">Fiji</option> <option value="FI">Finland</option> <option value="FR">France</option> <option value="GF">French Guiana</option> <option value="PF">French Polynesia</option> <option value="TF">French Southern Territories</option> <option value="GA">Gabon</option> <option value="GM">Gambia</option> <option value="GE">Georgia</option> <option value="DE">Germany</option> <option value="GH">Ghana</option> <option value="GI">Gibraltar</option> <option value="GR">Greece</option> <option value="GL">Greenland</option> <option value="GD">Grenada</option> <option value="GP">Guadeloupe</option> <option value="GU">Guam</option> <option value="GT">Guatemala</option> <option value="GN">Guinea</option> <option value="GW">Guinea-Bissau</option> <option value="GY">Guyana</option> <option value="HT">Haiti</option> <option value="HM">Heard and Mc Donald Islands</option> <option value="VA">Holy See (Vatican City State)</option> <option value="HN">Honduras</option> <option value="HK">Hong Kong</option> <option value="HU">Hungary</option> <option value="IS">Iceland</option> <option value="IN">India</option> <option value="ID">Indonesia</option> <option value="IR">Iran (Islamic Republic of)</option> <option value="IQ">Iraq</option> <option value="IE">Ireland</option> <option value="IL">Israel</option> <option value="IT">Italy</option> <option value="JM">Jamaica</option> <option value="JP">Japan</option> <option value="JO">Jordan</option> <option value="KZ">Kazakhstan</option> <option value="KE">Kenya</option> <option value="KI">Kiribati</option> <option value="KP">Korea, Democratic People's Republic of</option> <option value="KR">Korea, Republic of</option> <option value="KW">Kuwait</option> <option value="KG">Kyrgyzstan</option> <option value="LA">Lao People's Democratic Republic</option> <option value="LV">Latvia</option> <option value="LB">Lebanon</option> <option value="LS">Lesotho</option> <option value="LR">Liberia</option> <option value="LY">Libyan Arab Jamahiriya</option> <option value="LI">Liechtenstein</option> <option value="LT">Lithuania</option> <option value="LU">Luxembourg</option> <option value="MO">Macau</option> <option value="MK">Macedonia, The Former Yugoslav Republic of</option> <option value="MG">Madagascar</option> <option value="MW">Malawi</option> <option value="MY">Malaysia</option> <option value="MV">Maldives</option> <option value="ML">Mali</option> <option value="MT">Malta</option> <option value="MH">Marshall Islands</option> <option value="MQ">Martinique</option> <option value="MR">Mauritania</option> <option value="MU">Mauritius</option> <option value="YT">Mayotte</option> <option value="MX">Mexico</option> <option value="FM">Micronesia, Federated States of</option> <option value="MD">Moldova, Republic of</option> <option value="MC">Monaco</option> <option value="MN">Mongolia</option> <option value="MS">Montserrat</option> <option value="MA">Morocco</option> <option value="MZ">Mozambique</option> <option value="MM">Myanmar</option> <option value="NA">Namibia</option> <option value="NR">Nauru</option> <option value="NP">Nepal</option> <option value="NL">Netherlands</option> <option value="AN">Netherlands Antilles</option> <option value="NC">New Caledonia</option> <option value="NZ">New Zealand</option> <option value="NI">Nicaragua</option> <option value="NE">Niger</option> <option value="NG">Nigeria</option> <option value="NU">Niue</option> <option value="NF">Norfolk Island</option> <option value="MP">Northern Mariana Islands</option> <option value="NO">Norway</option> <option value="OM">Oman</option> <option value="PK">Pakistan</option> <option value="PW">Palau</option> <option value="PA">Panama</option> <option value="PG">Papua New Guinea</option> <option value="PY">Paraguay</option> <option value="PE">Peru</option> <option value="PH">Philippines</option> <option value="PN">Pitcairn</option> <option value="PL">Poland</option> <option value="PT">Portugal</option> <option value="PR">Puerto Rico</option> <option value="QA">Qatar</option> <option value="RE">Reunion</option> <option value="RO">Romania</option> <option value="RU">Russian Federation</option> <option value="RW">Rwanda</option> <option value="KN">Saint Kitts and Nevis</option> <option value="LC">Saint LUCIA</option> <option value="VC">Saint Vincent and the Grenadines</option> <option value="WS">Samoa</option> <option value="SM">San Marino</option> <option value="ST">Sao Tome and Principe</option> <option value="SA">Saudi Arabia</option> <option value="SN">Senegal</option> <option value="SC">Seychelles</option> <option value="SL">Sierra Leone</option> <option value="SG">Singapore</option> <option value="SK">Slovakia (Slovak Republic)</option> <option value="SI">Slovenia</option> <option value="SB">Solomon Islands</option> <option value="SO">Somalia</option> <option value="ZA">South Africa</option> <option value="GS">South Georgia and the South Sandwich Islands</option> <option value="ES">Spain</option> <option value="LK">Sri Lanka</option> <option value="SH">St. Helena</option> <option value="PM">St. Pierre and Miquelon</option> <option value="SD">Sudan</option> <option value="SR">Suriname</option> <option value="SJ">Svalbard and Jan Mayen Islands</option> <option value="SZ">Swaziland</option> <option value="SE">Sweden</option> <option value="CH">Switzerland</option> <option value="SY">Syrian Arab Republic</option> <option value="TW">Taiwan, Province of China</option> <option value="TJ">Tajikistan</option> <option value="TZ">Tanzania, United Republic of</option> <option value="TH">Thailand</option> <option value="TG">Togo</option> <option value="TK">Tokelau</option> <option value="TO">Tonga</option> <option value="TT">Trinidad and Tobago</option> <option value="TN">Tunisia</option> <option value="TR">Turkey</option> <option value="TM">Turkmenistan</option> <option value="TC">Turks and Caicos Islands</option> <option value="TV">Tuvalu</option> <option value="UG">Uganda</option> <option value="UA">Ukraine</option> <option value="AE">United Arab Emirates</option> <option value="GB">United Kingdom</option> <option value="US">United States</option> <option value="UM">United States Minor Outlying Islands</option> <option value="UY">Uruguay</option> <option value="UZ">Uzbekistan</option> <option value="VU">Vanuatu</option> <option value="VE">Venezuela</option> <option value="VN">Viet Nam</option> <option value="VG">Virgin Islands (British)</option> <option value="VI">Virgin Islands (U.S.)</option> <option value="WF">Wallis and Futuna Islands</option> <option value="EH">Western Sahara</option> <option value="YE">Yemen</option> <option value="ZM">Zambia</option> <option value="ZW">Zimbabwe</option> </select> </div> </div> <!-- end row --> </div> <!-- end card-body--> </div> <!-- end card--> </div> <!-- end col--> </div> <!-- end row--> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-body"> <h4 class="header-title">Bootstrap Touchspin</h4> <p class="text-muted font-14 mb-3"> A mobile and touch friendly input spinner component for Bootstrap. Specify attribute <code>data-toggle="touchspin"</code> and your input would be conveterted into touch friendly spinner. </p> <div class="row"> <div class="col-lg-6"> <div class="mb-3"> <label class="form-label">Using data attributes</label> <input data-toggle="touchspin" type="text" value="55"> </div> <div class="mb-3"> <label class="form-label">Example with postfix (large)</label> <input data-toggle="touchspin" value="18.20" type="text" data-step="0.1" data-decimals="2" data-bts-postfix="%"> </div> <div class="mb-3"> <label class="form-label">With prefix</label> <input data-toggle="touchspin" type="text" data-bts-prefix="$"> </div> <div> <label class="form-label">Change button class</label> <input data-toggle="touchspin" value="77" type="text" data-bts-button-down-class="btn btn-danger" data-bts-button-up-class="btn btn-info"> </div> </div> <!-- end col --> <div class="col-lg-6 mt-3 mt-lg-0"> <div class="mb-3"> <label class="form-label">Init with empty value:</label> <input data-toggle="touchspin" type="text"> </div> <div class="mb-3"> <label class="form-label">Max value - (Default value 100)</label> <input data-toggle="touchspin" data-bts-max="500" value="128" data-btn-vertical="true" type="text"> </div> <div> <label class="form-label">With prefix and postfix button</label> <input data-toggle="touchspin" data-bts-prefix="A Button" data-bts-prefix-extra-class="btn btn-light" data-bts-postfix="A Button" data-bts-postfix-extra-class="btn btn-light" type="text"> </div> </div> <!-- end col --> </div> <!-- end row --> </div> <!-- end card-body --> </div> <!-- end card--> </div> <!-- end col --> </div> <!-- end row --> </div> <!-- container --> </div> <!-- content --> <!-- Footer Start --> <footer class="footer"> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <script>document.write(new Date().getFullYear())</script> © Minton theme by <a href="#">Coderthemes</a> </div> <div class="col-md-6"> <div class="text-md-end footer-links d-none d-sm-block"> <a href="javascript:void(0);">About Us</a> <a href="javascript:void(0);">Help</a> <a href="javascript:void(0);">Contact Us</a> </div> </div> </div> </div> </footer> <!-- end Footer --> </div> <!-- ============================================================== --> <!-- End Page content --> <!-- ============================================================== --> </div> <!-- END wrapper --> <!-- Right Sidebar --> <div class="right-bar"> <div data-simplebar class="h-100"> <!-- Nav tabs --> <ul class="nav nav-tabs nav-bordered nav-justified" role="tablist"> <li class="nav-item"> <a class="nav-link py-2" data-bs-toggle="tab" href="#chat-tab" role="tab"> <i class="mdi mdi-message-text-outline d-block font-22 my-1"></i> </a> </li> <li class="nav-item"> <a class="nav-link py-2" data-bs-toggle="tab" href="#tasks-tab" role="tab"> <i class="mdi mdi-format-list-checkbox d-block font-22 my-1"></i> </a> </li> <li class="nav-item"> <a class="nav-link py-2 active" data-bs-toggle="tab" href="#settings-tab" role="tab"> <i class="mdi mdi-cog-outline d-block font-22 my-1"></i> </a> </li> </ul> <!-- Tab panes --> <div class="tab-content pt-0"> <div class="tab-pane" id="chat-tab" role="tabpanel"> <form class="search-bar p-3"> <div class="position-relative"> <input type="text" class="form-control" placeholder="Search..."> <span class="mdi mdi-magnify"></span> </div> </form> <h6 class="fw-medium px-3 mt-2 text-uppercase">Group Chats</h6> <div class="p-2"> <a href="javascript: void(0);" class="text-reset notification-item ps-3 mb-2 d-block"> <i class="mdi mdi-checkbox-blank-circle-outline me-1 text-success"></i> <span class="mb-0 mt-1">App Development</span> </a> <a href="javascript: void(0);" class="text-reset notification-item ps-3 mb-2 d-block"> <i class="mdi mdi-checkbox-blank-circle-outline me-1 text-warning"></i> <span class="mb-0 mt-1">Office Work</span> </a> <a href="javascript: void(0);" class="text-reset notification-item ps-3 mb-2 d-block"> <i class="mdi mdi-checkbox-blank-circle-outline me-1 text-danger"></i> <span class="mb-0 mt-1">Personal Group</span> </a> <a href="javascript: void(0);" class="text-reset notification-item ps-3 d-block"> <i class="mdi mdi-checkbox-blank-circle-outline me-1"></i> <span class="mb-0 mt-1">Freelance</span> </a> </div> <h6 class="fw-medium px-3 mt-3 text-uppercase">Favourites <a href="javascript: void(0);" class="font-18 text-danger"><i class="float-end mdi mdi-plus-circle"></i></a></h6> <div class="p-2"> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status"></span> <img src="assets/images/users/avatar-10.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Andrew Mackie</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">It will seem like simplified English.</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status"></span> <img src="assets/images/users/avatar-1.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Rory Dalyell</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">To an English person, it will seem like simplified</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status busy"></span> <img src="assets/images/users/avatar-9.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Jaxon Dunhill</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">To achieve this, it would be necessary.</p> </div> </div> </div> </a> </div> <h6 class="fw-medium px-3 mt-3 text-uppercase">Other Chats <a href="javascript: void(0);" class="font-18 text-danger"><i class="float-end mdi mdi-plus-circle"></i></a></h6> <div class="p-2 pb-4"> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status online"></span> <img src="assets/images/users/avatar-2.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Jackson Therry</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">Everyone realizes why a new common language.</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status away"></span> <img src="assets/images/users/avatar-4.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Charles Deakin</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">The languages only differ in their grammar.</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status online"></span> <img src="assets/images/users/avatar-5.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Ryan Salting</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">If several languages coalesce the grammar of the resulting.</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status online"></span> <img src="assets/images/users/avatar-6.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Sean Howse</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">It will seem like simplified English.</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status busy"></span> <img src="assets/images/users/avatar-7.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Dean Coward</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">The new common language will be more simple.</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status away"></span> <img src="assets/images/users/avatar-8.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Hayley East</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">One could refuse to pay expensive translators.</p> </div> </div> </div> </a> <div class="text-center mt-3"> <a href="javascript:void(0);" class="btn btn-sm btn-white"> <i class="mdi mdi-spin mdi-loading me-2"></i> Load more </a> </div> </div> </div> <div class="tab-pane" id="tasks-tab" role="tabpanel"> <h6 class="fw-medium p-3 m-0 text-uppercase">Working Tasks</h6> <div class="px-2"> <a href="javascript: void(0);" class="text-reset item-hovered d-block p-2"> <p class="text-muted mb-0">App Development<span class="float-end">75%</span></p> <div class="progress mt-2" style="height: 4px;"> <div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> </a> <a href="javascript: void(0);" class="text-reset item-hovered d-block p-2"> <p class="text-muted mb-0">Database Repair<span class="float-end">37%</span></p> <div class="progress mt-2" style="height: 4px;"> <div class="progress-bar bg-info" role="progressbar" style="width: 37%" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100"></div> </div> </a> <a href="javascript: void(0);" class="text-reset item-hovered d-block p-2"> <p class="text-muted mb-0">Backup Create<span class="float-end">52%</span></p> <div class="progress mt-2" style="height: 4px;"> <div class="progress-bar bg-warning" role="progressbar" style="width: 52%" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100"></div> </div> </a> </div> <h6 class="fw-medium px-3 mb-0 mt-4 text-uppercase">Upcoming Tasks</h6> <div class="p-2"> <a href="javascript: void(0);" class="text-reset item-hovered d-block p-2"> <p class="text-muted mb-0">Sales Reporting<span class="float-end">12%</span></p> <div class="progress mt-2" style="height: 4px;"> <div class="progress-bar bg-danger" role="progressbar" style="width: 12%" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"></div> </div> </a> <a href="javascript: void(0);" class="text-reset item-hovered d-block p-2"> <p class="text-muted mb-0">Redesign Website<span class="float-end">67%</span></p> <div class="progress mt-2" style="height: 4px;"> <div class="progress-bar bg-primary" role="progressbar" style="width: 67%" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100"></div> </div> </a> <a href="javascript: void(0);" class="text-reset item-hovered d-block p-2"> <p class="text-muted mb-0">New Admin Design<span class="float-end">84%</span></p> <div class="progress mt-2" style="height: 4px;"> <div class="progress-bar bg-success" role="progressbar" style="width: 84%" aria-valuenow="84" aria-valuemin="0" aria-valuemax="100"></div> </div> </a> </div> <div class="d-grid p-3 mt-2"> <a href="javascript: void(0);" class="btn btn-success waves-effect waves-light">Create Task</a> </div> </div> <div class="tab-pane active" id="settings-tab" role="tabpanel"> <h6 class="fw-medium px-3 m-0 py-2 font-13 text-uppercase bg-light"> <span class="d-block py-1">Theme Settings</span> </h6> <div class="p-3"> <div class="alert alert-warning" role="alert"> <strong>Customize </strong> the overall color scheme, sidebar menu, etc. </div> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Color Scheme</h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="color-scheme-mode" value="light" id="light-mode-check" checked> <label class="form-check-label" for="light-mode-check">Light Mode</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="color-scheme-mode" value="dark" id="dark-mode-check"> <label class="form-check-label" for="dark-mode-check">Dark Mode</label> </div> <!-- Width --> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Width</h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="width" value="fluid" id="fluid-check" checked> <label class="form-check-label" for="fluid-check">Fluid</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="width" value="boxed" id="boxed-check"> <label class="form-check-label" for="boxed-check">Boxed</label> </div> <!-- Topbar --> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Topbar</h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="topbar-color" value="dark" id="darktopbar-check" checked> <label class="form-check-label" for="darktopbar-check">Dark</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="topbar-color" value="light" id="lighttopbar-check"> <label class="form-check-label" for="lighttopbar-check">Light</label> </div> <!-- Menu positions --> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Menus Positon <small>(Leftsidebar and Topbar)</small></h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="menus-position" value="fixed" id="fixed-check" checked> <label class="form-check-label" for="fixed-check">Fixed</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="menus-position" value="scrollable" id="scrollable-check"> <label class="form-check-label" for="scrollable-check">Scrollable</label> </div> <!-- Left Sidebar--> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Left Sidebar Color</h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-color" value="light" id="light-check" checked> <label class="form-check-label" for="light-check">Light</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-color" value="dark" id="dark-check"> <label class="form-check-label" for="dark-check">Dark</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-color" value="brand" id="brand-check"> <label class="form-check-label" for="brand-check">Brand</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-color" value="gradient" id="gradient-check"> <label class="form-check-label" for="gradient-check">Gradient</label> </div> <!-- size --> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Left Sidebar Size</h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-size" value="default" id="default-size-check" checked> <label class="form-check-label" for="default-size-check">Default</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-size" value="condensed" id="condensed-check"> <label class="form-check-label" for="condensed-check">Condensed <small>(Extra Small size)</small></label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-size" value="compact" id="compact-check"> <label class="form-check-label" for="compact-check">Compact <small>(Small size)</small></label> </div> <!-- User info --> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Sidebar User Info</h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-user" value="fixed" id="sidebaruser-check"> <label class="form-check-label" for="sidebaruser-check">Enable</label> </div> <div class="d-grid mt-4"> <button class="btn btn-primary" id="resetBtn">Reset to Default</button> <a href="#" class="btn btn-danger mt-2" ><i class="mdi mdi-basket me-1"></i> Purchase Now</a> </div> </div> </div> </div> </div> <!-- end slimscroll-menu--> </div> <!-- /Right-bar --> <!-- Right bar overlay--> <div class="rightbar-overlay"></div> <!-- Vendor js --> <script src="assets/js/vendor.min.js"></script> <!-- Plugins Js --> <script src="assets/libs/selectize/js/standalone/selectize.min.js"></script> <script src="assets/libs/mohithg-switchery/switchery.min.js"></script> <script src="assets/libs/multiselect/js/jquery.multi-select.js"></script> <script src="assets/libs/jquery.quicksearch/jquery.quicksearch.min.js"></script> <script src="assets/libs/select2/js/select2.min.js"></script> <script src="assets/libs/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js"></script> <script src="assets/libs/bootstrap-maxlength/bootstrap-maxlength.min.js"></script> <!-- init js --> <script src="assets/js/pages/form-advanced.init.js"></script> <!-- App js --> <script src="assets/js/app.min.js"></script> </body> <!-- Mirrored from coderthemes.com/minton_html/layouts/default/forms-advanced.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 11 Jul 2022 06:08:22 GMT --> </html>