admint
Version:
Open source admin dashboard template
1,044 lines (1,041 loc) • 57.8 kB
HTML
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<!-- Meta Tags -->
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="theme_bubble" />
<!-- Page Title -->
<title>Form Element</title>
<!-- Favicon Icon -->
<link rel="icon" href="assets/img/favicon.png">
<!-- Plugins css -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/material-icons.css">
<link rel="stylesheet" type="text/css" href="assets/css/jqvmap.min.css" />
<link id="mode-option" rel="stylesheet" type="text/css" href="assets/css/style.css" />
</head>
<body>
<div class="yoo-height-b60 yoo-height-lg-b60"></div>
<header class="yoo-header yoo-style1 yoo-sticky-menu">
<div class="yoo-main-header">
<div class="yoo-main-header-in">
<div class="yoo-main-header-left">
<a href="index.html" class="yoo-logo-link yoo-light-logo"><img src="assets/img/logo-light.svg" alt="logo-light" /></a>
<!-- For Site Title -->
<!-- <span class="yoo-site-title">
<a href="index.html">Logo</a>
</span> -->
</div>
<div class="yoo-main-header-right">
<div class="yoo-nav-wrap yoo-fade-up">
<div class="yoo-nav-toggle">
<i class="material-icons-outlined">more_vert</i>
</div>
<nav class="yoo-nav yoo-desktop-nav">
<ul class="yoo-nav-list">
<li>
<a href="#"><i class="material-icons-outlined">home</i> Home</a>
</li>
<li>
<a href="#"><i class="material-icons-outlined">subscriptions</i> Features</a>
</li>
<li>
<a href="#"><i class="material-icons-outlined">folder</i> Apps</a>
</li>
</ul>
</nav>
<!-- .yoo-nav -->
</div>
<!-- .yoo-nav-wrap -->
<ul class="yoo-ex-nav yoo-style1 yoo-flex yoo-mp0">
<li>
<div class="yoo-toggle-body yoo-search-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-search-btn">
<i class="material-icons-outlined">search</i>
</span>
<div class="yoo-dropdown yoo-search-dropdown">
<form action="#" class="yoo-search yoo-style1">
<input type="text" placeholder="Search..." class="yoo-search-input">
<div class="yoo-toggle-cross">
<i class="material-icons-outlined">close</i>
</div>
<button class="yoo-search-submit"><i class="material-icons-outlined">search</i></button>
</form>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-message-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-message-btn">
<i class="material-icons-outlined">email</i>
<span class="yoo-ex-nav-label">9</span>
</span>
<div class="yoo-dropdown yoo-notify-dropdown">
<h2 class="yoo-nofify-title">
<span class="yoo-nofify-title-left">Messages</span>
<span class="yoo-nofify-title-right"><a href="#">Mark All as Read</a></span>
</h2>
<ul class="yoo-nofify-list yoo-style1 yoo-mp0">
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="assets/img/msg/msg1.png" alt="msg1">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Bob Dylan
<span class="yoo-online-status yoo-live"></span>
</h3>
<div class="yoo-msg">
Contrary to popular belief, Lorem Ipsum is...
</div>
<span class="yoo-notify-time">12:23</span>
</div>
</a>
</li>
<li>
<a href="#" class="active">
<div class="yoo-nofify-thumb">
<img src="assets/img/msg/msg2.png" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
David Gilmour
<span class="yoo-online-status"></span>
</h3>
<div class="yoo-msg">
Contrary to popular belief, Lorem Ipsum is...
</div>
<span class="yoo-notify-time">12:23</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="assets/img/msg/msg3.png" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Jeff Beck
<span class="yoo-online-status yoo-live"></span>
</h3>
<div class="yoo-msg">
Contrary to popular belief, Lorem Ipsum is...
</div>
<span class="yoo-notify-time">12:23</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="assets/img/msg/msg4.png" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Guthrie Govan
<span class="yoo-online-status"></span>
</h3>
<div class="yoo-msg">
Contrary to popular belief, Lorem Ipsum is...
</div>
<span class="yoo-notify-time">12:23</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="assets/img/msg/msg5.png" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Eric Johnson
<span class="yoo-online-status"></span>
</h3>
<div class="yoo-msg">
Contrary to popular belief, Lorem Ipsum is...
</div>
<span class="yoo-notify-time">12:23</span>
</div>
</a>
</li>
</ul>
<a href="#" class="yoo-btn yoo-style2">SEE ALL <i class="material-icons-outlined">navigate_next</i></a>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-notice-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-notice-btn">
<i class="material-icons-outlined">notifications</i>
<span class="yoo-ex-nav-label">3</span>
</span>
<div class="yoo-dropdown yoo-notify-dropdown">
<h2 class="yoo-nofify-title">
<span class="yoo-nofify-title-left">Notifications</span>
</h2>
<ul class="yoo-nofify-list yoo-style1 yoo-mp0">
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color2">
<i class="material-icons-outlined">supervisor_account</i>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">Invite your friends to dashboard.</h3>
<span class="yoo-notify-time">5 hour ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color4">
<i class="material-icons-outlined">calendar_today</i>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">3 Tasks pending this month.</h3>
<span class="yoo-notify-time">6 hour ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color3">
<i class="material-icons-outlined">favorite_border</i>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">7 People loved your activity.</h3>
<span class="yoo-notify-time">9 hour ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color2">
<i class="material-icons-outlined">chat_bubble_outline</i>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">John commented on activity.</h3>
<span class="yoo-notify-time">1 day ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color1">
<img src="assets/img/msg/msg1.png" alt="msg1" />
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">Click your picture or add an account.</h3>
<span class="yoo-notify-time">2 days ago</span>
</div>
</a>
</li>
</ul>
<a href="#" class="yoo-btn yoo-style2">SEE ALL <i class="material-icons-outlined">navigate_next</i></a>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-app-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-sidebar-btn">
<i class="material-icons-outlined">apps</i>
</span>
<div class="yoo-dropdown yoo-notify-dropdown">
<h2 class="yoo-nofify-title">Quick Navigation</h2>
<ul class="yoo-nofify-list yoo-style2 yoo-mp0">
<li>
<a href="#">
<div class="yoo-nofify-icon yoo-icon-color1">
<i class="material-icons-outlined">bar_chart</i>
</div>
<div class="yoo-nofify-text">
<h3>Chart</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-icon yoo-icon-color2">
<i class="material-icons-outlined">bubble_chart</i>
</div>
<div class="yoo-nofify-text">
<h3>Big Data</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-icon yoo-icon-color3">
<i class="material-icons-outlined">folder_open</i>
</div>
<div class="yoo-nofify-text">
<h3>Storage</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-icon yoo-icon-color4">
<i class="material-icons-outlined">security</i>
</div>
<div class="yoo-nofify-text">
<h3>Security</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-icon yoo-icon-color3">
<i class="material-icons-outlined">layers</i>
</div>
<div class="yoo-nofify-text">
<h3>Themes</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-icon yoo-icon-color2">
<i class="material-icons-outlined">attach_file</i>
</div>
<div class="yoo-nofify-text">
<h3>Upload</h3>
</div>
</a>
</li>
</ul>
<hr>
<a href="#" class="yoo-btn yoo-style2">SEE ALL <i class="material-icons-outlined">navigate_next</i></a>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-profile-nav yoo-style1">
<div class="yoo-toggle-btn yoo-profile-nav-btn">
<div class="yoo-profile-nav-text">
<span>Welcome,</span>
<h4>Thom Yorke</h4>
</div>
<div class="yoo-profile-nav-img">
<img src="assets/img/profile-pic.png" alt="profile">
</div>
</div>
<ul class="yoo-dropdown yoo-style1">
<li>
<a href="#"><i class="material-icons-outlined">account_circle</i>My Profile</a>
</li>
<li>
<a href="#"><i class="material-icons-outlined">settings</i>Settings</a>
</li>
<li>
<a href="#"><i class="material-icons-outlined">videocam</i>Upload</a>
</li>
<li>
<a href="#"><i class="material-icons-outlined">help</i>Help</a>
</li>
<li class="yoo-dropdown-cta"><a href="#">Sign Out</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</header><!-- .yoo-header -->
<div class="yoo-sidebarheader-toggle">
<div class="yoo-button-bar1"></div>
<div class="yoo-button-bar2"></div>
<div class="yoo-button-bar3"></div>
</div><!-- .yoo-sidebarheader-toggle -->
<div class="yoo-sidebarheader yoo-white-bg">
<div class="yoo-add">
<div class="yoo-add-in">
<a target="_blank" href="https://yookits.com/product/admint-pro-bootstrap-admin-dashboard-template/" class="yoo-add-thumb">
<img src="assets/img/admint-litee.png" alt="Admint">
</a>
<h2 class="yoo-add-title"><a target="_blank" href="https://yookits.com/product/admint-pro-bootstrap-admin-dashboard-template/">Go Pro & unlock 100+ more UI components & pages.</a></h2>
<a target="_blank" href="https://yookits.com/product/admint-pro-bootstrap-admin-dashboard-template/" class="yoo-add-btn btn btn-success btn-sm">Show Me</a>
</div>
</div>
<div class="yoo-sidebarheader-in" data-scrollbar>
<div class="yoo-sidebar-nav">
<ul class="yoo-sidebar-nav-list yoo-mp0">
<li>
<a href="index.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">dashboard</i></span>
<span class="yoo-sidebar-link-text">Dashboard</span>
</span>
</a>
</li>
<li>
<a href="profile-settings.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">settings</i></span>
<span class="yoo-sidebar-link-text">Profile Settings</span>
</span>
</a>
</li>
<li>
<a href="calendar.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">event_note</i></span>
<span class="yoo-sidebar-link-text">Calender</span>
</span>
</a>
</li>
<li class="yoo-sidebar-has-children">
<a href="#">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">account_circle</i></span>
<span class="yoo-sidebar-link-text">Log In/Sign Up</span>
</span>
</a>
<ul class="yoo-sidebar-nav-dropdown">
<li>
<a href="login.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Log In</span>
</span>
</a>
</li>
<li>
<a href="sighup.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Sign Up</span>
</span>
</a>
</li>
</ul><!-- .yoo-sidebar-nav-dropdown -->
</li>
<li>
<a href="alerts.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">cloud</i></span>
<span class="yoo-sidebar-link-text">Notifications</span>
</span>
</a>
</li>
<li>
<a href="buttons.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">folder</i></span>
<span class="yoo-sidebar-link-text">Buttons</span>
</span>
</a>
</li>
<li>
<a href="tabs.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">table_chart</i></span>
<span class="yoo-sidebar-link-text">Tabs</span>
</span>
</a>
</li>
<li class="active">
<a href="form-element.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">add_to_photos</i></span>
<span class="yoo-sidebar-link-text">Forms</span>
</span>
</a>
</li>
<li>
<a href="pagination.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">flag</i></span>
<span class="yoo-sidebar-link-text">Pagination</span>
</span>
</a>
</li>
<li>
<a href="accordion.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">horizontal_split</i></span>
<span class="yoo-sidebar-link-text">Accordion</span>
</span>
</a>
</li>
<li>
<a href="badge.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">date_range</i></span>
<span class="yoo-sidebar-link-text">Badge</span>
</span>
</a>
</li>
<li>
<a href="breadcrumb.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">aspect_ratio</i></span>
<span class="yoo-sidebar-link-text">Breadcrumb</span>
</span>
</a>
</li>
<li>
<a href="card.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">account_balance_wallet</i></span>
<span class="yoo-sidebar-link-text">Card</span>
</span>
</a>
</li>
<li>
<a href="typography.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">font_download</i></span>
<span class="yoo-sidebar-link-text">Typography</span>
</span>
</a>
</li>
<li>
<a href="color-plate.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">opacity</i></span>
<span class="yoo-sidebar-link-text">Color Plate</span>
</span>
</a>
</li>
<li class="yoo-sidebar-has-children">
<a href="#">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">archive</i></span>
<span class="yoo-sidebar-link-text">Icons</span>
</span>
</a>
<ul class="yoo-sidebar-nav-dropdown">
<li>
<a href="material-icons.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Material Icons</span>
</span>
</a>
</li>
<li>
<a href="font-awesome-icons.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">FontAwesome Icons</span>
</span>
</a>
</li>
<li>
<a href="line-icons.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Line Icons</span>
</span>
</a>
</li>
<li>
<a href="themify-icons.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Themify Icons</span>
</span>
</a>
</li>
</ul><!-- .yoo-sidebar-nav-dropdown -->
</li>
<li>
<a href="svg-maps.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">explore</i></span>
<span class="yoo-sidebar-link-text">SVG Maps</span>
</span>
</a>
</li>
<li>
<a href="documentation.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">library_books</i></span>
<span class="yoo-sidebar-link-text">Documentation</span>
</span>
</a>
</li>
</ul><!-- .yoo-sidebar-nav-list -->
</div>
</div>
</div><!-- .yoo-sidebarheader -->
<div class="yoo-content yoo-style1">
<div class="yoo-padd-lr-30 yoo-uikits-heading">
<h2 class="yoo-uikits-title">Accordion</h2>
<ul class="yoo-breadcamb yoo-style1 yoo-mp0">
<li><a href="#">Home</a></li>
<li><a href="#">UI Kits</a></li>
<li>Form Elements</li>
</ul>
</div>
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">Form controls</h2>
</div>
</div>
<div class="yoo-card-body">
<div class="yoo-padd-lr-30 yoo-alert-wrap">
<div class="yoo-height-b25 yoo-height-lg-b25"></div>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="name@example.com">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Readonly input</label>
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
</div>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
</fieldset>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<fieldset disabled>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
</fieldset>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
<div class="yoo-height-b15 yoo-height-lg-b15"></div>
</div>
</div>
</div>
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">Form grid</h2>
</div>
</div>
<div class="yoo-card-body">
<div class="yoo-padd-lr-30 yoo-alert-wrap">
<div class="yoo-height-b25 yoo-height-lg-b25"></div>
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
</form>
<div class="yoo-height-b15 yoo-height-lg-b15"></div>
</div>
</div>
</div>
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">Horizontal form</h2>
</div>
</div>
<div class="yoo-card-body">
<div class="yoo-padd-lr-30 yoo-alert-wrap">
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<span class="col-form-label col-sm-2 pt-0">Radios</span>
<div class="col-sm-10">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">First radio</label>
</div>
<div class="yoo-height-b5 yoo-height-lg-b5"></div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Second radio</label>
</div>
<div class="yoo-height-b5 yoo-height-lg-b5"></div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadioDisabled" name="radioDisabled" class="custom-control-input" disabled>
<label class="custom-control-label" for="customRadioDisabled">Disabled radio</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-2">Checkbox</div>
<div class="col-sm-10">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Example checkbox</label>
</div>
</div>
</div>
</form>
<div class="yoo-height-b5 yoo-height-lg-b5"></div>
</div>
</div>
</div>
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">File Input</h2>
</div>
</div>
<div class="yoo-card-body">
<div class="yoo-padd-lr-30 yoo-alert-wrap">
<div class="yoo-height-b25 yoo-height-lg-b25"></div>
<form>
<div class="form-group yoo-cs-input-btn">
<label for="exampleFormControlFile1">Example file input</label>
<span>Chose File</span>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</form>
<div class="yoo-height-b15 yoo-height-lg-b15"></div>
</div>
</div>
</div>
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">Checkboxes</h2>
</div>
</div>
<div class="yoo-card-body">
<div class="yoo-padd-lr-30 yoo-alert-wrap">
<div class="yoo-height-b25 yoo-height-lg-b25"></div>
<form>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2">
<label class="custom-control-label" for="customCheck2">Check this custom checkbox</label>
</div>
<div class="yoo-height-b5 yoo-height-lg-b5"></div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheckDisabled2" disabled>
<label class="custom-control-label" for="customCheckDisabled2">Check this custom checkbox</label>
</div>
</form>
<div class="yoo-height-b25 yoo-height-lg-b25"></div>
</div>
</div>
</div>
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">Radios</h2>
</div>
</div>
<div class="yoo-card-body">
<div class="yoo-padd-lr-30 yoo-alert-wrap">
<div class="yoo-height-b25 yoo-height-lg-b25"></div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio5" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio5">Toggle this custom radio</label>
</div>
<div class="yoo-height-b5 yoo-height-lg-b5"></div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio6" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio6">Or toggle this other custom radio</label>
</div>
<div class="yoo-height-b5 yoo-height-lg-b5"></div>
<div class="custom-control custom-radio">
<input type="radio" name="radioDisabled" class="custom-control-input" disabled>
<label class="custom-control-label" >Disabled radio</label>
</div>
<div class="yoo-height-b25 yoo-height-lg-b25"></div>
</div>
</div>
</div>
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">Radios Inline</h2>
</div>
</div>
<div class="yoo-card-body">
<div class="yoo-padd-lr-30 yoo-alert-wrap">
<div class="yoo-height-b25 yoo-height-lg-b25"></div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline10" name="customRadioInline10" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline10">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline22" name="customRadioInline12" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline22">Or toggle this other custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="radio3" name="radioDisabled6" class="custom-control-input" disabled>
<label class="custom-control-label" >Disabled radio</label>
</div>
<div class="yoo-height-b25 yoo-height-lg-b25"></div>
</div>
</div>
</div>
</div><!-- .col -->
<div class="col-lg-6">
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">Input Size</h2>
</div>
</div>
<div class="yoo-card-body">
<div class="yoo-padd-lr-30 yoo-alert-wrap">
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<form>
<div class="form-group">
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Default input">
</div>
<div class="form-group">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
</div>
</form>
<div class="yoo-height-b15 yoo-height-lg-b15"></div>
</div>
</div>
</div>
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">Select Size</h2>
</div>
</div>
<div class="yoo-card-body">
<div class="yoo-padd-lr-30 yoo-alert-wrap">
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<form>
<div class="form-group">
<select class="form-control form-control-lg">
<option>Large select</option>
</select>
</div>
<div class="form-group">
<select class="form-control form-control-lg">
<option>Large select</option>
</select>
</div>
<div class="form-group">
<select class="form-control form-control-sm">
<option>Small select</option>
</select>
</div>
</form>
<div class="yoo-height-b15 yoo-height-lg-b15"></div>
</div>
</div>
</div>
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">Select Size</h2>
</div>
</div>
<div class="yoo-card-body">
<div class="yoo-padd-lr-30 yoo-alert-wrap">
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<form>
<div class="form-group row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
</div>
</div>
<div class="form-group row">
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
</div>
</div>
<div class="form-group row">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
</div>
</form>
<div class="yoo-height-b15 yoo-height-lg-b15"></div>
</div>
</div>
</div>
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">Input Group</h2>
</div>
</div>
<div class="yoo-card-body">
<div class="yoo-padd-lr-30 yoo-alert-wrap">
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="yoo-height-b20 yoo-height-lg-b20"></div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
</div>
<div class="yoo-height-b20 yoo-height-lg-b20"></div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="yoo-height-b20 yoo-height-lg-b20"></div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
<div class="yoo-height-b20 yoo-height-lg-b20"></div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>
<div class="yoo-height-b20 yoo-height-lg-b20"></div>
<div class="input-group">
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
</div>
<div class="yoo-height-b20 yoo-height-lg-b20"></div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">With textarea</span>
</div>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<div class="yoo-height-b20 yoo-height-lg-b20"></div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
<div class="yoo-height-b20 yoo-height-lg-b20"></div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" aria-label="Radio button for following text input">
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with radio button">
</div>
<div class="yoo-height-b20 yoo-height-lg-b20"></div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" >First and last name</span>
</div>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
<div class="yoo-height-b20 yoo-height-lg-b20"></div>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-primary" type="button">Button</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
<div class="yoo-height-b20 yoo-height-lg-b20"></div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type