代码拉取完成，页面将自动刷新
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
<title>Bootstrap Forms | CORK - Multipurpose Bootstrap Dashboard Template </title>
<link href="assets/css/loader.css" rel="stylesheet" type="text/css" />
<script src="assets/js/loader.js"></script>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/plugins.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN CUSTOM STYLE FILE -->
<link href="assets/css/scrollspyNav.css" rel="stylesheet" type="text/css" />
<!-- END CUSTOM STYLE FILE -->
</head>
<body data-spy="scroll" data-target="#navSection" data-offset="100">
<!-- BEGIN LOADER -->
<div id="load_screen"> <div class="loader"> <div class="loader-content"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 792 723" style="enable-background:new 0 0 792 723;" xml:space="preserve"> <g> <g> <path class="st0" d="M213.9,584.4c-47.4-25.5-84.7-60.8-111.8-106.1C75,433.1,61.4,382,61.4,324.9c0-57,13.6-108.1,40.7-153.3 S166.5,91,213.9,65.5s100.7-38.2,159.9-38.2c49.9,0,95,8.8,135.3,26.3s74.1,42.8,101.5,75.7l-85.5,78.9 c-38.9-44.9-87.2-67.4-144.7-67.4c-35.6,0-67.4,7.8-95.4,23.4s-49.7,37.4-65.4,65.4c-15.6,28-23.4,59.8-23.4,95.4 s7.8,67.4,23.4,95.4s37.4,49.7,65.4,65.4c28,15.6,59.7,23.4,95.4,23.4c57.6,0,105.8-22.7,144.7-68.2l85.5,78.9 c-27.4,33.4-61.4,58.9-102,76.5c-40.6,17.5-85.8,26.3-135.7,26.3C314.3,622.7,261.3,809.9,213.9,584.4z"/> </g> <circle class="st1" cx="375.4" cy="322.9" r="100"/> </g> <g> <circle class="st2" cx="275.4" cy="910" r="65"></circle> <circle class="st4" cx="475.4" cy="910" r="65"></circle> </g> </svg> </div></div></div>
<!-- END LOADER -->
<!-- BEGIN NAVBAR -->
<div class="header-container fixed-top">
<header class="header navbar navbar-expand-sm">
<ul class="navbar-item theme-brand flex-row text-center">
<li class="nav-item theme-logo">
<a href="index.html">
<img src="assets/img/logo.svg" class="navbar-logo" alt="logo">
</a>
</li>
<li class="nav-item theme-text">
<a href="index.html" class="nav-link"> CORK </a>
</li>
</ul>
<ul class="navbar-item flex-row ml-md-0 ml-auto">
<li class="nav-item align-self-center search-animated">
<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 toggle-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
<form class="form-inline search-full form-inline search" role="search">
<div class="search-bar">
<input type="text" class="form-control search-form-control ml-lg-auto" placeholder="Search...">
</div>
</form>
</li>
</ul>
<ul class="navbar-item flex-row ml-md-auto">
<li class="nav-item dropdown language-dropdown">
<a href="javascript:void(0);" class="nav-link dropdown-toggle" id="language-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="assets/img/ca.png" class="flag-width" alt="flag">
</a>
<div class="dropdown-menu position-absolute" aria-labelledby="language-dropdown">
<a class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/de.png" class="flag-width" alt="flag"> <span class="align-self-center"> German</span></a>
<a class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/jp.png" class="flag-width" alt="flag"> <span class="align-self-center"> Japanese</span></a>
<a class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/fr.png" class="flag-width" alt="flag"> <span class="align-self-center"> French</span></a>
<a class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/ca.png" class="flag-width" alt="flag"> <span class="align-self-center"> English</span></a>
</div>
</li>
<li class="nav-item dropdown message-dropdown">
<a href="javascript:void(0);" class="nav-link dropdown-toggle" id="messageDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<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-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
</a>
<div class="dropdown-menu p-0 position-absolute" aria-labelledby="messageDropdown">
<div class="">
<a class="dropdown-item">
<div class="">
<div class="media">
<div class="user-img">
<img class="usr-img rounded-circle" src="assets/img/profile-11.jpeg.jpg" alt="profile">
</div>
<div class="media-body">
<div class="">
<h5 class="usr-name">Kara Young</h5>
<p class="msg-title">ACCOUNT UPDATE</p>
</div>
</div>
</div>
</div>
</a>
<a class="dropdown-item">
<div class="">
<div class="media">
<div class="user-img">
<img class="usr-img rounded-circle" src="assets/img/profile-16.jpeg.jpg" alt="profile">
</div>
<div class="media-body">
<div class="">
<h5 class="usr-name">Daisy Anderson</h5>
<p class="msg-title">ACCOUNT UPDATE</p>
</div>
</div>
</div>
</div>
</a>
<a class="dropdown-item">
<div class="">
<div class="media">
<div class="user-img">
<img class="usr-img rounded-circle" src="assets/img/profile-34.jpeg.jpg" alt="profile">
</div>
<div class="media-body">
<div class="">
<h5 class="usr-name">Oscar Garner</h5>
<p class="msg-title">ACCOUNT UPDATE</p>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</li>
<li class="nav-item dropdown notification-dropdown">
<a href="javascript:void(0);" class="nav-link dropdown-toggle" id="notificationDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<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-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg><span class="badge badge-success"></span>
</a>
<div class="dropdown-menu position-absolute" aria-labelledby="notificationDropdown">
<div class="notification-scroll">
<div class="dropdown-item">
<div class="media">
<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-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<div class="media-body">
<div class="notification-para"><span class="user-name">Shaun Park</span> likes your photo.</div>
</div>
</div>
</div>
<div class="dropdown-item">
<div class="media">
<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-share-2"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>
<div class="media-body">
<div class="notification-para"><span class="user-name">Kelly Young</span> shared your post</div>
</div>
</div>
</div>
<div class="dropdown-item">
<div class="media">
<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-tag"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7" y2="7"></line></svg>
<div class="media-body">
<div class="notification-para"><span class="user-name">Kelly Young</span> mentioned you in comment.</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown user-profile-dropdown">
<a href="javascript:void(0);" class="nav-link dropdown-toggle user" id="userProfileDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<img src="assets/img/profile-16.jpeg.jpg" alt="avatar">
</a>
<div class="dropdown-menu position-absolute" aria-labelledby="userProfileDropdown">
<div class="">
<div class="dropdown-item">
<a class="" href="user_profile.html"><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-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg> My Profile</a>
</div>
<div class="dropdown-item">
<a class="" href="apps_mailbox.html"><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-inbox"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg> Inbox</a>
</div>
<div class="dropdown-item">
<a class="" href="auth_lockscreen.html"><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-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> Lock Screen</a>
</div>
<div class="dropdown-item">
<a class="" href="auth_login.html"><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-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg> Sign Out</a>
</div>
</div>
</div>
</li>
</ul>
</header>
</div>
<!-- END NAVBAR -->
<!-- BEGIN NAVBAR -->
<div class="sub-header-container">
<header class="header navbar navbar-expand-sm">
<a href="javascript:void(0);" class="sidebarCollapse" data-placement="bottom"><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></a>
<ul class="navbar-nav flex-row">
<li>
<div class="page-header">
<nav class="breadcrumb-one" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="javascript:void(0);">Forms</a></li>
<li class="breadcrumb-item active" aria-current="page"><span>Basic</span></li>
</ol>
</nav>
</div>
</li>
</ul>
</header>
</div>
<!-- END NAVBAR -->
<!-- BEGIN MAIN CONTAINER -->
<div class="main-container" id="container">
<div class="overlay"></div>
<div class="search-overlay"></div>
<!-- BEGIN SIDEBAR -->
<div class="sidebar-wrapper sidebar-theme">
<nav id="sidebar">
<div class="shadow-bottom"></div>
<ul class="list-unstyled menu-categories" id="accordionExample">
<li class="menu">
<a href="#dashboard" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<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-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
<span>Dashboard</span>
</div>
<div>
<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>
</div>
</a>
<ul class="collapse submenu list-unstyled" id="dashboard" data-parent="#accordionExample">
<li>
<a href="index.html"> Sales </a>
</li>
<li>
<a href="index2.html"> Analytics </a>
</li>
</ul>
</li>
<li class="menu">
<a href="#app" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<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-cpu"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>
<span>Apps</span>
</div>
<div>
<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>
</div>
</a>
<ul class="collapse submenu list-unstyled" id="app" data-parent="#accordionExample">
<li>
<a href="apps_chat.html"> Chat </a>
</li>
<li>
<a href="apps_mailbox.html"> Mailbox </a>
</li>
<li>
<a href="apps_todoList.html"> Todo List </a>
</li>
<li>
<a href="apps_notes.html"> Notes </a>
</li>
<li>
<a href="apps_scrumboard.html">Scrumboard</a>
</li>
<li>
<a href="apps_contacts.html"> Contacts </a>
</li>
<li>
<a href="apps_invoice.html"> Invoice List </a>
</li>
<li>
<a href="apps_calendar.html"> Calendar </a>
</li>
</ul>
</li>
<li class="menu">
<a href="#components" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<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-box"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
<span>Components</span>
</div>
<div>
<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>
</div>
</a>
<ul class="collapse submenu list-unstyled" id="components" data-parent="#accordionExample">
<li>
<a href="component_tabs.html"> Tabs </a>
</li>
<li>
<a href="component_accordion.html"> Accordions </a>
</li>
<li>
<a href="component_modal.html"> Modals </a>
</li>
<li>
<a href="component_cards.html"> Cards </a>
</li>
<li>
<a href="component_bootstrap_carousel.html">Carousel</a>
</li>
<li>
<a href="component_blockui.html"> Block UI </a>
</li>
<li>
<a href="component_countdown.html"> Countdown </a>
</li>
<li>
<a href="component_counter.html"> Counter </a>
</li>
<li>
<a href="component_sweetalert.html"> Sweet Alerts </a>
</li>
<li>
<a href="component_timeline.html"> Timeline </a>
</li>
<li>
<a href="component_snackbar.html"> Notifications </a>
</li>
<li>
<a href="component_session_timeout.html"> Session Timeout </a>
</li>
<li>
<a href="component_media_object.html"> Media Object </a>
</li>
<li>
<a href="component_list_group.html"> List Group </a>
</li>
<li>
<a href="component_pricing_table.html"> Pricing Tables </a>
</li>
<li>
<a href="component_lightbox.html"> Lightbox </a>
</li>
</ul>
</li>
<li class="menu">
<a href="#elements" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<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-zap"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
<span>Elements</span>
</div>
<div>
<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>
</div>
</a>
<ul class="collapse submenu list-unstyled" id="elements" data-parent="#accordionExample">
<li>
<a href="element_alerts.html"> Alerts </a>
</li>
<li>
<a href="element_avatar.html"> Avatar </a>
</li>
<li>
<a href="element_badges.html"> Badges </a>
</li>
<li>
<a href="element_breadcrumbs.html"> Breadcrumbs </a>
</li>
<li>
<a href="element_buttons.html"> Buttons </a>
</li>
<li>
<a href="element_buttons_group.html"> Button Groups </a>
</li>
<li>
<a href="element_color_library.html"> Color Library </a>
</li>
<li>
<a href="element_dropdown.html"> Dropdown </a>
</li>
<li>
<a href="element_infobox.html"> Infobox </a>
</li>
<li>
<a href="element_jumbotron.html"> Jumbotron </a>
</li>
<li>
<a href="element_loader.html"> Loader </a>
</li>
<li>
<a href="element_pagination.html"> Pagination </a>
</li>
<li>
<a href="element_popovers.html"> Popovers </a>
</li>
<li>
<a href="element_progress_bar.html"> Progress Bar </a>
</li>
<li>
<a href="element_search.html"> Search </a>
</li>
<li>
<a href="element_tooltips.html"> Tooltips </a>
</li>
<li>
<a href="element_treeview.html"> Treeview </a>
</li>
<li>
<a href="element_typography.html"> Typography </a>
</li>
</ul>
</li>
<li class="menu">
<a href="fonticons.html" aria-expanded="false" class="dropdown-toggle">
<div class="">
<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-target"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle></svg>
<span>Font Icons</span>
</div>
</a>
</li>
<li class="menu">
<a href="widgets.html" aria-expanded="false" class="dropdown-toggle">
<div class="">
<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-airplay"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon></svg>
<span>Widgets</span>
</div>
</a>
</li>
<li class="menu">
<a href="table_basic.html" aria-expanded="false" class="dropdown-toggle">
<div class="">
<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-layout"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
<span>Tables</span>
</div>
</a>
</li>
<li class="menu">
<a href="#datatables" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<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-layers"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
<span>DataTables</span>
</div>
<div>
<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>
</div>
</a>
<ul class="collapse submenu list-unstyled" id="datatables" data-parent="#accordionExample">
<li>
<a href="table_dt_basic.html"> Basic </a>
</li>
<li>
<a href="table_dt_basic-dark.html"> Dark </a>
</li>
<li>
<a href="table_dt_ordering_sorting.html"> Order Sorting </a>
</li>
<li>
<a href="table_dt_multi-column_ordering.html"> Multi-Column </a>
</li>
<li>
<a href="table_dt_multiple_tables.html"> Multiple Tables</a>
</li>
<li>
<a href="table_dt_alternative_pagination.html"> Alt. Pagination</a>
</li>
<li>
<a href="table_dt_custom.html"> Custom </a>
</li>
<li>
<a href="table_dt_range_search.html"> Range Search </a>
</li>
<li>
<a href="table_dt_html5.html"> HTML5 Export </a>
</li>
<li>
<a href="table_dt_live_dom_ordering.html"> Live DOM ordering </a>
</li>
<li>
<a href="table_dt_miscellaneous.html"> Miscellaneous </a>
</li>
</ul>
</li>
<li class="menu">
<a href="#forms" data-toggle="collapse" data-active="true" aria-expanded="true" class="dropdown-toggle">
<div class="">
<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-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
<span>Forms</span>
</div>
<div>
<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>
</div>
</a>
<ul class="collapse submenu list-unstyled show" id="forms" data-parent="#accordionExample">
<li class="active">
<a href="form_bootstrap_basic.html"> Basic </a>
</li>
<li>
<a href="form_input_group_basic.html"> Input Group </a>
</li>
<li>
<a href="form_layouts.html"> Layouts </a>
</li>
<li>
<a href="form_validation.html"> Validation </a>
</li>
<li>
<a href="form_input_mask.html"> Input Mask </a>
</li>
<li>
<a href="form_bootstrap_select.html"> Bootstrap Select </a>
</li>
<li>
<a href="form_select2.html"> Select2 </a>
</li>
<li>
<a href="form_bootstrap_touchspin.html"> TouchSpin </a>
</li>
<li>
<a href="form_maxlength.html"> Maxlength </a>
</li>
<li>
<a href="form_checkbox_radio.html"> Checkbox & Radio </a>
</li>
<li>
<a href="form_switches.html"> Switches </a>
</li>
<li>
<a href="form_wizard.html"> Wizards </a>
</li>
<li>
<a href="form_fileupload.html"> File Upload </a>
</li>
<li>
<a href="form_quill.html"> Quill Editor </a>
</li>
<li>
<a href="form_markdown.html"> Markdown Editor </a>
</li>
<li>
<a href="form_date_range_picker.html"> Date & Range Picker </a>
</li>
<li>
<a href="form_clipboard.html"> Clipboard </a>
</li>
<li>
<a href="form_typeahead.html"> Typeahead </a>
</li>
</ul>
</li>
<li class="menu">
<a href="#users" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<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-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
<span>Users</span>
</div>
<div>
<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>
</div>
</a>
<ul class="collapse submenu list-unstyled" id="users" data-parent="#accordionExample">
<li>
<a href="user_profile.html"> Profile </a>
</li>
<li>
<a href="user_account_setting.html"> Account Settings </a>
</li>
</ul>
</li>
<li class="menu">
<a href="#pages" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<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>
<span>Pages</span>
</div>
<div>
<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>
</div>
</a>
<ul class="collapse submenu list-unstyled" id="pages" data-parent="#accordionExample">
<li>
<a href="pages_helpdesk.html"> Helpdesk </a>
</li>
<li>
<a href="pages_contact_us.html"> Contact Form </a>
</li>
<li>
<a href="pages_faq.html"> FAQ </a>
</li>
<li>
<a href="pages_faq2.html"> FAQ 2 </a>
</li>
<li>
<a href="pages_privacy.html"> Privacy Policy </a>
</li>
<li>
<a href="pages_coming_soon.html"> Coming Soon </a>
</li>
<li>
<a href="#pages-error" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Error <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> </a>
<ul class="collapse list-unstyled sub-submenu" id="pages-error" data-parent="#pages">
<li>
<a href="pages_error404.html"> 404 </a>
</li>
<li>
<a href="pages_error500.html"> 500 </a>
</li>
<li>
<a href="pages_error503.html"> 503 </a>
</li>
<li>
<a href="pages_maintenence.html"> Maintanence </a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<a href="#authentication" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<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-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
<span>Authentication</span>
</div>
<div>
<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>
</div>
</a>
<ul class="collapse submenu list-unstyled" id="authentication" data-parent="#accordionExample">
<li>
<a href="auth_login_boxed.html"> Login Boxed </a>
</li>
<li>
<a href="auth_register_boxed.html"> Register Boxed </a>
</li>
<li>
<a href="auth_lockscreen_boxed.html"> Unlock Boxed </a>
</li>
<li>
<a href="auth_pass_recovery_boxed.html"> Recover ID Boxed </a>
</li>
<li>
<a href="auth_login.html"> Login Cover </a>
</li>
<li>
<a href="auth_register.html"> Register Cover </a>
</li>
<li>
<a href="auth_lockscreen.html"> Unlock Cover </a>
</li>
<li>
<a href="auth_pass_recovery.html"> Recover ID Cover </a>
</li>
</ul>
</li>
<li class="menu">
<a href="dragndrop_dragula.html" aria-expanded="false" class="dropdown-toggle">
<div class="">
<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-move"><polyline points="5 9 2 12 5 15"></polyline><polyline points="9 5 12 2 15 5"></polyline><polyline points="15 19 12 22 9 19"></polyline><polyline points="19 9 22 12 19 15"></polyline><line x1="2" y1="12" x2="22" y2="12"></line><line x1="12" y1="2" x2="12" y2="22"></line></svg>
<span>Drag and Drop</span>
</div>
</a>
</li>
<li class="menu">
<a href="map_jvector.html" aria-expanded="false" class="dropdown-toggle">
<div class="">
<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-map"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon><line x1="8" y1="2" x2="8" y2="18"></line><line x1="16" y1="6" x2="16" y2="22"></line></svg>
<span>Maps</span>
</div>
</a>
</li>
<li class="menu">
<a href="charts_apex.html" aria-expanded="false" class="dropdown-toggle">
<div class="">
<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-pie-chart"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
<span>Charts</span>
</div>
</a>
</li>
<li class="menu">
<a href="#starter-kit" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<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-terminal"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
<span>Starter Kit</span>
</div>
<div>
<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>
</div>
</a>
<ul class="collapse submenu list-unstyled" id="starter-kit" data-parent="#accordionExample">
<li>
<a href="starter_kit_blank_page.html"> Blank Page </a>
</li>
<li>
<a href="starter_kit_breadcrumbs.html"> Breadcrumbs </a>
</li>
<li>
<a href="starter_kit_boxed.html"> Boxed </a>
</li>
<li>
<a href="starter_kit_alt_menu.html"> Alternate Menu </a>
</li>
</ul>
</li>
<li class="menu">
<a href="" aria-expanded="false" class="dropdown-toggle">
<div class="">
<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-book"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
<span>Documentation</span>
</div>
</a>
</li>
</ul>
</nav>
</div>
<!-- END SIDEBAR -->
<!-- BEGIN CONTENT AREA -->
<div id="content" class="main-content">
<div class="container">
<div class="container">
<div id="navSection" data-spy="affix" class="nav sidenav">
<div class="sidenav-content">
<a href="#basic" class="active nav-link">Basic</a>
<a href="#form_grid_layouts" class="nav-link">Form Grid Layouts</a>
<a href="#helper_text" class="nav-link">Helper Text</a>
<a href="#form_sizing" class="nav-link">Sizing</a>
<a href="#readonly_input" class="nav-link">Readonly Input</a>
<a href="#html_custom_file_upload" class="nav-link">HTML Custom File Upload</a>
<a href="#disabled_form" class="nav-link">Disabled Fields</a>
<a href="#custom_bs_forms" class="nav-link">Custom Bootstrap Forms</a>
</div>
</div>
<div class="row layout-top-spacing">
<div id="basic" class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Input Text</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class="row">
<div class="col-lg-6 col-12 mx-auto">
<form method="post">
<div class="form-group">
<p>Use input <code>type="text"</code>.</p>
<label for="t-text" class="sr-only">Text</label>
<input id="t-text" type="text" name="txt" placeholder="Some Text..." class="form-control" required>
<input type="submit" name="txt" class="mt-4 btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Input Password</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class="row">
<div class="col-lg-6 col-12 mx-auto">
<form method="post">
<div class="form-group">
<p>Use input <code>type="password"</code>.</p>
<label for="p-text" class="sr-only">Password</label>
<input id="p-text" type="password" name="pass" placeholder="Password" class="form-control" required>
<input type="submit" name="pass" class="mt-4 btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Input Email</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class="row">
<div class="col-lg-6 col-12 mx-auto">
<form method="post">
<div class="form-group">
<p>Use input <code>type="email"</code>.</p>
<label for="e-text" class="sr-only">Email</label>
<input id="e-text" type="email" name="email" placeholder="email@mail.com" class="form-control" required>
<input type="submit" name="email" class="mt-4 btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Input Url</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class="row">
<div class="col-lg-6 col-12 mx-auto">
<form method="post">
<div class="form-group">
<p>Use input <code>type="url"</code>.</p>
<label for="url-text" class="sr-only">Url</label>
<input id="url-text" type="url" name="url" placeholder="https://dummyurl.com" class="form-control" required>
<input type="submit" name="url" class="mt-4 btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Input Telephone</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class="row">
<div class="col-lg-6 col-12 mx-auto">
<form method="post">
<div class="form-group">
<p>Use input <code>type="tel"</code>.</p>
<label for="tel-text" class="sr-only">Telephone</label>
<input id="tel-text" type="tel" name="tel" placeholder="6-(666)-111-7777" class="form-control" required>
<input type="submit" name="tel" class="mt-4 btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Input Search</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class="row">
<div class="col-lg-6 col-12 mx-auto">
<form method="post">
<div class="form-group">
<p>Use input <code>type="search"</code>.</p>
<label for="search-text" class="sr-only">Search</label>
<input id="search-text" type="search" class="form-control" required>
<input type="submit" name="search" class="mt-4 btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Input Range</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class="row">
<div class="col-lg-6 col-12 mx-auto">
<form method="post">
<div class="form-group">
<p>Use input <code>type="range"</code>.</p>
<label for="range-text" class="sr-only">Range</label>
<input id="range-text" type="range" name="range" class="form-control">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Input Custom Range</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class="row">
<div class="col-lg-6 col-12 mx-auto">
<form method="post">
<div class="form-group">
<p>Use input <code>type="range"</code>.</p>
<label for="range-text" class="sr-only">Custom Range</label>
<label for="customRange1" class="sr-only">Example range</label>
<input type="range" class="custom-range" id="customRange1">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Input With Label</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class="row">
<div class="col-lg-6 col-12 mx-auto">
<div class="form-group">
<label for="exampleFormControlInput1">Full Name</label>
<input type="text" class="form-control" id="exampleFormControlInput1" value="Alan Green">
</div>
</div>
</div>
<div class="code-section-container show-code">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<div class="form-group">
<label for="exampleFormControlInput1">Full Name</label>
<input type="text" class="form-control" id="exampleFormControlInput1" value="Alan Green">
</div> </pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Form controls</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<form>
<div class="form-group mb-4">
<label for="exampleFormControlInput2">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput2" placeholder="name@example.com">
</div>
<div class="form-group mb-4">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group mb-4">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group mb-4">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="form-group mb-4 mt-3">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
<input type="submit" name="time" class="mt-4 mb-4 btn btn-primary">
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div id="form_grid_layouts" class="col-lg-12">
<div class="seperator-header">
<h4 class="">Form Grid Layouts</h4>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Form grid</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<form>
<div class="row mb-4">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
<input type="submit" name="time" class="btn btn-primary">
</form>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<form>
<div class="row mb-4">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
<input type="submit" name="time" class="btn btn-primary">
</form>
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Form row</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<form>
<div class="form-row mb-4">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
<input type="submit" name="time" class="btn btn-primary">
</form>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<form>
<div class="form-row mb-4">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
<input type="submit" name="time" class="mb-4 btn btn-primary">
</form>
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Form groups</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<form>
<div class="form-group mb-4">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group mb-4">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
<input type="submit" name="time" class="btn btn-primary">
</form>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<form>
<div class="form-group mb-4">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group mb-4">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
<input type="submit" name="time" class="btn btn-primary">
</form>
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Column sizing</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<form>
<div class="form-row mb-4">
<div class="col-7">
<input type="text" class="form-control" placeholder="City">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="State">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>
<input type="submit" name="time" class="btn btn-primary">
</form>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<form>
<div class="form-row mb-4">
<div class="col-7">
<input type="text" class="form-control" placeholder="City">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="State">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>
<input type="submit" name="time" class="mb-4 btn btn-primary">
</form>
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="helper_text" class="col-lg-12">
<div class="seperator-header">
<h4 class="">Helper Text</h4>
</div>
</div>
<div class="col-xl-12 col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Input with help text ( Default Left)</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class="row">
<div class="col-xl-7 mx-auto">
<div class="form-group">
<p>Use <code>small</code> tag and <code>.text-muted</code> for helper text. </p>
<label for="h-text1" class="sr-only">Email address</label>
<input type="text" class="form-control" id="h-text1" aria-describedby="h-text1" placeholder="">
<small id="sh-text1" class="form-text text-muted">I am the helper text.</small>
</div>
</div>
</div>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<div class="form-group">
<p>Use <code>small</code> tag and <code>.text-muted</code> for helper text. </p>
<label for="h-text1" class="sr-only">Email address</label>
<input type="text" class="form-control" id="h-text1" aria-describedby="h-text1" placeholder="">
<small id="sh-text1" class="form-text text-muted">I am the helper text.</small>
</div></pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Input with badge help text (Default Left)</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class="row">
<div class="col-xl-7 mx-auto">
<div class="form-group">
<p>Wrap the <code>small</code> tag inside the <code>span</code> tag with <code>.badge</code></p>
<label for="h-text4" class="sr-only">Email address</label>
<input type="text" class="form-control" id="h-text4" aria-describedby="h-text4" placeholder="">
<div class=" mt-1">
<span class="badge badge-primary">
<small id="sh-text4" class="form-text mt-0">I am the helper text.</small>
</span>
</div>
</div>
</div>
</div>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<div class="form-group">
<p>Wrap the <code>small</code> tag inside the <code>span</code> tag with <code>.badge</code></p>
<label for="h-text4" class="sr-only">Email address</label>
<input type="text" class="form-control" id="h-text4" aria-describedby="h-text4" placeholder="">
<div class=" mt-1">
<span class="badge badge-primary">
<small id="sh-text4" class="form-text mt-0">I am the helper text.</small>
</span>
</div>
</div></pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Input with block badge help text (Default Left)</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class="row">
<div class="col-xl-7 mx-auto">
<div class="form-group">
<p>Use <code>.w-100</code> class to the <code>span</code> tag to make block.</p>
<label for="h-text7" class="sr-only">Email address</label>
<input type="text" class="form-control" id="h-text7" aria-describedby="h-text7" placeholder="">
<div class="mt-1">
<span class="badge badge-primary w-100">
<small id="sh-text7" class="form-text mt-0 text-left">I am the helper text.</small>
</span>
</div>
</div>
</div>
</div>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<div class="form-group">
<p>Use <code>.w-100</code> class to the <code>span</code> tag to make block.</p>
<label for="h-text7" class="sr-only">Email address</label>
<input type="text" class="form-control" id="h-text7" aria-describedby="h-text7" placeholder="">
<div class="mt-1">
<span class="badge badge-primary w-100">
<small id="sh-text7" class="form-text mt-0 text-left">I am the helper text.</small>
</span>
</div>
</div></pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Inline Help text</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<form class="form-inline mb-4">
<div class="form-group d-block text-left">
<label for="inputPassword6" class="d-block">Password</label>
<input type="password" id="inputPassword6" class=" form-control mt-2" aria-describedby="passwordHelpInline">
<small id="passwordHelpInline" class="text-muted">
Min 8-20 char
</small>
</div>
</form>
<input type="submit" name="time" class="btn btn-primary">
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<form class="form-inline mb-4">
<div class="form-group d-block text-left">
<label for="inputPassword6" class="d-block">Password</label>
<input type="password" id="inputPassword6" class=" form-control mt-2" aria-describedby="passwordHelpInline">
<small id="passwordHelpInline" class="text-muted">
Min 8-20 char
</small>
</div>
</form>
<input type="submit" name="time" class="btn btn-primary">
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="form_sizing" class="col-lg-12">
<div class="seperator-header">
<h4 class="">Sizing</h4>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Input Fields</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class="row">
<div class="col-xl-4">
<div class="form-group">
<label for="exampleFormControlInput1">Large Input</label>
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label for="exampleFormControlInput1">Default Input</label>
<input class="form-control" type="text" placeholder="Default input">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label for="exampleFormControlInput1">Small Input</label>
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
</div>
</div>
</div>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<!-- Large Input -->
<div class="form-group">
<label for="exampleFormControlInput1">Large Input</label>
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
</div>
<!-- Default Input -->
<div class="form-group">
<label for="exampleFormControlInput1">Default Input</label>
<input class="form-control" type="text" placeholder="Default input">
</div>
<!-- Small Input -->
<div class="form-group">
<label for="exampleFormControlInput1">Small Input</label>
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
</div>
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Select Field</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class="row">
<div class="col-xl-4 mb-xl-0 mb-2">
<select class="form-control form-control-lg">
<option>Large select</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div class="col-xl-4 mb-xl-0 mb-2">
<select class="form-control">
<option>Default select</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div class="col-xl-4 mb-xl-0 mb-2">
<select class="form-control form-control-sm">
<option>Small select</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
</div>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<!-- Large Input -->
<select class="form-control form-control-lg">
<option>Large select</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<!-- Default Input -->
<select class="form-control">
<option>Default select</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<!-- Small Input -->
<select class="form-control form-control-sm">
<option>Small select</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Horizontal form label sizing</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<form>
<div class="form-group row mb-4">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
</div>
<div class="form-group row mb-4">
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
</div>
</div>
<div class="form-group row mb-4">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
</div>
</div>
<input type="submit" name="time" class="mb-4 btn btn-primary">
</form>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<div class="form-group row mb-4">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
</div>
<div class="form-group row mb-4">
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
</div>
</div>
<div class="form-group row mb-4">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
</div>
<div id="readonly_input" class="col-lg-12">
<div class="seperator-header">
<h4 class="">Readonly</h4>
</div>
</div>
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Input Readonly</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
</pre>
</div>
</div>
</div>
</div>
</div>
<div id="html_custom_file_upload" class="col-lg-12">
<div class="seperator-header">
<h4 class="">HTML Custom File Upload</h4>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>File Upload</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<div class="custom-file mb-4">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</pre>
</div>
</div>
</div>
</div>
</div>
<div id="disabled_form" class="col-lg-12">
<div class="seperator-header">
<h4 class="">Disabled</h4>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Disabled Fields</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<form>
<fieldset disabled>
<div class="form-group mb-4">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group mb-4">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-check mt-5 mb-3 pl-0">
<div class="custom-control custom-checkbox mb-4">
<input type="checkbox" class="custom-control-input" id="disabledFieldsetCheck">
<label class="custom-control-label" for="disabledFieldsetCheck">Can't check this</label>
</div>
</div>
<button type="submit" class="btn btn-primary mt-0">Submit</button>
</fieldset>
</form>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<form>
<fieldset disabled>
<div class="form-group mb-4">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group mb-4">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-check mt-5 mb-3 pl-0">
<div class="custom-control custom-checkbox mb-4">
<input type="checkbox" class="custom-control-input" id="disabledFieldsetCheck">
<label class="custom-control-label" for="disabledFieldsetCheck">Can't check this</label>
</div>
</div>
<button type="submit" class="btn btn-primary mt-0">Submit</button>
</fieldset>
</form>
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row layout-spacing">
<div id="custom_bs_forms" class="col-lg-12">
<div class="seperator-header">
<h4 class="">Custom</h4>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Checkboxes</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Inline radio</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Toggle this custom radio</label>
</div>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Toggle this custom radio</label>
</div>
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Radio</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Disabled</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
<label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>
<div class="custom-control custom-radio mb-4">
<input type="radio" id="radio3" name="radioDisabled" class="custom-control-input" disabled>
<label class="custom-control-label" for="radio3">Toggle this custom radio</label>
</div>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
<label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>
<div class="custom-control custom-radio mb-4">
<input type="radio" id="radio3" name="radioDisabled" class="custom-control-input" disabled>
<label class="custom-control-label" for="radio3">Toggle this custom radio</label>
</div>
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Select menu</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<select class="custom-select mb-4">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<select class="custom-select mb-4">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Select menu sizing</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<select class="custom-select custom-select-lg">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm mt-4">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<select class="custom-select custom-select-lg">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Multi select</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<select class="custom-select" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<select class="custom-select" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Select size</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<select class="custom-select mb-4" size="4">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="3">Four</option>
<option value="3">Five</option>
</select>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
<select class="custom-select mb-4" size="4">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="3">Four</option>
<option value="3">Five</option>
</select>
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-wrapper">
<div class="footer-section f-section-1">
<p class="">Copyright © 2020 <a target="_blank" href="../../../designreset.html">DesignReset</a>, All rights <a href="http://www.bootstrapmb.com">Reserved </a>.</p>
</div>
<div class="footer-section f-section-2">
<p class="">Coded with <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-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></p>
</div>
</div>
</div>
<!-- END CONTENT AREA -->
</div>
<!-- END MAIN CONTAINER -->
<!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
<script src="assets/js/libs/jquery-3.1.1.min.js"></script>
<script src="bootstrap/js/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/js/app.js"></script>
<script>
$(document).ready(function() {
App.init();
});
</script>
<script src="plugins/highlight/highlight.pack.js"></script>
<script src="assets/js/custom.js"></script>
<!-- END GLOBAL MANDATORY SCRIPTS -->
<script src="assets/js/scrollspyNav.js"></script>
</body>
</html>
举报
请认真填写举报原因，尽可能描述详细。
请选择举报类型
误判申诉
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化