1067 lines
116 KiB
HTML
1067 lines
116 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
||
<link rel="icon" href="../../assets/img/favicon.png" type="image/png">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<meta name="author" content="Creative Tim">
|
||
<title>
|
||
Forms | Material Dashboard 2 FREE Laravel by Creative Tim & UPDIVISION
|
||
</title>
|
||
<link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/colors/material-dashboard" />
|
||
|
||
<meta name="keywords" content="creative tim, updivision, html dashboard, laravel, material, html css dashboard laravel, material dashboard laravel, laravel material dashboard, material admin, laravel dashboard, laravel admin, web dashboard, bootstrap 5 dashboard laravel, bootstrap 5, css3 dashboard, bootstrap 5 admin laravel, material dashboard bootstrap 5 laravel, frontend, responsive bootstrap 5 dashboard, material dashboard, material laravel bootstrap 5 dashboard" />
|
||
<meta name="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||
<meta itemprop="name" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||
<meta itemprop="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||
<meta name="twitter:card" content="product" />
|
||
<meta name="twitter:site" content="@creativetim" />
|
||
<meta name="twitter:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||
<meta name="twitter:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||
<meta name="twitter:creator" content="@creativetim" />
|
||
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||
<meta property="fb:app_id" content="655968634437471" />
|
||
<meta property="og:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||
<meta property="og:type" content="article" />
|
||
<meta property="og:url" content="https://www.creative-tim.com/live/material-dashboard-laravel" />
|
||
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||
<meta property="og:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||
<meta property="og:site_name" content="Creative Tim" />
|
||
|
||
<link rel="stylesheet" href="../../assets/css/nucleo-icons.css" type="text/css">
|
||
|
||
<link rel="stylesheet" href="../../assets/css/nextjs-material-dashboard-pro.min.css" type="text/css">
|
||
|
||
<link rel="stylesheet" href="../../assets/css/material-dashboard.min.css" type="text/css">
|
||
<link rel="stylesheet" href="../../assets/css/demo.css" type="text/css">
|
||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||
|
||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700" rel="stylesheet">
|
||
|
||
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet">
|
||
|
||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||
<!-- Anti-flicker snippet (recommended) -->
|
||
<style>
|
||
.async-hide {
|
||
opacity: 0 !important
|
||
}
|
||
</style>
|
||
<script>
|
||
(function(a, s, y, n, c, h, i, d, e) {
|
||
s.className += ' ' + y;
|
||
h.start = 1 * new Date;
|
||
h.end = i = function() {
|
||
s.className = s.className.replace(RegExp(' ?' + y), '')
|
||
};
|
||
(a[n] = a[n] || []).hide = h;
|
||
setTimeout(function() {
|
||
i();
|
||
h.end = null
|
||
}, c);
|
||
h.timeout = c;
|
||
})(window, document.documentElement, 'async-hide', 'dataLayer', 4000, {
|
||
'GTM-K9BGS8K': true
|
||
});
|
||
</script>
|
||
<!-- Analytics-Optimize Snippet -->
|
||
<script>
|
||
(function(i, s, o, g, r, a, m) {
|
||
i['GoogleAnalyticsObject'] = r;
|
||
i[r] = i[r] || function() {
|
||
(i[r].q = i[r].q || []).push(arguments)
|
||
}, i[r].l = 1 * new Date();
|
||
a = s.createElement(o),
|
||
m = s.getElementsByTagName(o)[0];
|
||
a.async = 1;
|
||
a.src = g;
|
||
m.parentNode.insertBefore(a, m)
|
||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||
ga('create', 'UA-46172202-22', 'auto', {
|
||
allowLinker: true
|
||
});
|
||
ga('set', 'anonymizeIp', true);
|
||
ga('require', 'GTM-K9BGS8K');
|
||
ga('require', 'displayfeatures');
|
||
ga('require', 'linker');
|
||
ga('linker:autoLink', ["2checkout.com", "avangate.com"]);
|
||
</script>
|
||
<!-- end Analytics-Optimize Snippet -->
|
||
<!-- Google Tag Manager -->
|
||
<script>
|
||
(function(w, d, s, l, i) {
|
||
w[l] = w[l] || [];
|
||
w[l].push({
|
||
'gtm.start': new Date().getTime(),
|
||
event: 'gtm.js'
|
||
});
|
||
var f = d.getElementsByTagName(s)[0],
|
||
j = d.createElement(s),
|
||
dl = l != 'dataLayer' ? '&l=' + l : '';
|
||
j.async = true;
|
||
j.src =
|
||
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
|
||
f.parentNode.insertBefore(j, f);
|
||
})(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6');
|
||
</script>
|
||
<!-- End Google Tag Manager -->
|
||
<!-- This is for docs typography and layout -->
|
||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
|
||
<link href="../../assets/css/docs.css" rel="stylesheet" />
|
||
</head>
|
||
|
||
<body class="docs ">
|
||
<!-- Google Tag Manager (noscript) -->
|
||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||
<!-- End Google Tag Manager (noscript) -->
|
||
<header class="ct-docs-navbar">
|
||
<a class="ct-docs-navbar-brand" href="javascript:void(0)" aria-label="Bootstrap">
|
||
</a><a href="https://www.creative-tim.com/" class="ct-docs-navbar-text" target="_blank">
|
||
Creative Tim
|
||
</a>
|
||
<div class="ct-docs-navbar-border"></div>
|
||
<a href="../../documentation/getting-started/installation.html" class="ct-docs-navbar-text">
|
||
Docs
|
||
</a>
|
||
|
||
<ul class="ct-docs-navbar-nav-left">
|
||
<li class="ct-docs-nav-item-dropdown">
|
||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||
<span class="ct-docs-navbar-nav-link-inner--text">Live Preview</span>
|
||
</a>
|
||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownPreview">
|
||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-laravel.creative-tim.com" target="_blank">
|
||
Material Dashboard 2 Laravel
|
||
</a>
|
||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-pro-laravel.creative-tim.com" target="_blank">
|
||
Material Dashboard 2 Pro Laravel
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<li class="ct-docs-nav-item-dropdown">
|
||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||
<span class="ct-docs-navbar-nav-link-inner--text">Support</span>
|
||
</a>
|
||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownSupport">
|
||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/material-dashboard-laravel/issues" target="_blank">
|
||
Material Dashboard 2 Laravel
|
||
</a>
|
||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/ct-material-dashboard-pro-laravel/issues" target="_blank">
|
||
Material Dashboard 2 Pro Laravel
|
||
</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<ul class="ct-docs-navbar-nav-right">
|
||
<li class="ct-docs-navbar-nav-item">
|
||
<a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/product/material-dashboard-laravel" target="_blank">Download Free</a>
|
||
</li>
|
||
</ul>
|
||
<a href="https://www.creative-tim.com/product/material-dashboard-pro-laravel" target="_blank" class="ct-docs-btn-upgrade">
|
||
<span class="ct-docs-btn-inner--icon">
|
||
<i class="fas fa-download mr-2" aria-hidden="true"></i>
|
||
</span>
|
||
<span class="ct-docs-navbar-nav-link-inner--text">Upgrade to PRO</span>
|
||
</a>
|
||
<button class="ct-docs-navbar-toggler" type="button">
|
||
<span class="ct-docs-navbar-toggler-icon"></span>
|
||
</button>
|
||
</header>
|
||
<div class="ct-docs-main-container">
|
||
<div class="ct-docs-main-content-row">
|
||
<div class="ct-docs-sidebar-col">
|
||
<nav class="ct-docs-sidebar-collapse-links">
|
||
<div class="ct-docs-sidebar-product">
|
||
<div class="ct-docs-sidebar-product-image">
|
||
<img src="../../assets/img/bootstrap.png">
|
||
</div>
|
||
<p class="ct-docs-sidebar-product-text">Material Dashboard</p>
|
||
</div>
|
||
<div class="ct-docs-toc-item-active">
|
||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||
<div class="d-inline-block">
|
||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||
<i class="ni ni-active-40 text-white"></i>
|
||
</div>
|
||
</div>
|
||
Getting started
|
||
</a>
|
||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||
<li class="">
|
||
<a href="../../documentation/getting-started/overview.html">
|
||
Overview
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/getting-started/license.html">
|
||
License
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/getting-started/installation.html">
|
||
Installation
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/getting-started/build-tools.html">
|
||
Build Tools
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/getting-started/bootstrap.html">
|
||
What is Bootstrap
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="ct-docs-toc-item-active">
|
||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||
<div class="d-inline-block">
|
||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||
<i class="ni ni-folder-17 text-white"></i>
|
||
</div>
|
||
</div>
|
||
Laravel
|
||
</a>
|
||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||
<li class="">
|
||
<a href="../../documentation/laravel/login.html">
|
||
Login
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/laravel/sign-up.html">
|
||
Sign Up
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/laravel/forgot-password.html">
|
||
Forgot Password
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/laravel/user-profile.html">
|
||
User Profile
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/laravel/user-management.html">
|
||
User Management
|
||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="ct-docs-toc-item-active">
|
||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||
<div class="d-inline-block">
|
||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||
<i class="ni ni-folder-17 text-white"></i>
|
||
</div>
|
||
</div>
|
||
Foundation
|
||
</a>
|
||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||
<li class=" ">
|
||
<a href="../../documentation/foundation/colors.html">
|
||
Colors
|
||
</a>
|
||
</li>
|
||
<li class=" ">
|
||
<a href="../../documentation/foundation/grid.html">
|
||
Grid
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/foundation/typography.html">
|
||
Typography
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/foundation/icons.html">
|
||
Icons
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/foundation/utilities.html">
|
||
Utilities
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="ct-docs-toc-item-active">
|
||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||
<div class="d-inline-block">
|
||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||
<i class="ni ni-app text-white"></i>
|
||
</div>
|
||
</div>
|
||
Components
|
||
</a>
|
||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||
<li class="">
|
||
<a href="../../documentation/components/alerts.html">
|
||
Alerts
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/components/badge.html">
|
||
Badge
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/components/buttons.html">
|
||
Buttons
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/components/social-buttons.html">
|
||
Social Buttons
|
||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/components/cards.html">
|
||
Cards
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/components/carousel.html">
|
||
Carousel
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/components/collapse.html">
|
||
Collapse
|
||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/components/dropdowns.html">
|
||
Dropdowns
|
||
</a>
|
||
</li>
|
||
<li class="ct-docs-nav-sidenav-active">
|
||
<a href="../../documentation/components/forms.html">
|
||
Forms
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/components/input-group.html">
|
||
Input Group
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/components/list-group.html">
|
||
List Group
|
||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/components/modal.html">
|
||
Modal
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/components/navs.html">
|
||
Navs
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/components/navbar.html">
|
||
Navbar
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/components/pagination.html">
|
||
Pagination
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/components/popovers.html">
|
||
Popovers
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/components/progress.html">
|
||
Progress
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/components/spinners.html">
|
||
Spinners
|
||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/components/tables.html">
|
||
Tables
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/components/tooltips.html">
|
||
Tooltips
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="ct-docs-toc-item-active">
|
||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||
<div class="d-inline-block">
|
||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||
<i class="ni ni-settings text-white"></i>
|
||
</div>
|
||
</div>
|
||
Plugins
|
||
</a>
|
||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||
<li class="">
|
||
<a href="../../documentation/plugins/countUpJs.html">
|
||
CountUp JS
|
||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/plugins/charts.html">
|
||
Charts
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/plugins/datepicker.html">
|
||
Datepicker
|
||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/plugins/fullcalendar.html">
|
||
Fullcalendar
|
||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/plugins/sliders.html">
|
||
Sliders
|
||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/plugins/choices.html">
|
||
Choices
|
||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/plugins/dropzone.html">
|
||
Dropzone
|
||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/plugins/datatables.html">
|
||
Datatables
|
||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/plugins/kanban.html">
|
||
Kanban
|
||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/plugins/photo-swipe.html">
|
||
Photo Swipe
|
||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/plugins/quill.html">
|
||
Quill
|
||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/plugins/sweet-alerts.html">
|
||
Sweet Alerts
|
||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../documentation/plugins/wizard.html">
|
||
Wizard
|
||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
<div class="ct-docs-toc-col">
|
||
<ul class="section-nav">
|
||
<li class="toc-entry toc-h2"><a href="#inputs">Inputs</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#default">Default</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#alternative">Alternative</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#form-styles">Form styles</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#form-controls">Form controls</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#html5-inputs">HTML5 inputs</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#custom-forms">Custom forms</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#checkboxes">Checkboxes</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#radios">Radios</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#disabled">Disabled</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#toggles">Toggles</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<main class="ct-docs-content-col" role="main">
|
||
<div class="ct-docs-page-title">
|
||
<h1 class="ct-docs-page-h1-title" id="content">
|
||
Bootstrap Forms
|
||
</h1>
|
||
<div class="avatar-group mt-3">
|
||
</div>
|
||
</div>
|
||
<p class="ct-docs-page-title-lead">Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.</p>
|
||
<hr class="ct-docs-hr">
|
||
<h2 id="inputs">Inputs</h2>
|
||
<h3 id="default">Default</h3>
|
||
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
|
||
<form>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="input-group input-group-outline my-3">
|
||
<label class="form-label">Email</label>
|
||
<input type="email" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="input-group input-group-outline my-3">
|
||
<label class="form-label">Email</label>
|
||
<input type="email" class="form-control" disabled="" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="input-group input-group-outline is-valid my-3">
|
||
<label class="form-label">Success</label>
|
||
<input type="email" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="input-group input-group-outline is-invalid my-3">
|
||
<label class="form-label">Error</label>
|
||
<input type="email" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="position-relative">
|
||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-md-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-outline my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-md-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-outline my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-md-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-outline is-valid my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-md-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-outline is-invalid my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Error<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h3 id="alternative">Alternative</h3>
|
||
<p>If you want to use forms on grayish background colors, you can use this beautiful alternative style which removes the borders and it is emphasized only by its shadow.</p>
|
||
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
|
||
<div class="p-4 bg-light">
|
||
<form>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="input-group input-group-outline my-3">
|
||
<label class="form-label">Email</label>
|
||
<input type="email" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="input-group input-group-outline my-3">
|
||
<label class="form-label">Email</label>
|
||
<input type="email" class="form-control" disabled="" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="input-group input-group-outline is-valid my-3">
|
||
<label class="form-label">Success</label>
|
||
<input type="email" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="input-group input-group-outline is-invalid my-3">
|
||
<label class="form-label">Error</label>
|
||
<input type="email" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="position-relative">
|
||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>p-4 bg-light<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-md-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-outline my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-md-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-outline my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-md-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-outline is-valid my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-md-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-outline is-invalid my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Error<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h2 id="form-styles">Form styles</h2>
|
||
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
|
||
<div class="p-4">
|
||
<form>
|
||
<div class="input-group input-group-outline mb-4">
|
||
<label class="form-label">Label</label>
|
||
<input type="text" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
<div class="input-group input-group-dynamic mb-4">
|
||
<label class="form-label">Label</label>
|
||
<input type="text" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
<div class="input-group input-group-static mb-4">
|
||
<label>Label</label>
|
||
<input type="text" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="position-relative">
|
||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>p-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-outline mb-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Label<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-dynamic mb-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Label<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-static mb-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Label<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h2 id="form-controls">Form controls</h2>
|
||
<p>Textual form controls—like <code class=" highlighter-rouge language-plaintext"><input></code>s, <code class=" highlighter-rouge language-plaintext"><select></code>s, and <code class=" highlighter-rouge language-plaintext"><textarea></code>s—are styled with the <code class=" highlighter-rouge language-plaintext">.form-control</code> class. Included are styles for general appearance, focus state, sizing, and more.</p>
|
||
<p>For all form control you can apply the additional modifier classes explained in the Inputs section: <code class=" highlighter-rouge language-plaintext">.form-control-alternative</code>, <code class=" highlighter-rouge language-plaintext">.form-control-flush</code> and <code class=" highlighter-rouge language-plaintext">.form-control-muted</code>.</p>
|
||
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
|
||
<form>
|
||
<div class="input-group input-group-outline my-3">
|
||
<label class="form-label">Email address</label>
|
||
<input type="email" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
<div class="input-group input-group-static mb-4">
|
||
<label for="exampleFormControlSelect1" class="ms-0">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="input-group input-group-static">
|
||
<label for="exampleFormControlSelect2" class="ms-0">Example multiple select</label>
|
||
<select multiple="" class="form-control pb-4" id="exampleFormControlSelect2">
|
||
<option>1</option>
|
||
<option>2</option>
|
||
<option>3</option>
|
||
<option>4</option>
|
||
<option>5</option>
|
||
</select>
|
||
</div>
|
||
<div class="input-group input-group-dynamic">
|
||
<textarea class="form-control" rows="5" placeholder="Say a few words about who you are or what you're working on." spellcheck="false"></textarea>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="position-relative">
|
||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-outline my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Email address<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-static mb-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>exampleFormControlSelect1<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Example select<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>exampleFormControlSelect1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-static<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>exampleFormControlSelect2<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ms-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Example multiple select<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">multiple</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control pb-4<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>exampleFormControlSelect2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-dynamic<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Say a few words about who you are or what you're working on.<span class="token punctuation">"</span></span> <span class="token attr-name">spellcheck</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h3 id="html5-inputs">HTML5 inputs</h3>
|
||
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
|
||
<form>
|
||
<div class="input-group input-group-outline my-3">
|
||
<label class="form-label">Text</label>
|
||
<input type="text" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
<div class="input-group input-group-outline my-3">
|
||
<label class="form-label">Search</label>
|
||
<input type="text" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
<div class="input-group input-group-outline my-3">
|
||
<label class="form-label">Email</label>
|
||
<input type="email" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
<div class="input-group input-group-outline my-3">
|
||
<label class="form-label">Url</label>
|
||
<input type="url" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
<div class="input-group input-group-outline my-3">
|
||
<label class="form-label">Phone</label>
|
||
<input type="tel" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
<div class="input-group input-group-outline my-3">
|
||
<label class="form-label">Password</label>
|
||
<input type="password" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
<div class="input-group input-group-outline my-3">
|
||
<label class="form-label">Number</label>
|
||
<input type="number" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
<div class="input-group input-group-static my-3">
|
||
<label>Datetime</label>
|
||
<input type="datetime-local" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
<div class="input-group input-group-static my-3">
|
||
<label>Date</label>
|
||
<input type="date" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
<div class="input-group input-group-static my-3">
|
||
<label>Month</label>
|
||
<input type="month" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
<div class="input-group input-group-static my-3">
|
||
<label>Week</label>
|
||
<input type="week" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
<div class="input-group input-group-static my-3">
|
||
<label>Time</label>
|
||
<input type="time" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
<div class="input-group input-group-static my-3">
|
||
<label>Color</label>
|
||
<input type="color" class="form-control" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="example-color-input" class="form-control-label">Color</label>
|
||
<input class="form-control" type="color" value="#5e72e4" id="example-color-input" onfocus="focused(this)" onfocusout="defocused(this)">
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="position-relative">
|
||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-outline my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-outline my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-outline my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Email/label>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-outline my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Url<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-outline my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Phone<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-outline my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-outline my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Number<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-static my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Datetime<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-static my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Date<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-static my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Month<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-static my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Week<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-static my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Time<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-static my-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Color<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>example-color-input<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Color<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#5e72e4<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>example-color-input<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h2 id="custom-forms">Custom forms</h2>
|
||
<p>For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.</p>
|
||
<h3 id="checkboxes">Checkboxes</h3>
|
||
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" value="" id="fcustomCheck1" checked="">
|
||
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
|
||
</div>
|
||
</div>
|
||
<div class="position-relative">
|
||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-check<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-check-input<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fcustomCheck1<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>custom-control-label<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>customCheck1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Check this custom checkbox<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h3 id="radios">Radios</h3>
|
||
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
|
||
<div class="form-check mb-3">
|
||
<input class="form-check-input" type="radio" name="flexRadioDefault" id="customRadio1">
|
||
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="radio" name="flexRadioDefault" id="customRadio2">
|
||
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
|
||
</div>
|
||
</div>
|
||
<div class="position-relative">
|
||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-check mb-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-check-input<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flexRadioDefault<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>customRadio1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>custom-control-label<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>customRadio1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Toggle this custom radio<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-check<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-check-input<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flexRadioDefault<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>customRadio2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>custom-control-label<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>customRadio2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Or toggle this other custom radio<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h3 id="disabled">Disabled</h3>
|
||
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
|
||
<div class="form-check">
|
||
<input type="checkbox" class="form-check-input" id="customCheckDisabled" disabled="">
|
||
<label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<input type="radio" id="customRadioDisabled" name="radioDisabled" class="form-check-input" disabled="">
|
||
<label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
|
||
</div>
|
||
</div>
|
||
<div class="position-relative">
|
||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-check<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-check-input<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>customCheckDisabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>custom-control-label<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>customCheckDisabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Check this custom checkbox<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-check<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio3<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radioDisabled<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>customRadioDisabled<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-check-input<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>custom-control-label<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>customRadioDisabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Toggle this custom radio<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h3 id="toggles">Toggles</h3>
|
||
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
|
||
<div class="form-check form-switch">
|
||
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" checked="">
|
||
<label class="form-check-label" for="flexSwitchCheckDefault">Checked switch</label>
|
||
</div>
|
||
</div>
|
||
<div class="position-relative">
|
||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-check form-switch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-check-input<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flexSwitchCheckDefault<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-check-label<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flexSwitchCheckDefault<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Checked switch<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
<div class="ct-docs-main-footer-row">
|
||
<div class="ct-docs-main-footer-blank-col">
|
||
</div>
|
||
<div class="ct-docs-main-footer-col">
|
||
<footer class="ct-docs-footer">
|
||
<div class="ct-docs-footer-inner-row">
|
||
<div class="ct-docs-footer-col">
|
||
<div class="ct-docs-footer-copyright">
|
||
© <script>
|
||
document.write(new Date().getFullYear())
|
||
</script> <a href="https://creative-tim.com" class="ct-docs-footer-copyright-author" target="_blank">Creative Tim</a> & <a href="https://www.updivision.com" class="ct-docs-footer-copyright-author" target="_blank">UPDIVISION</a>
|
||
</div>
|
||
</div>
|
||
<div class="ct-docs-footer-col">
|
||
<ul class="ct-docs-footer-nav-footer">
|
||
<li>
|
||
<a href="https://creative-tim.com" class="ct-docs-footer-nav-link" target="_blank">Creative Tim</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="https://www.updivision.com" class="ct-docs-footer-nav-link" target="_blank">UPDIVISION</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://www.creative-tim.com/contact-us" class="ct-docs-footer-nav-link" target="_blank">Contact Us</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://creative-tim.com/blog" class="ct-docs-footer-nav-link" target="_blank">Blog</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="../../assets/js/jquery.min.js" type="text/javascript"></script>
|
||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||
<script src="../../assets/js/core/bootstrap.bundle.min.js" type="text/javascript"></script>
|
||
<script src="" type="text/javascript"></script>
|
||
<script src="" type="text/javascript"></script>
|
||
<script src="" type="text/javascript"></script>
|
||
<script src="" type="text/javascript"></script>
|
||
<script src="../../assets/js/prism.js" type="text/javascript"></script>
|
||
<script src="../../assets/js/docs.min.js" type="text/javascript"></script>
|
||
<script src="../../assets/js/holder.min.js" type="text/javascript"></script>
|
||
<script src="../../assets/js/moment.min.js" type="text/javascript"></script>
|
||
<script src="../../assets/js/material-dashboard.min.js" type="text/javascript"></script>
|
||
<script>
|
||
Holder.addTheme('gray', {
|
||
bg: '#777',
|
||
fg: 'rgba(255,255,255,.75)',
|
||
font: 'Helvetica',
|
||
fontweight: 'normal'
|
||
})
|
||
</script>
|
||
<script>
|
||
// Facebook Pixel Code Don't Delete
|
||
! function(f, b, e, v, n, t, s) {
|
||
if (f.fbq) return;
|
||
n = f.fbq = function() {
|
||
n.callMethod ?
|
||
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
|
||
};
|
||
if (!f._fbq) f._fbq = n;
|
||
n.push = n;
|
||
n.loaded = !0;
|
||
n.version = '2.0';
|
||
n.queue = [];
|
||
t = b.createElement(e);
|
||
t.async = !0;
|
||
t.src = v;
|
||
s = b.getElementsByTagName(e)[0];
|
||
s.parentNode.insertBefore(t, s)
|
||
}(window,
|
||
document, 'script', '//connect.facebook.net/en_US/fbevents.js');
|
||
|
||
try {
|
||
fbq('init', '111649226022273');
|
||
fbq('track', "PageView");
|
||
|
||
} catch (err) {
|
||
console.log('Facebook Track Error:', err);
|
||
}
|
||
</script>
|
||
<script src="../../assets/js/docs.js"></script>
|
||
|
||
</body>
|
||
</html>
|