File: /var/www/selfanalyse/school-admin/html/form-inputs.html
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.png">
<title>Adminmart Template - The Ultimate Multipurpose admin template</title>
<!-- Custom CSS -->
<link href="../dist/css/style.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="lds-ripple">
<div class="lds-pos"></div>
<div class="lds-pos"></div>
</div>
</div>
<!-- ============================================================== -->
<!-- Main wrapper - style you can find in pages.scss -->
<!-- ============================================================== -->
<div id="main-wrapper" data-theme="light" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full" data-sidebar-position="fixed" data-header-position="fixed" data-boxed-layout="full">
<!-- ============================================================== -->
<!-- Topbar header - style you can find in pages.scss -->
<!-- ============================================================== -->
<header class="topbar" data-navbarbg="skin6">
<nav class="navbar top-navbar navbar-expand-md">
<div class="navbar-header" data-logobg="skin6">
<!-- This is for the sidebar toggle which is visible on mobile only -->
<a class="nav-toggler waves-effect waves-light d-block d-md-none" href="javascript:void(0)"><i
class="ti-menu ti-close"></i></a>
<!-- ============================================================== -->
<!-- Logo -->
<!-- ============================================================== -->
<div class="navbar-brand">
<!-- Logo icon -->
<a href="index.html">
<b class="logo-icon">
<!-- Dark Logo icon -->
<img src="../assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
<!-- Light Logo icon -->
<img src="../assets/images/logo-icon.png" alt="homepage" class="light-logo" />
</b>
<!--End Logo icon -->
<!-- Logo text -->
<span class="logo-text">
<!-- dark Logo text -->
<img src="../assets/images/logo-text.png" alt="homepage" class="dark-logo" />
<!-- Light Logo text -->
<img src="../assets/images/logo-light-text.png" class="light-logo" alt="homepage" />
</span>
</a>
</div>
<!-- ============================================================== -->
<!-- End Logo -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Toggle which is visible on mobile only -->
<!-- ============================================================== -->
<a class="topbartoggler d-block d-md-none waves-effect waves-light" href="javascript:void(0)"
data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i
class="ti-more"></i></a>
</div>
<!-- ============================================================== -->
<!-- End Logo -->
<!-- ============================================================== -->
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<!-- ============================================================== -->
<!-- toggle and nav items -->
<!-- ============================================================== -->
<ul class="navbar-nav float-left mr-auto ml-3 pl-1">
<!-- Notification -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle pl-md-3 position-relative" href="javascript:void(0)"
id="bell" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span><i data-feather="bell" class="svg-icon"></i></span>
<span class="badge badge-primary notify-no rounded-circle">5</span>
</a>
<div class="dropdown-menu dropdown-menu-left mailbox animated bounceInDown">
<ul class="list-style-none">
<li>
<div class="message-center notifications position-relative">
<!-- Message -->
<a href="javascript:void(0)"
class="message-item d-flex align-items-center border-bottom px-3 py-2">
<div class="btn btn-danger rounded-circle btn-circle"><i
data-feather="airplay" class="text-white"></i></div>
<div class="w-75 d-inline-block v-middle pl-2">
<h6 class="message-title mb-0 mt-1">Luanch Admin</h6>
<span class="font-12 text-nowrap d-block text-muted">Just see
the my new
admin!</span>
<span class="font-12 text-nowrap d-block text-muted">9:30 AM</span>
</div>
</a>
<!-- Message -->
<a href="javascript:void(0)"
class="message-item d-flex align-items-center border-bottom px-3 py-2">
<span class="btn btn-success text-white rounded-circle btn-circle"><i
data-feather="calendar" class="text-white"></i></span>
<div class="w-75 d-inline-block v-middle pl-2">
<h6 class="message-title mb-0 mt-1">Event today</h6>
<span
class="font-12 text-nowrap d-block text-muted text-truncate">Just
a reminder that you have event</span>
<span class="font-12 text-nowrap d-block text-muted">9:10 AM</span>
</div>
</a>
<!-- Message -->
<a href="javascript:void(0)"
class="message-item d-flex align-items-center border-bottom px-3 py-2">
<span class="btn btn-info rounded-circle btn-circle"><i
data-feather="settings" class="text-white"></i></span>
<div class="w-75 d-inline-block v-middle pl-2">
<h6 class="message-title mb-0 mt-1">Settings</h6>
<span
class="font-12 text-nowrap d-block text-muted text-truncate">You
can customize this template
as you want</span>
<span class="font-12 text-nowrap d-block text-muted">9:08 AM</span>
</div>
</a>
<!-- Message -->
<a href="javascript:void(0)"
class="message-item d-flex align-items-center border-bottom px-3 py-2">
<span class="btn btn-primary rounded-circle btn-circle"><i
data-feather="box" class="text-white"></i></span>
<div class="w-75 d-inline-block v-middle pl-2">
<h6 class="message-title mb-0 mt-1">Pavan kumar</h6> <span
class="font-12 text-nowrap d-block text-muted">Just
see the my admin!</span>
<span class="font-12 text-nowrap d-block text-muted">9:02 AM</span>
</div>
</a>
</div>
</li>
<li>
<a class="nav-link pt-3 text-center text-dark" href="javascript:void(0);">
<strong>Check all notifications</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
</div>
</li>
<!-- End Notification -->
<!-- ============================================================== -->
<!-- create new -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i data-feather="settings" class="svg-icon"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item d-none d-md-block">
<a class="nav-link" href="javascript:void(0)">
<div class="customize-input">
<select
class="custom-select form-control bg-white custom-radius custom-shadow border-0">
<option selected>EN</option>
<option value="1">AB</option>
<option value="2">AK</option>
<option value="3">BE</option>
</select>
</div>
</a>
</li>
</ul>
<!-- ============================================================== -->
<!-- Right side toggle and nav items -->
<!-- ============================================================== -->
<ul class="navbar-nav float-right">
<!-- ============================================================== -->
<!-- Search -->
<!-- ============================================================== -->
<li class="nav-item d-none d-md-block">
<a class="nav-link" href="javascript:void(0)">
<form>
<div class="customize-input">
<input class="form-control custom-shadow custom-radius border-0 bg-white"
type="search" placeholder="Search" aria-label="Search">
<i class="form-control-icon" data-feather="search"></i>
</div>
</form>
</a>
</li>
<!-- ============================================================== -->
<!-- User profile and search -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<img src="../assets/images/users/profile-pic.jpg" alt="user" class="rounded-circle"
width="40">
<span class="ml-2 d-none d-lg-inline-block"><span>Hello,</span> <span
class="text-dark">Jason Doe</span> <i data-feather="chevron-down"
class="svg-icon"></i></span>
</a>
<div class="dropdown-menu dropdown-menu-right user-dd animated flipInY">
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="user"
class="svg-icon mr-2 ml-1"></i>
My Profile</a>
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="credit-card"
class="svg-icon mr-2 ml-1"></i>
My Balance</a>
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="mail"
class="svg-icon mr-2 ml-1"></i>
Inbox</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="settings"
class="svg-icon mr-2 ml-1"></i>
Account Setting</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="power"
class="svg-icon mr-2 ml-1"></i>
Logout</a>
<div class="dropdown-divider"></div>
<div class="pl-4 p-3"><a href="javascript:void(0)" class="btn btn-sm btn-info">View
Profile</a></div>
</div>
</li>
<!-- ============================================================== -->
<!-- User profile and search -->
<!-- ============================================================== -->
</ul>
</div>
</nav>
</header>
<!-- ============================================================== -->
<!-- End Topbar header -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<aside class="left-sidebar" data-sidebarbg="skin6">
<!-- Sidebar scroll-->
<div class="scroll-sidebar" data-sidebarbg="skin6">
<!-- Sidebar navigation-->
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="index.html"
aria-expanded="false"><i data-feather="home" class="feather-icon"></i><span
class="hide-menu">Dashboard</span></a></li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">Applications</span></li>
<li class="sidebar-item"> <a class="sidebar-link" href="ticket-list.html"
aria-expanded="false"><i data-feather="tag" class="feather-icon"></i><span
class="hide-menu">Ticket List
</span></a>
</li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="app-chat.html"
aria-expanded="false"><i data-feather="message-square" class="feather-icon"></i><span
class="hide-menu">Chat</span></a></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="app-calendar.html"
aria-expanded="false"><i data-feather="calendar" class="feather-icon"></i><span
class="hide-menu">Calendar</span></a></li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">Components</span></li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="file-text" class="feather-icon"></i><span
class="hide-menu">Forms </span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="form-inputs.html" class="sidebar-link"><span
class="hide-menu"> Form Inputs
</span></a>
</li>
<li class="sidebar-item"><a href="form-input-grid.html" class="sidebar-link"><span
class="hide-menu"> Form Grids
</span></a>
</li>
<li class="sidebar-item"><a href="form-checkbox-radio.html" class="sidebar-link"><span
class="hide-menu"> Checkboxes &
Radios
</span></a>
</li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="grid" class="feather-icon"></i><span
class="hide-menu">Tables </span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="table-basic.html" class="sidebar-link"><span
class="hide-menu"> Basic Table
</span></a>
</li>
<li class="sidebar-item"><a href="table-dark-basic.html" class="sidebar-link"><span
class="hide-menu"> Dark Basic Table
</span></a>
</li>
<li class="sidebar-item"><a href="table-sizing.html" class="sidebar-link"><span
class="hide-menu">
Sizing Table
</span></a>
</li>
<li class="sidebar-item"><a href="table-layout-coloured.html" class="sidebar-link"><span
class="hide-menu">
Coloured
Table Layout
</span></a>
</li>
<li class="sidebar-item"><a href="table-datatable-basic.html" class="sidebar-link"><span
class="hide-menu">
Basic
Datatables
Layout
</span></a>
</li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="bar-chart" class="feather-icon"></i><span
class="hide-menu">Charts </span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="chart-morris.html" class="sidebar-link"><span
class="hide-menu"> Morris Chart
</span></a>
</li>
<li class="sidebar-item"><a href="chart-chart-js.html" class="sidebar-link"><span
class="hide-menu"> ChartJs
</span></a>
</li>
<li class="sidebar-item"><a href="chart-knob.html" class="sidebar-link"><span
class="hide-menu">
Knob Chart
</span></a>
</li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="box" class="feather-icon"></i><span
class="hide-menu">UI Elements </span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="ui-buttons.html" class="sidebar-link"><span
class="hide-menu"> Buttons
</span></a>
</li>
<li class="sidebar-item"><a href="ui-modals.html" class="sidebar-link"><span
class="hide-menu"> Modals </span></a>
</li>
<li class="sidebar-item"><a href="ui-tab.html" class="sidebar-link"><span
class="hide-menu"> Tabs </span></a></li>
<li class="sidebar-item"><a href="ui-tooltip-popover.html" class="sidebar-link"><span
class="hide-menu"> Tooltip &
Popover</span></a></li>
<li class="sidebar-item"><a href="ui-notification.html" class="sidebar-link"><span
class="hide-menu">Notification</span></a></li>
<li class="sidebar-item"><a href="ui-progressbar.html" class="sidebar-link"><span
class="hide-menu">Progressbar</span></a></li>
<li class="sidebar-item"><a href="ui-typography.html" class="sidebar-link"><span
class="hide-menu">Typography</span></a></li>
<li class="sidebar-item"><a href="ui-bootstrap.html" class="sidebar-link"><span
class="hide-menu">Bootstrap
UI</span></a></li>
<li class="sidebar-item"><a href="ui-breadcrumb.html" class="sidebar-link"><span
class="hide-menu">Breadcrumb</span></a></li>
<li class="sidebar-item"><a href="ui-list-media.html" class="sidebar-link"><span
class="hide-menu">List
Media</span></a></li>
<li class="sidebar-item"><a href="ui-grid.html" class="sidebar-link"><span
class="hide-menu"> Grid </span></a></li>
<li class="sidebar-item"><a href="ui-carousel.html" class="sidebar-link"><span
class="hide-menu">
Carousel</span></a></li>
<li class="sidebar-item"><a href="ui-scrollspy.html" class="sidebar-link"><span
class="hide-menu">
Scrollspy</span></a></li>
<li class="sidebar-item"><a href="ui-toasts.html" class="sidebar-link"><span
class="hide-menu"> Toasts</span></a>
</li>
<li class="sidebar-item"><a href="ui-spinner.html" class="sidebar-link"><span
class="hide-menu"> Spinner </span></a>
</li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="ui-cards.html"
aria-expanded="false"><i data-feather="sidebar" class="feather-icon"></i><span
class="hide-menu">Cards
</span></a>
</li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">Authentication</span></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="authentication-login1.html"
aria-expanded="false"><i data-feather="lock" class="feather-icon"></i><span
class="hide-menu">Login
</span></a>
</li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link"
href="authentication-register1.html" aria-expanded="false"><i data-feather="lock"
class="feather-icon"></i><span class="hide-menu">Register
</span></a>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="feather" class="feather-icon"></i><span
class="hide-menu">Icons
</span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="icon-fontawesome.html" class="sidebar-link"><span
class="hide-menu"> Fontawesome Icons </span></a></li>
<li class="sidebar-item"><a href="icon-simple-lineicon.html" class="sidebar-link"><span
class="hide-menu"> Simple Line Icons </span></a></li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="crosshair" class="feather-icon"></i><span
class="hide-menu">Multi
level
dd</span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item 1.1</span></a>
</li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item 1.2</span></a>
</li>
<li class="sidebar-item"> <a class="has-arrow sidebar-link" href="javascript:void(0)"
aria-expanded="false"><span class="hide-menu">Menu 1.3</span></a>
<ul aria-expanded="false" class="collapse second-level base-level-line">
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.3.1</span></a></li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.3.2</span></a></li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.3.3</span></a></li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.3.4</span></a></li>
</ul>
</li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.4</span></a></li>
</ul>
</li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">Extra</span></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="../../docs/docs.html"
aria-expanded="false"><i data-feather="edit-3" class="feather-icon"></i><span
class="hide-menu">Documentation</span></a></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="authentication-login1.html"
aria-expanded="false"><i data-feather="log-out" class="feather-icon"></i><span
class="hide-menu">Logout</span></a></li>
</ul>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
</aside>
<!-- ============================================================== -->
<!-- End Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Page wrapper -->
<!-- ============================================================== -->
<div class="page-wrapper">
<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="page-breadcrumb">
<div class="row">
<div class="col-7 align-self-center">
<h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Form Inputs</h4>
<div class="d-flex align-items-center">
<nav aria-label="breadcrumb">
<ol class="breadcrumb m-0 p-0">
<li class="breadcrumb-item"><a href="index.html" class="text-muted">Home</a></li>
<li class="breadcrumb-item text-muted active" aria-current="page">Library</li>
</ol>
</nav>
</div>
</div>
<div class="col-5 align-self-center">
<div class="customize-input float-right">
<select class="custom-select custom-select-set form-control bg-white border-0 custom-shadow custom-radius">
<option selected>Aug 19</option>
<option value="1">July 19</option>
<option value="2">Jun 19</option>
</select>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Container fluid -->
<!-- ============================================================== -->
<div class="container-fluid">
<!-- ============================================================== -->
<!-- Start Page Content -->
<!-- ============================================================== -->
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Default Input</h4>
<h6 class="card-subtitle">To use add <code>form-control</code> class to the input</h6>
<form class="mt-4">
<div class="form-group">
<input type="text" class="form-control">
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input With Helper Text</h4>
<form class="mt-3">
<div class="form-group">
<input type="text" class="form-control" id="nametext" aria-describedby="name"
placeholder="Name">
<small id="name" class="form-text text-muted">Helper Text</small>
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Password</h4>
<form class="mt-5">
<div class="form-group">
<input type="password" class="form-control" id="passtext"
placeholder="Password">
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Disabled Input</h4>
<h6 class="card-subtitle">Add attribute <code>disabled</code> to disable input field.
</h6>
<form class="mt-4">
<div class="form-group">
<input type="text" class="form-control" id="nametext1" placeholder="Name"
disabled>
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Predefined Input Value</h4>
<h6 class="card-subtitle">Add attribute <code>value="VALUE"</code> to set predefined
value.</h6>
<form class="mt-2">
<div class="form-group">
<input type="text" class="form-control" id="prenametext" value="Name">
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Readonly Input Field</h4>
<h6 class="card-subtitle">Add attribute <code>readonly</code> to set field readonly.
</h6>
<form class="mt-4">
<div class="form-group">
<input type="text" class="form-control" id="readonly"
placeholder="Readonly Text" readonly>
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input With Placeholder</h4>
<h6 class="card-subtitle">Add attribute <code>placeholder="..."</code> to input area.
</h6>
<form class="mt-4">
<div class="form-group">
<input type="text" class="form-control" id="placeholder"
placeholder="Placeholder Text">
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Maximum Value</h4>
<h6 class="card-subtitle">Add attribute <code>maxlength="6"</code> to input area.</h6>
<form class="mt-4">
<div class="form-group">
<input type="text" class="form-control" maxlength="6" id="maxval"
aria-describedby="maxval" placeholder="Name">
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Minimum Value</h4>
<h6 class="card-subtitle">Add attribute <code>minlength="5"</code> to input area.</h6>
<form class="mt-4">
<div class="form-group">
<input type="text" class="form-control" minlength="5" id="minval"
aria-describedby="minval" placeholder="Name">
</div>
</form>
</div>
</div>
</div>
</div>
<h4 class="card-title mt-5">Input Type Options</h4>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Type Text</h4>
<h6 class="card-subtitle">Using <code>input type="text"</code></h6>
<form class="mt-4">
<div class="form-group">
<input type="text" class="form-control" value="Name">
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Type Password</h4>
<h6 class="card-subtitle">Using <code>input type="password"</code></h6>
<form class="mt-4">
<div class="form-group">
<input type="password" class="form-control" value="Name">
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Phone Number</h4>
<h6 class="card-subtitle">Using <code>input type="tel"</code></h6>
<form class="mt-4">
<div class="form-group">
<input type="tel" class="form-control" value="1-(444)-444-4445">
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Type Email</h4>
<h6 class="card-subtitle">Using <code>input type="email"</code></h6>
<form class="mt-4">
<div class="form-group">
<input type="email" class="form-control" value="abc@example.com">
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Type URL</h4>
<h6 class="card-subtitle">Using <code>input type="url"</code></h6>
<form class="mt-4">
<div class="form-group">
<input type="url" class="form-control" value="http://google.com">
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Type Search</h4>
<h6 class="card-subtitle">Using <code>input type="search"</code></h6>
<form class="mt-4">
<div class="form-group">
<input type="search" class="form-control" value="how to...">
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Type Numbers</h4>
<h6 class="card-subtitle">Using <code>input type="number"</code></h6>
<form class="mt-4">
<div class="form-group">
<input type="number" class="form-control" value="6029">
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Type Date Time</h4>
<h6 class="card-subtitle">Using <code>input type="datetime-local"</code></h6>
<form class="mt-4">
<div class="form-group">
<input type="datetime-local" class="form-control" value="2008-05-13T22:33:00">
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Type Date</h4>
<h6 class="card-subtitle">Using <code>input type="date"</code></h6>
<form class="mt-4">
<div class="form-group">
<input type="date" class="form-control" value="2018-05-13">
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Type Time</h4>
<h6 class="card-subtitle">Using <code>input type="time"</code></h6>
<form class="mt-4">
<div class="form-group">
<input type="time" class="form-control" value="22:33:00">
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Type Week</h4>
<h6 class="card-subtitle">Using <code>input type="week"</code></h6>
<form class="mt-4">
<div class="form-group">
<input type="week" class="form-control" value="2011-W33">
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Type Month</h4>
<h6 class="card-subtitle">Using <code>input type="month"</code></h6>
<form class="mt-4">
<div class="form-group">
<input type="month" class="form-control" value="1999-08">
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Type Color</h4>
<h6 class="card-subtitle">Using <code>input type="color"</code></h6>
<form class="mt-4">
<div class="form-group">
<input type="color" class="form-control" value="#563d7c">
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Type Range</h4>
<h6 class="card-subtitle">Using <code>input type="range"</code></h6>
<form class="mt-3">
<div class="form-group">
<input type="range" class="form-control" value="1999-08">
</div>
</form>
</div>
</div>
</div>
</div>
<h4 class="card-title mt-5">General Textarea</h4>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Textarea</h4>
<form class="mt-3">
<div class="form-group">
<textarea class="form-control" rows="3"></textarea>
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Textarea With Placeholder</h4>
<form class="mt-3">
<div class="form-group">
<textarea class="form-control" rows="3" placeholder="Text Here..."></textarea>
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Textarea With Helper Text</h4>
<form>
<div class="form-group">
<textarea class="form-control" rows="3" placeholder="Text Here..."></textarea>
<small id="textHelp" class="form-text text-muted">Helper Text</small>
</div>
</form>
</div>
</div>
</div>
</div>
<h4 class="card-title">Inline Checkboxes & Radios</h4>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Inline Default Checkbox</h4>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1"
value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2"
value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"
disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title"> Inline Default Radio Button</h4>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions"
id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions"
id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions"
id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Inline Custom Checkbox</h4>
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">1</label>
</div>
</div>
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2">
<label class="custom-control-label" for="customCheck2">2</label>
</div>
</div>
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck3"
disabled="">
<label class="custom-control-label" for="customCheck3">3</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Inline Custom Radios</h4>
<div class="form-check form-check-inline">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation2"
name="radio-stacked">
<label class="custom-control-label" for="customControlValidation2">1</label>
</div>
</div>
<div class="form-check form-check-inline">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation3"
name="radio-stacked">
<label class="custom-control-label" for="customControlValidation3">2</label>
</div>
</div>
<div class="form-check form-check-inline">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation4"
name="radio-stacked" disabled>
<label class="custom-control-label" for="customControlValidation4">3</label>
</div>
</div>
</div>
</div>
</div>
</div>
<h4 class="card-title mt-5">General Select</h4>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Select</h4>
<form class="mt-4">
<div class="form-group mb-4">
<label for="exampleFormControlSelect1">Select No</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Custom Select</h4>
<h6 class="card-subtitle">To use add <code>.custom-select</code> class</h6>
<form>
<div class="form-group mb-4">
<label class="mr-sm-2" for="inlineFormCustomSelect">Select</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Multiple Select</h4>
<h6 class="card-subtitle">To use add <code>multiple</code> to the field</h6>
<form>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Select With Addons</h4>
<h6 class="card-subtitle">To use add <code>.input-group-prepend</code> class to the div
</h6>
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Select With Buttons</h4>
<h6 class="card-subtitle">To use add <code>.input-group-append</code> class to the div
</h6>
<form class="mt-4">
<div class="input-group">
<select class="custom-select" id="inputGroupSelect04">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<h4 class="card-title mt-5">File Upload</h4>
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Default File Upload</h4>
<h6 class="card-subtitle">To use add <code>.form-control-file</code> class to the input
</h6>
<form class="mt-3">
<fieldset class="form-group">
<input type="file" class="form-control-file" id="exampleInputFile">
</fieldset>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Custom File Upload</h4>
<h6 class="card-subtitle">To use add <code>.custom-file-input</code> class to the input
</h6>
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Upload</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Custom File Upload with Button Left</h4>
<h6 class="card-subtitle">To use add <code>.input-group-prepend</code> class to the div
</h6>
<form class="mt-4">
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile03">
<label class="custom-file-label" for="inputGroupFile03">Choose file</label>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Custom File Upload with Button Right</h4>
<h6 class="card-subtitle">To use add <code>.input-group-append</code> class to the div
</h6>
<form class="mt-4">
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile04">
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<h4 class="card-title mt-5">Different Style in Helper Text</h4>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Left Helper Text</h4>
<h6 class="card-subtitle">To use add <code>float-left</code> class to the text</h6>
<form class="mt-3">
<div class="form-group">
<input type="text" class="form-control" id="nametext2" aria-describedby="name"
placeholder="Name">
<small id="name1"
class="badge badge-default badge-info form-text text-white float-left">Helper
Text</small>
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Center Helper Text</h4>
<h6 class="card-subtitle">To use add <code>text-center</code> class to the text</h6>
<form class="mt-3">
<div class="form-group mb-0">
<input type="text" class="form-control" id="nametext4" aria-describedby="name"
placeholder="Name">
<p class="text-center mb-0">
<small id="name45"
class="badge badge-default badge-warning form-text text-white">Helper
Text</small>
</p>
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Right Helper Text</h4>
<h6 class="card-subtitle">To use add <code>float-right</code> class to the text</h6>
<form class="mt-3">
<div class="form-group">
<input type="text" class="form-control" id="nametext12" aria-describedby="name"
placeholder="Name">
<small id="name13"
class="badge badge-default badge-danger form-text text-white float-right">Helper
Text</small>
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Inline Helper Text</h4>
<form class="mt-3">
<div class="row">
<div class="col-md-8">
<input type="text" class="form-control" id="helpInput10"
placeholder="Helper Text">
</div>
<div class="col-md-4">
<small class="text-muted">Helper Text</small>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Inline Helper Text With Color</h4>
<form class="mt-3">
<div class="row">
<div class="col-md-8">
<input type="text" class="form-control" id="helpInput11"
placeholder="Help Text">
</div>
<div class="col-md-4 block-tag">
<small class="badge badge-default badge-success text-white">Helper
Text</small>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<h4 class="card-title mt-5">Input With Validaton</h4>
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input With Success</h4>
<h6 class="card-subtitle">To use add <code>is-valid</code> class to the input</h6>
<form class="mt-3">
<label class="form-control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control is-valid" id="inputSuccess1">
<div class="valid-feedback">
Success! You've done it.
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input With Danger</h4>
<h6 class="card-subtitle">To use add <code>is-invalid</code> class to the input</h6>
<form class="mt-3">
<label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control is-invalid" id="inputDanger1">
<div class="invalid-feedback">
Sorry, that username's taken. Try another?
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Inline Input With Success</h4>
<h6 class="card-subtitle">To use add <code>form-horizontal</code> class to the input
</h6>
<form class="mt-3 form-horizontal">
<div class="form-group row">
<label for="inputHorizontalSuccess"
class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control is-valid"
id="inputHorizontalSuccess" placeholder="name@example.com">
<div class="valid-feedback">Success! You've done it.</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Inline Input With Danger</h4>
<h6 class="card-subtitle">To use add <code>form-horizontal</code> class to the input
</h6>
<form class="mt-3 form-horizontal">
<div class="form-group row">
<label for="inputHorizontalDnger" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control is-invalid"
id="inputHorizontalDnger" placeholder="name@example.com">
<div class="invalid-feedback">Sorry, that username's taken. Try another?
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<h4 class="card-title mt-5">Input With Tooltip</h4>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="card">
<div class="card-body">
<h4 class="card-title">Tooltip Bottom</h4>
<form class="mt-3">
<input type="text" data-toggle="tooltip" data-placement="bottom"
title="Tooltip on bottom" class="form-control" placeholder="Bottom">
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="card">
<div class="card-body">
<h4 class="card-title">Tooltip Right</h4>
<form class="mt-3">
<input type="text" data-toggle="tooltip" data-placement="right"
title="Tooltip on right" class="form-control" placeholder="Right">
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="card">
<div class="card-body">
<h4 class="card-title">Tooltip Top</h4>
<form class="mt-3">
<input type="text" data-toggle="tooltip" data-placement="top" title="Tooltip on top"
class="form-control" placeholder="Top">
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="card">
<div class="card-body">
<h4 class="card-title">Tooltip Left</h4>
<form class="mt-3">
<input type="text" data-toggle="tooltip" data-placement="left"
title="Tooltip on left" class="form-control" placeholder="Left">
</form>
</div>
</div>
</div>
</div>
<h4 class="card-title mt-5">Input Text Styles</h4>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Text Bold</h4>
<form class="mt-3">
<input type="text" class="form-control font-weight-bold" placeholder="Bold Text">
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Text Normal</h4>
<form class="mt-3">
<input type="text" class="form-control font-weight-normal"
placeholder="Normal Text">
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Text Light</h4>
<form class="mt-3">
<input type="text" class="form-control font-weight-light" placeholder="Light Text">
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Text Italic</h4>
<form class="mt-3">
<input type="text" class="form-control font-italic" placeholder="Italic Text">
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Text Lowercase</h4>
<form class="mt-3">
<input type="text" class="form-control text-lowercase" placeholder="Lowercase">
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Text Uppercase</h4>
<form class="mt-3">
<input type="text" class="form-control text-uppercase" placeholder="Uppercase">
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Text Capitalize</h4>
<form class="mt-3">
<input type="text" class="form-control text-capitalize" placeholder="capitalize">
</form>
</div>
</div>
</div>
</div>
<h4 class="card-title mt-5">Input Sizing</h4>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Small Input</h4>
<form class="mt-3">
<input type="text" id="example-input-small" name="example-input-small"
class="form-control form-control-sm" placeholder="Small">
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Normal Input</h4>
<form class="mt-3">
<input type="text" id="example-input-normal" name="example-input-normal"
class="form-control" placeholder="Normal">
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Large Input</h4>
<form class="mt-3">
<input type="text" id="example-input-large" name="example-input-large"
class="form-control form-control-lg" placeholder="Large">
</form>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End PAge Content -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Right sidebar -->
<!-- ============================================================== -->
<!-- .right-sidebar -->
<!-- ============================================================== -->
<!-- End Right sidebar -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Container fluid -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- footer -->
<!-- ============================================================== -->
<footer class="footer text-center">
All Rights Reserved by Adminmart. Designed and Developed by <a
href="https://wrappixel.com">WrapPixel</a>.
</footer>
<!-- ============================================================== -->
<!-- End footer -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Page wrapper -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- End Wrapper -->
<div class="chat-windows "></div>
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="../assets/libs/jquery/dist/jquery.min.js "></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="../assets/libs/popper.js/dist/umd/popper.min.js "></script>
<script src="../assets/libs/bootstrap/dist/js/bootstrap.min.js "></script>
<!-- apps -->
<script src="../dist/js/app.min.js "></script>
<script src="../dist/js/app.init-menusidebar.js"></script>
<script src="../dist/js/app-style-switcher.js "></script>
<script src="../dist/js/feather.min.js"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="../assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js "></script>
<script src="../assets/extra-libs/sparkline/sparkline.js "></script>
<!-- theme js -->
<!--Menu sidebar -->
<script src="../dist/js/sidebarmenu.js "></script>
<!--Custom JavaScript -->
<script src="../dist/js/custom.min.js "></script>
</body>
</html>