743 lines
39 KiB
HTML
743 lines
39 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Input - Mazer Admin Dashboard</title>
|
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/bootstrap.css">
|
|
|
|
<link rel="stylesheet" href="assets/vendors/perfect-scrollbar/perfect-scrollbar.css">
|
|
<link rel="stylesheet" href="assets/vendors/bootstrap-icons/bootstrap-icons.css">
|
|
<link rel="stylesheet" href="assets/css/app.css">
|
|
<link rel="shortcut icon" href="assets/images/favicon.svg" type="image/x-icon">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<div id="sidebar" class="active">
|
|
<div class="sidebar-wrapper active">
|
|
<div class="sidebar-header">
|
|
<div class="d-flex justify-content-between">
|
|
<div class="logo">
|
|
<a href="index.html"><img src="assets/images/logo/logo.png" alt="Logo" srcset=""></a>
|
|
</div>
|
|
<div class="toggler">
|
|
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-menu">
|
|
<ul class="menu">
|
|
<li class="sidebar-title">Menu</li>
|
|
|
|
<li class="sidebar-item ">
|
|
<a href="index.html" class='sidebar-link'>
|
|
<i class="bi bi-grid-fill"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="sidebar-item has-sub">
|
|
<a href="#" class='sidebar-link'>
|
|
<i class="bi bi-stack"></i>
|
|
<span>Components</span>
|
|
</a>
|
|
<ul class="submenu ">
|
|
<li class="submenu-item ">
|
|
<a href="component-alert.html">Alert</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="component-badge.html">Badge</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="component-breadcrumb.html">Breadcrumb</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="component-button.html">Button</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="component-card.html">Card</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="component-carousel.html">Carousel</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="component-dropdown.html">Dropdown</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="component-list-group.html">List Group</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="component-modal.html">Modal</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="component-navs.html">Navs</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="component-pagination.html">Pagination</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="component-progress.html">Progress</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="component-spinner.html">Spinner</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="component-tooltip.html">Tooltip</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="sidebar-item has-sub">
|
|
<a href="#" class='sidebar-link'>
|
|
<i class="bi bi-collection-fill"></i>
|
|
<span>Extra Components</span>
|
|
</a>
|
|
<ul class="submenu ">
|
|
<li class="submenu-item ">
|
|
<a href="extra-component-avatar.html">Avatar</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="extra-component-sweetalert.html">Sweet Alert</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="extra-component-toastify.html">Toastify</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="extra-component-rating.html">Rating</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="extra-component-divider.html">Divider</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="sidebar-item has-sub">
|
|
<a href="#" class='sidebar-link'>
|
|
<i class="bi bi-grid-1x2-fill"></i>
|
|
<span>Layouts</span>
|
|
</a>
|
|
<ul class="submenu ">
|
|
<li class="submenu-item ">
|
|
<a href="layout-default.html">Default Layout</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="layout-vertical-1-column.html">1 Column</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="layout-vertical-navbar.html">Vertical with Navbar</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="layout-horizontal.html">Horizontal Menu</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="sidebar-title">Forms & Tables</li>
|
|
|
|
<li class="sidebar-item active has-sub">
|
|
<a href="#" class='sidebar-link'>
|
|
<i class="bi bi-hexagon-fill"></i>
|
|
<span>Form Elements</span>
|
|
</a>
|
|
<ul class="submenu active">
|
|
<li class="submenu-item active">
|
|
<a href="form-element-input.html">Input</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="form-element-input-group.html">Input Group</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="form-element-select.html">Select</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="form-element-radio.html">Radio</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="form-element-checkbox.html">Checkbox</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="form-element-textarea.html">Textarea</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="sidebar-item ">
|
|
<a href="form-layout.html" class='sidebar-link'>
|
|
<i class="bi bi-file-earmark-medical-fill"></i>
|
|
<span>Form Layout</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="sidebar-item has-sub">
|
|
<a href="#" class='sidebar-link'>
|
|
<i class="bi bi-pen-fill"></i>
|
|
<span>Form Editor</span>
|
|
</a>
|
|
<ul class="submenu ">
|
|
<li class="submenu-item ">
|
|
<a href="form-editor-quill.html">Quill</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="form-editor-ckeditor.html">CKEditor</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="form-editor-summernote.html">Summernote</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="form-editor-tinymce.html">TinyMCE</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="sidebar-item ">
|
|
<a href="table.html" class='sidebar-link'>
|
|
<i class="bi bi-grid-1x2-fill"></i>
|
|
<span>Table</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="sidebar-item ">
|
|
<a href="table-datatable.html" class='sidebar-link'>
|
|
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
|
|
<span>Datatable</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="sidebar-title">Extra UI</li>
|
|
|
|
<li class="sidebar-item has-sub">
|
|
<a href="#" class='sidebar-link'>
|
|
<i class="bi bi-pentagon-fill"></i>
|
|
<span>Widgets</span>
|
|
</a>
|
|
<ul class="submenu ">
|
|
<li class="submenu-item ">
|
|
<a href="ui-widgets-chatbox.html">Chatbox</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="ui-widgets-pricing.html">Pricing</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="ui-widgets-todolist.html">To-do List</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="sidebar-item has-sub">
|
|
<a href="#" class='sidebar-link'>
|
|
<i class="bi bi-egg-fill"></i>
|
|
<span>Icons</span>
|
|
</a>
|
|
<ul class="submenu ">
|
|
<li class="submenu-item ">
|
|
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="ui-icons-fontawesome.html">Fontawesome</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="ui-icons-dripicons.html">Dripicons</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="sidebar-item has-sub">
|
|
<a href="#" class='sidebar-link'>
|
|
<i class="bi bi-bar-chart-fill"></i>
|
|
<span>Charts</span>
|
|
</a>
|
|
<ul class="submenu ">
|
|
<li class="submenu-item ">
|
|
<a href="ui-chart-chartjs.html">ChartJS</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="ui-chart-apexcharts.html">Apexcharts</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="sidebar-item ">
|
|
<a href="ui-file-uploader.html" class='sidebar-link'>
|
|
<i class="bi bi-cloud-arrow-up-fill"></i>
|
|
<span>File Uploader</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="sidebar-item has-sub">
|
|
<a href="#" class='sidebar-link'>
|
|
<i class="bi bi-map-fill"></i>
|
|
<span>Maps</span>
|
|
</a>
|
|
<ul class="submenu ">
|
|
<li class="submenu-item ">
|
|
<a href="ui-map-google-map.html">Google Map</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="sidebar-title">Pages</li>
|
|
|
|
<li class="sidebar-item ">
|
|
<a href="application-email.html" class='sidebar-link'>
|
|
<i class="bi bi-envelope-fill"></i>
|
|
<span>Email Application</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="sidebar-item ">
|
|
<a href="application-chat.html" class='sidebar-link'>
|
|
<i class="bi bi-chat-dots-fill"></i>
|
|
<span>Chat Application</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="sidebar-item ">
|
|
<a href="application-gallery.html" class='sidebar-link'>
|
|
<i class="bi bi-image-fill"></i>
|
|
<span>Photo Gallery</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="sidebar-item ">
|
|
<a href="application-checkout.html" class='sidebar-link'>
|
|
<i class="bi bi-basket-fill"></i>
|
|
<span>Checkout Page</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="sidebar-item has-sub">
|
|
<a href="#" class='sidebar-link'>
|
|
<i class="bi bi-person-badge-fill"></i>
|
|
<span>Authentication</span>
|
|
</a>
|
|
<ul class="submenu ">
|
|
<li class="submenu-item ">
|
|
<a href="auth-login.html">Login</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="auth-register.html">Register</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="auth-forgot-password.html">Forgot Password</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="sidebar-item has-sub">
|
|
<a href="#" class='sidebar-link'>
|
|
<i class="bi bi-x-octagon-fill"></i>
|
|
<span>Errors</span>
|
|
</a>
|
|
<ul class="submenu ">
|
|
<li class="submenu-item ">
|
|
<a href="error-403.html">403</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="error-404.html">404</a>
|
|
</li>
|
|
<li class="submenu-item ">
|
|
<a href="error-500.html">500</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="sidebar-title">Raise Support</li>
|
|
|
|
<li class="sidebar-item ">
|
|
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
|
|
<i class="bi bi-life-preserver"></i>
|
|
<span>Documentation</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="sidebar-item ">
|
|
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
|
|
<i class="bi bi-puzzle"></i>
|
|
<span>Contribute</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="sidebar-item ">
|
|
<a href="https://github.com/zuramai/mazer#donate" class='sidebar-link'>
|
|
<i class="bi bi-cash"></i>
|
|
<span>Donate</span>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
<button class="sidebar-toggler btn x"><i data-feather="x"></i></button>
|
|
</div>
|
|
</div>
|
|
<div id="main">
|
|
<header class="mb-3">
|
|
<a href="#" class="burger-btn d-block d-xl-none">
|
|
<i class="bi bi-justify fs-3"></i>
|
|
</a>
|
|
</header>
|
|
|
|
<div class="page-heading">
|
|
<div class="page-title">
|
|
<div class="row">
|
|
<div class="col-12 col-md-6 order-md-1 order-last">
|
|
<h3>Input</h3>
|
|
<p class="text-subtitle text-muted">Give textual form controls like input upgrade with
|
|
custom styles,
|
|
sizing, focus states, and more.</p>
|
|
</div>
|
|
<div class="col-12 col-md-6 order-md-2 order-first">
|
|
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">Input</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<section class="section">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Basic Inputs</h4>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="basicInput">Basic Input</label>
|
|
<input type="text" class="form-control" id="basicInput"
|
|
placeholder="Enter email">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="helpInputTop">Input text with help</label>
|
|
<small class="text-muted">eg.<i>someone@example.com</i></small>
|
|
<input type="text" class="form-control" id="helpInputTop">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="helperText">With Helper Text</label>
|
|
<input type="text" id="helperText" class="form-control" placeholder="Name">
|
|
<p><small class="text-muted">Find helper text here for given textbox.</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="disabledInput">Disabled Input</label>
|
|
<input type="text" class="form-control" id="disabledInput"
|
|
placeholder="Disabled Text" disabled>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="disabledInput">Readonly Input</label>
|
|
<input type="text" class="form-control" id="readonlyInput" readonly="readonly"
|
|
value="You can't update me :P">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="disabledInput">Static Text</label>
|
|
<p class="form-control-static" id="staticInput">email@mazer.com</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Input Style start -->
|
|
<section id="input-style">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Input Styles</h4>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<p>To set rounded border to input box, use <code>.round</code> class and
|
|
to set square border to input box, use <code>.sqaure</code> class
|
|
alongwith
|
|
<code>.form-control</code> class.
|
|
</p>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<label for="roundText">Rounded Input</label>
|
|
<input type="text" id="roundText" class="form-control round"
|
|
placeholder="Rounded Input">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<label for="squareText">Square Input</label>
|
|
<input type="text" id="squareText" class="form-control square"
|
|
placeholder="Square Input">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Input Style end -->
|
|
|
|
<!-- Horizontal Input start -->
|
|
<section id="horizontal-input">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Horizontal Input</h4>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<p>To make label in center of form-control, use <code>.col-form-label</code>
|
|
class with
|
|
<code><label></code> element. This is default bootstrap class.
|
|
</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group row align-items-center">
|
|
<div class="col-lg-2 col-3">
|
|
<label class="col-form-label">First Name</label>
|
|
</div>
|
|
<div class="col-lg-10 col-9">
|
|
<input type="text" id="first-name" class="form-control" name="fname"
|
|
placeholder="First Name">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group row align-items-center">
|
|
<div class="col-lg-2 col-3">
|
|
<label class="col-form-label">Last Name</label>
|
|
</div>
|
|
<div class="col-lg-10 col-9">
|
|
<input type="text" id="last-name" class="form-control" name="fname"
|
|
placeholder="Last Name">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Horizontal Input end -->
|
|
|
|
<!-- Basic File Browser start -->
|
|
<section id="input-file-browser">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">File Input</h4>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-lg-6 col-md-12">
|
|
<div class="mb-3">
|
|
<label for="formFile" class="form-label">Default file input
|
|
example</label>
|
|
<input class="form-control" type="file" id="formFile">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="formFileMultiple" class="form-label">Multiple files input
|
|
example</label>
|
|
<input class="form-control" type="file" id="formFileMultiple" multiple>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="formFileDisabled" class="form-label">Disabled file input
|
|
example</label>
|
|
<input class="form-control" type="file" id="formFileDisabled" disabled>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-md-12">
|
|
|
|
<div class="mb-3">
|
|
<label for="formFileSm" class="form-label">Small file input
|
|
example</label>
|
|
<input class="form-control form-control-sm" id="formFileSm" type="file">
|
|
</div>
|
|
<div>
|
|
<label for="formFileLg" class="form-label">Large file input
|
|
example</label>
|
|
<input class="form-control form-control-lg" id="formFileLg" type="file">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Basic File Browser end -->
|
|
|
|
<!-- Input with Icons start -->
|
|
<section id="input-with-icons">
|
|
<div class="row match-height">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Input with Icons</h4>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<p>For Input Box with icon use <code>.position-relative</code> class with
|
|
<code>.form-group</code> and use class <code>.has-icon-left</code> or
|
|
<code>.has-icon-right</code> class for icon on
|
|
left side.
|
|
</p>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<h6>Left Icon</h6>
|
|
<div class="form-group position-relative has-icon-left">
|
|
<input type="text" class="form-control"
|
|
placeholder="Input with icon left">
|
|
<div class="form-control-icon">
|
|
<i class="bi bi-person"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<h6>Right Icon</h6>
|
|
<div class="form-group position-relative has-icon-right">
|
|
<input type="text" class="form-control"
|
|
placeholder="Icon Right, Default Input">
|
|
<div class="form-control-icon">
|
|
<i class="bi bi-bookmarks"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Input with Icons end -->
|
|
|
|
<!-- Input Sizing start -->
|
|
<section id="input-sizing">
|
|
<div class="row match-height">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Control Sizing Option</h4>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<p>For different sizes of Input, Use classes like
|
|
<code>.form-control-lg</code> &
|
|
<code>.form-control-sm</code> for Large, Small input box.
|
|
</p>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<h6>Large</h6>
|
|
<input class="form-control form-control-lg" type="text"
|
|
placeholder="Large Input">
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<h6>Default</h6>
|
|
<input class="form-control" type="text" placeholder="Default Input">
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<h6>Small</h6>
|
|
<input class="form-control form-control-sm" type="text"
|
|
placeholder="Small Input">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Input Sizing end -->
|
|
|
|
<!-- validations start -->
|
|
<section id="input-validation">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Input Validation States</h4>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<p>You can indicate invalid and valid form fields with
|
|
<code>.is-invalid</code> and
|
|
<code>.is-valid</code>. Note that <code>.invalid-feedback</code> is also
|
|
supported
|
|
with these classes.
|
|
</p>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label for="valid-state">Valid State</label>
|
|
<input type="text" class="form-control is-valid" id="valid-state"
|
|
placeholder="Valid" value="Valid" required>
|
|
<div class="valid-feedback">
|
|
<i class="bx bx-radio-circle"></i>
|
|
This is valid state.
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label for="invalid-state">Invalid State</label>
|
|
<input type="text" class="form-control is-invalid" id="invalid-state"
|
|
placeholder="Invalid" value="Invalid" required>
|
|
<div class="invalid-feedback">
|
|
<i class="bx bx-radio-circle"></i>
|
|
This is invalid state.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- validations end -->
|
|
|
|
</div>
|
|
|
|
<footer>
|
|
<div class="footer clearfix mb-0 text-muted">
|
|
<div class="float-start">
|
|
<p>2021 © Mazer</p>
|
|
</div>
|
|
<div class="float-end">
|
|
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
|
|
href="http://ahmadsaugi.com">A. Saugi</a></p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
<script src="assets/vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
|
|
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script src="assets/js/main.js"></script>
|
|
</body>
|
|
|
|
</html> |