<!DOCTYPE html>
<!--
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.2.0
Version: 3.4
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Follow: www.twitter.com/keenthemes
Like: www.facebook.com/keenthemes
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest (the above link) in order to legally use the theme for your project.
-->
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- Head BEGIN -->
<head>
<meta charset="utf-8">
<title>Forms | Metronic Frontend
</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="Metronic Shop UI description" name="description">
<meta content="Metronic Shop UI keywords" name="keywords">
<meta content="keenthemes" name="author">
<meta property="og:site_name" content="-CUSTOMER VALUE-">
<meta property="og:title" content="-CUSTOMER VALUE-">
<meta property="og:description" content="-CUSTOMER VALUE-">
<meta property="og:type" content="website">
<meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
<meta property="og:url" content="-CUSTOMER VALUE-">
<link rel="shortcut icon" href="favicon.ico">
<!-- Fonts START -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|PT+Sans+Narrow|Source+Sans+Pro:200,300,400,600,700,900&subset=all" rel="stylesheet" type="text/css">
<!-- Fonts END -->
<!-- Global styles START -->
<link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Global styles END -->
<!-- Page level plugin styles START -->
<link href="../../assets/global/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
<link href="../../assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
<!-- Page level plugin styles END -->
<!-- Theme styles START -->
<link href="../../assets/global/css/components.css" rel="stylesheet">
<link href="../../assets/global/css/plugins.css" rel="stylesheet">
<link href="../../assets/frontend/layout/css/style.css" rel="stylesheet">
<link href="../../assets/frontend/layout/css/style-responsive.css" rel="stylesheet">
<link href="../../assets/frontend/layout/css/themes/red.css" rel="stylesheet" id="style-color">
<link href="../../assets/frontend/layout/css/custom.css" rel="stylesheet">
<!-- Theme styles END -->
</head>
<!-- Head END -->
<!-- Body BEGIN -->
<body class="corporate">
<!-- BEGIN STYLE CUSTOMIZER -->
<div class="color-panel hidden-sm">
<div class="color-mode-icons icon-color"></div>
<div class="color-mode-icons icon-color-close"></div>
<div class="color-mode">
<p>THEME COLOR
</p>
<ul class="inline">
<li class="color-red current color-default" data-style="red"></li>
<li class="color-blue" data-style="blue"></li>
<li class="color-green" data-style="green"></li>
<li class="color-orange" data-style="orange"></li>
<li class="color-gray" data-style="gray"></li>
<li class="color-turquoise" data-style="turquoise"></li>
</ul>
</div>
</div>
<!-- END BEGIN STYLE CUSTOMIZER -->
<!-- BEGIN TOP BAR -->
<div class="pre-header">
<div class="container">
<div class="row">
<!-- BEGIN TOP BAR LEFT PART -->
<div class="col-md-6 col-sm-6 additional-shop-info">
<ul class="list-unstyled list-inline">
<li><i class="fa fa-phone"></i><span>+1 456 6717
</span></li>
<li><i class="fa fa-envelope-o"></i><span>info@keenthemes.com
</span></li>
</ul>
</div>
<!-- END TOP BAR LEFT PART -->
<!-- BEGIN TOP BAR MENU -->
<div class="col-md-6 col-sm-6 additional-nav">
<ul class="list-unstyled list-inline pull-right">
<li><a href="page-login.html">Log In
</a></li>
<li><a href="page-reg-page.html">Registration
</a></li>
</ul>
</div>
<!-- END TOP BAR MENU -->
</div>
</div>
</div>
<!-- END TOP BAR -->
<!-- BEGIN HEADER -->
<div class="header">
<div class="container">
<a class="site-logo" href="index.html"><img src="../../assets/frontend/layout/img/logos/logo-corp-red.png" alt="Metronic FrontEnd"></a>
<a href="javascript:void(0);" class="mobi-toggler"><i class="fa fa-bars"></i></a>
<!-- BEGIN NAVIGATION -->
<div class="header-navigation pull-right font-transform-inherit">
<ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Home
</a>
<ul class="dropdown-menu">
<li><a href="index.html">Home Default
</a></li>
<li><a href="index-header-fix.html">Home with Header Fixed
</a></li>
<li><a href="index-without-topbar.html">Home without Top Bar
</a></li>
</ul>
</li>
<li class="dropdown dropdown-megamenu">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Mega Menu
</a>
<ul class="dropdown-menu">
<li>
<div class="header-navigation-content">
<div class="row">
<div class="col-md-4 header-navigation-col">
<h4>Footwear
</h4>
<ul>
<li><a href="index.html">Astro Trainers
</a></li>
<li><a href="index.html">Basketball Shoes
</a></li>
<li><a href="index.html">Boots
</a></li>
<li><a href="index.html">Canvas Shoes
</a></li>
<li><a href="index.html">Football Boots
</a></li>
<li><a href="index.html">Golf Shoes
</a></li>
<li><a href="index.html">Hi Tops
</a></li>
<li><a href="index.html">Indoor Trainers
</a></li>
</ul>
</div>
<div class="col-md-4 header-navigation-col">
<h4>Clothing
</h4>
<ul>
<li><a href="index.html">Base Layer
</a></li>
<li><a href="index.html">Character
</a></li>
<li><a href="index.html">Chinos
</a></li>
<li><a href="index.html">Combats
</a></li>
<li><a href="index.html">Cricket Clothing
</a></li>
<li><a href="index.html">Fleeces
</a></li>
<li><a href="index.html">Gilets
</a></li>
<li><a href="index.html">Golf Tops
</a></li>
</ul>
</div>
<div class="col-md-4 header-navigation-col">
<h4>Accessories
</h4>
<ul>
<li><a href="index.html">Belts
</a></li>
<li><a href="index.html">Caps
</a></li>
<li><a href="index.html">Gloves
</a></li>
</ul>
<h4>Clearance
</h4>
<ul>
<li><a href="index.html">Jackets
</a></li>
<li><a href="index.html">Bottoms
</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Pages
</a>
<ul class="dropdown-menu">
<li><a href="page-about.html">About Us
</a></li>
<li><a href="page-services.html">Services
</a></li>
<li><a href="page-prices.html">Prices
</a></li>
<li><a href="page-faq.html">FAQ
</a></li>
<li><a href="page-gallery.html">Gallery
</a></li>
<li><a href="page-search-result.html">Search Result
</a></li>
<li><a href="page-404.html">404
</a></li>
<li><a href="page-500.html">500
</a></li>
<li><a href="page-login.html">Login Page
</a></li>
<li><a href="page-forgotton-password.html">Forget Password
</a></li>
<li><a href="page-reg-page.html">Signup Page
</a></li>
<li><a href="page-careers.html">Careers
</a></li>
<li><a href="page-site-map.html">Site Map
</a></li>
<li><a href="page-contacts.html">Contact
</a></li>
</ul>
</li>
<li class="dropdown active">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Features
</a>
<ul class="dropdown-menu">
<li><a href="feature-typography.html">Typography
</a></li>
<li><a href="feature-buttons.html">Buttons
</a></li>
<li class="active"><a href="feature-forms.html">Forms
</a></li>
<li class="dropdown-submenu">
<a href="index.html">Multi level
<i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="index.html">Second Level Link
</a></li>
<li><a href="index.html">Second Level Link
</a></li>
<li class="dropdown-submenu">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Second Level Link
<i class="fa fa-angle-right"></i>
</a>
<ul class="dropdown-menu">
<li><a href="index.html">Third Level Link
</a></li>
<li><a href="index.html">Third Level Link
</a></li>
<li><a href="index.html">Third Level Link
</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Portfolio
</a>
<ul class="dropdown-menu">
<li><a href="portfolio-4.html">Portfolio 4
</a></li>
<li><a href="portfolio-3.html">Portfolio 3
</a></li>
<li><a href="portfolio-2.html">Portfolio 2
</a></li>
<li><a href="portfolio-item.html">Portfolio Item
</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Blog
</a>
<ul class="dropdown-menu">
<li><a href="blog.html">Blog Page
</a></li>
<li><a href="blog-item.html">Blog Item
</a></li>
</ul>
</li>
<li><a href="shop-index.html" target="_blank">E-Commerce
</a></li>
<li><a href="onepage-index.html" target="_blank">One Page
</a></li>
<li><a href="http://keenthemes.com/preview/metronic/theme/templates/admin" target="_blank">Admin theme
</a></li>
<!-- BEGIN TOP SEARCH -->
<li class="menu-search">
<span class="sep"></span>
<i class="fa fa-search search-btn"></i>
<div class="search-box">
<form action="#">
<div class="input-group">
<input type="text" placeholder="Search" class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Search
</button>
</span>
</div>
</form>
</div>
</li>
<!-- END TOP SEARCH -->
</ul>
</div>
<!-- END NAVIGATION -->
</div>
</div>
<!-- Header END -->
<div class="main">
<div class="container">
<ul class="breadcrumb">
<li><a href="index.html">Home
</a></li>
<li><a href="#">Features
</a></li>
<li class="active">Forms
</li>
</ul>
<!-- BEGIN SIDEBAR & CONTENT -->
<div class="row margin-bottom-20">
<!-- BEGIN CONTENT -->
<div class="col-md-12 col-sm-12">
<h1>Forms
</h1>
<div class="content-page">
<div class="content-page">
<div class="note note-success">
<h4 class="block">Metronic Admin (Framework) Features
</h4>
<p>
In the frontend theme you can use nearly all the features from
<a href="http://keenthemes.com/preview/metronic_admin/" target="_blanl">Metronic Admin Theme
</a>. First you will just need to include 2 below global css files:
</p>
<p>
<code>../../assets/global/css/components.css
</code><br>
<code>../../assets/global/css/plugins.css
</code>
</p>
<p>
And selected plugin's css and js files accordingly.
</p>
</div>
<div class="row">
<div class="col-md-6 ">
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> Default Form
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form role="form">
<div class="form-body">
<div class="form-group">
<label>Email Address
</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input type="text" class="form-control" placeholder="Email Address">
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password
</label>
<div class="input-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
</div>
<div class="form-group">
<label>Left Icon
</label>
<div class="input-icon">
<i class="fa fa-bell-o"></i>
<input type="text" class="form-control" placeholder="Left icon">
</div>
</div>
<div class="form-group">
<label>Right Icon
</label>
<div class="input-icon right">
<i class="fa fa-microphone"></i>
<input type="text" class="form-control" placeholder="Right icon">
</div>
</div>
<div class="form-group">
<label>Input with Icon
</label>
<div class="input-group input-icon right">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<i class="fa fa-exclamation tooltips" data-original-title="Invalid email." data-container="body"></i>
<input id="email" class="input-error form-control" type="text" value="">
</div>
</div>
<div class="form-group">
<label>Input With Spinner
</label>
<input class="form-control spinner" type="text" placeholder="Process something"/>
</div>
<div class="form-group">
<label>Static Control
</label>
<p class="form-control-static">
email@example.com
</p>
</div>
<div class="form-group">
<label>Disabled
</label>
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="form-group">
<label>Readonly
</label>
<input type="text" class="form-control" placeholder="Readonly" readonly>
</div>
<div class="form-group">
<label>Dropdown
</label>
<select class="form-control">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
<div class="form-group">
<label>Multiple Select
</label>
<select multiple class="form-control">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
<div class="form-group">
<label>Textarea
</label>
<textarea class="form-control" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleInputFile1">File input
</label>
<input type="file" id="exampleInputFile1">
<p class="help-block">
some help text here.
</p>
</div>
<div class="form-group">
<label>Checkboxes
</label>
<div class="checkbox-list">
<label>
<input type="checkbox"> Checkbox 1
</label>
<label>
<input type="checkbox"> Checkbox 2
</label>
<label>
<input type="checkbox" disabled> Disabled
</label>
</div>
</div>
<div class="form-group">
<label>Inline Checkboxes
</label>
<div class="checkbox-list">
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> Checkbox 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> Checkbox 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3" disabled> Disabled
</label>
</div>
</div>
<div class="form-group">
<label>Radio
</label>
<div class="radio-list">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option 1
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option 2
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Disabled
</label>
</div>
</div>
<div class="form-group">
<label>Inline Radio
</label>
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios4" value="option1" checked> Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios5" value="option2"> Option 2
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios6" value="option3" disabled> Disabled
</label>
</div>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn blue">Submit
</button>
<button type="button" class="btn default">Cancel
</button>
</div>
</form>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box red">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> Default Form Height Sizing
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form role="form">
<div class="form-body">
<div class="form-group">
<label>Large Input
</label>
<input type="text" class="form-control input-lg" placeholder="input-lg">
</div>
<div class="form-group">
<label>Default Input
</label>
<input type="text" class="form-control" placeholder="">
</div>
<div class="form-group">
<label>Small Input
</label>
<input type="text" class="form-control input-sm" placeholder="input-sm">
</div>
<div class="form-group">
<label>Large Select
</label>
<select class="form-control input-lg">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
<div class="form-group">
<label>Default Select
</label>
<select class="form-control">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
<div class="form-group">
<label>Small Select
</label>
<select class="form-control input-sm">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
</div>
<div class="form-actions right">
<button type="button" class="btn default">Cancel
</button>
<button type="submit" class="btn green">Submit
</button>
</div>
</form>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> Form Input Width Sizing
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form role="form">
<div class="form-body">
<div class="form-group">
<label>Fluid Input
</label>
<input type="text" class="form-control" placeholder="fluid">
<div class="input-icon right margin-top-10">
<i class="fa fa-check"></i>
<input type="text" class="form-control" placeholder="fluid">
</div>
<div class="input-icon margin-top-10">
<i class="fa fa-user"></i>
<input type="text" class="form-control" placeholder="fluid">
</div>
<div class="input-group margin-top-10">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input type="email" class="form-control" placeholder=".input-xlarge">
</div>
<div class="input-group margin-top-10">
<input type="email" class="form-control" placeholder=".input-xlarge">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
</div>
<hr>
</div>
<div class="form-group">
<label>Extra Large Input
</label>
<input type="text" class="form-control input-xlarge" placeholder=".input-xlarge">
<div class="input-icon right input-xlarge margin-top-10">
<i class="fa fa-check"></i>
<input type="text" class="form-control" placeholder=".input-xlarge">
</div>
<div class="input-icon input-xlarge margin-top-10">
<i class="fa fa-user"></i>
<input type="text" class="form-control" placeholder=".input-xlarge">
</div>
<div class="input-group input-xlarge margin-top-10">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input type="email" class="form-control" placeholder=".input-xlarge">
</div>
<div class="input-group input-xlarge margin-top-10">
<input type="email" class="form-control" placeholder=".input-xlarge">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
</div>
<hr>
</div>
<div class="form-group">
<label>Large Input
</label>
<input type="text" class="form-control input-large" placeholder=".input-large">
<div class="input-icon right input-large margin-top-10">
<i class="fa fa-check"></i>
<input type="text" class="form-control" placeholder=".input-large">
</div>
<div class="input-icon input-large margin-top-10">
<i class="fa fa-user"></i>
<input type="text" class="form-control" placeholder=".input-large">
</div>
<div class="input-group input-large margin-top-10">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input type="email" class="form-control" placeholder=".input-large">
</div>
<div class="input-group input-large margin-top-10">
<input type="email" class="form-control" placeholder=".input-large">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
</div>
<hr>
</div>
<div class="form-group">
<label>Medium Input
</label>
<input type="text" class="form-control input-medium" placeholder=".input-medium">
<div class="input-icon right input-medium margin-top-10">
<i class="fa fa-check"></i>
<input type="text" class="form-control" placeholder=".input-medium">
</div>
<div class="input-icon input-medium margin-top-10">
<i class="fa fa-user"></i>
<input type="text" class="form-control" placeholder=".input-medium">
</div>
<div class="input-group input-medium margin-top-10">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input type="email" class="form-control" placeholder=".input-medium">
</div>
<div class="input-group input-medium margin-top-10">
<input type="email" class="form-control" placeholder=".input-medium">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
</div>
<hr>
</div>
<div class="form-group">
<label>Small Input
</label>
<input type="text" class="form-control input-small" placeholder=".input-small">
<div class="input-icon right input-small margin-top-10">
<i class="fa fa-check"></i>
<input type="text" class="form-control" placeholder=".input-small">
</div>
<div class="input-icon input-small margin-top-10">
<i class="fa fa-user"></i>
<input type="text" class="form-control" placeholder=".input-small">
</div>
<div class="input-group input-small margin-top-10">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input type="email" class="form-control" placeholder=".input-small">
</div>
<div class="input-group input-small margin-top-10">
<input type="email" class="form-control" placeholder=".input-small">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
</div>
</div>
<div class="form-group">
<label>Extra Small Input
</label>
<input type="text" class="form-control input-xsmall" placeholder=".input-xsmall">
</div>
<div class="form-group">
<label>Extra Large Select
</label>
<select class="form-control input-xlarge">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
<div class="form-group">
<label>Large Select
</label>
<select class="form-control input-large">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
<div class="form-group">
<label>Medium Select
</label>
<select class="form-control input-medium">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
<div class="form-group">
<label>Small Select
</label>
<select class="form-control input-small">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
<div class="form-group">
<label>Extra Small Select
</label>
<select class="form-control input-xsmall">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
</div>
<div class="form-actions right">
<button type="button" class="btn default">Cancel
</button>
<button type="submit" class="btn green">Submit
</button>
</div>
</form>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
</div>
<div class="col-md-6 ">
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box green ">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> Horizontal Form
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form class="form-horizontal" role="form">
<div class="form-body">
<div class="form-group">
<label class="col-md-3 control-label">Block Help
</label>
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Enter text">
<span class="help-block">
A block of help text.
</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Inline Help
</label>
<div class="col-md-9">
<input type="text" class="form-control input-inline input-medium" placeholder="Enter text">
<span class="help-inline">
Inline help.
</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Input Group
</label>
<div class="col-md-9">
<div class="input-inline input-medium">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
<input type="email" class="form-control" placeholder="Email Address">
</div>
</div>
<span class="help-inline">
Inline help.
</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Email Address
</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input type="email" class="form-control" placeholder="Email Address">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Password
</label>
<div class="col-md-9">
<div class="input-group">
<input type="password" class="form-control" placeholder="Password">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Left Icon
</label>
<div class="col-md-9">
<div class="input-icon">
<i class="fa fa-bell-o"></i>
<input type="text" class="form-control" placeholder="Left icon">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Right Icon
</label>
<div class="col-md-9">
<div class="input-icon right">
<i class="fa fa-microphone"></i>
<input type="text" class="form-control" placeholder="Right icon">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Icon Input in Group Input
</label>
<div class="col-md-9">
<div class="input-group">
<div class="input-icon">
<i class="fa fa-lock fa-fw"></i>
<input id="newpassword" class="form-control" type="text" name="password" placeholder="password"/>
</div>
<span class="input-group-btn">
<button id="genpassword" class="btn btn-success" type="button"><i class="fa fa-arrow-left fa-fw"/></i> Random
</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Input With Spinner
</label>
<div class="col-md-9">
<input type="password" class="form-control spinner" placeholder="Password">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Static Control
</label>
<div class="col-md-9">
<p class="form-control-static">
email@example.com
</p>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Disabled
</label>
<div class="col-md-9">
<input type="password" class="form-control" placeholder="Disabled" disabled>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Readonly
</label>
<div class="col-md-9">
<input type="password" class="form-control" placeholder="Readonly" readonly>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Dropdown
</label>
<div class="col-md-9">
<select class="form-control">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Multiple Select
</label>
<div class="col-md-9">
<select multiple class="form-control">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Textarea
</label>
<div class="col-md-9">
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
<div class="form-group">
<label for="exampleInputFile" class="col-md-3 control-label">File input
</label>
<div class="col-md-9">
<input type="file" id="exampleInputFile">
<p class="help-block">
some help text here.
</p>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Checkboxes
</label>
<div class="col-md-9">
<div class="checkbox-list">
<label>
<input type="checkbox"> Checkbox 1
</label>
<label>
<input type="checkbox"> Checkbox 1
</label>
<label>
<input type="checkbox" disabled> Disabled
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Inline Checkboxes
</label>
<div class="col-md-9">
<div class="checkbox-list">
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox21" value="option1"> Checkbox 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox22" value="option2"> Checkbox 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox23" value="option3" disabled> Disabled
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Radio
</label>
<div class="col-md-9">
<div class="radio-list">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios22" value="option1" checked> Option 1
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios23" value="option2" checked> Option 2
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios24" value="option2" disabled> Disabled
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Inline Radio
</label>
<div class="col-md-9">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios25" value="option1" checked> Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios26" value="option2" checked> Option 2
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios27" value="option3" disabled> Disabled
</label>
</div>
</div>
</div>
</div>
<div class="form-actions fluid">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn green">Submit
</button>
<button type="button" class="btn default">Cancel
</button>
</div>
</div>
</form>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box purple ">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> Horizontal Form Height Sizing
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form class="form-horizontal" role="form">
<div class="form-body">
<div class="form-group">
<label class="col-md-3 control-label">Large Input
</label>
<div class="col-md-9">
<input type="text" class="form-control input-lg" placeholder="Large Input">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Default Input
</label>
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Default Input">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Small Input
</label>
<div class="col-md-9">
<input type="text" class="form-control input-sm" placeholder="Default Input">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Large Select
</label>
<div class="col-md-9">
<select class="form-control input-lg">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Default Select
</label>
<div class="col-md-9">
<select class="form-control">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Small Select
</label>
<div class="col-md-9">
<select class="form-control input-sm">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
</div>
</div>
<div class="form-actions right1">
<button type="button" class="btn default">Cancel
</button>
<button type="submit" class="btn green">Submit
</button>
</div>
</form>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box purple ">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> Fluid Input Groups
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<h4 class="block">Checkboxe Addons
</h4>
<form role="form">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
<!-- /input-group -->
</div>
<!-- /.col-md-6 -->
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">
<input type="checkbox">
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</form>
<h4 class="block">Button Addons
</h4>
<form role="form">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn red" type="button">Go!
</button>
</span>
<input type="text" class="form-control">
</div>
<!-- /input-group -->
</div>
<!-- /.col-md-6 -->
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn blue" type="button">Go!
</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</form>
<h4 class="block">Button Addons On Both Sides
</h4>
<form role="form">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-btn">
<button class="btn red" type="button">Go!
</button>
</span>
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn blue" type="button">Go!
</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-md-6 -->
</div>
</form>
<h4 class="block">Buttons With Dropdowns
</h4>
<form role="form">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">Action
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control">
</div>
<!-- /input-group -->
</div>
<!-- /.col-md-6 -->
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">Action
</button>
<ul class="dropdown-menu pull-right">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</form>
<h4 class="block">Buttons With Dropdowns On Both Sides
</h4>
<form role="form">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">Action
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">Action
</button>
<ul class="dropdown-menu pull-right">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</form>
<h4 class="block">Segmented Buttons
</h4>
<form role="form">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn default" tabindex="-1">Action
</button>
<button type="button" class="btn default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<input type="text" class="form-control">
</div>
<!-- /.input-group -->
</div>
<!-- /.col-md-6 -->
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn green" tabindex="-1">Action
</button>
<button type="button" class="btn green dropdown-toggle" data-toggle="dropdown" tabindex="-1">
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
</div>
<!-- /.input-group -->
</div>
<!-- /.col-md-6 -->
</div>
</form>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box purple ">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> Fixed Input Groups
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<h4 class="block">Checkboxe Addons
</h4>
<form role="form">
<div class="row">
<div class="col-md-6">
<div class="input-group input-medium">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control" placeholder=".input-medium">
</div>
<!-- /input-group -->
</div>
<!-- /.col-md-6 -->
<div class="col-md-6">
<div class="input-group input-medium">
<input type="text" class="form-control" placeholder=".input-medium">
<span class="input-group-addon">
<input type="checkbox">
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</form>
<h4 class="block">Button Addons
</h4>
<form role="form">
<div class="row">
<div class="col-md-6">
<div class="input-group input-medium">
<span class="input-group-btn">
<button class="btn red" type="button">Go!
</button>
</span>
<input type="text" class="form-control" placeholder=".input-medium">
</div>
<!-- /input-group -->
</div>
<!-- /.col-md-6 -->
<div class="col-md-6">
<div class="input-group input-medium">
<input type="text" class="form-control" placeholder=".input-medium">
<span class="input-group-btn">
<button class="btn blue" type="button">Go!
</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</form>
<h4 class="block">Button Addons On Both Sides
</h4>
<form role="form">
<div class="row">
<div class="col-md-12">
<div class="input-group input-large">
<span class="input-group-btn">
<button class="btn red" type="button">Go!
</button>
</span>
<input type="text" class="form-control" placeholder=".input-large">
<span class="input-group-btn">
<button class="btn blue" type="button">Go!
</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-md-6 -->
</div>
</form>
<h4 class="block">Buttons With Dropdowns
</h4>
<form role="form">
<div class="row">
<div class="col-md-6">
<div class="input-group input-medium">
<div class="input-group-btn">
<button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">Action
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control" placeholder=".input-medium">
</div>
<!-- /input-group -->
</div>
<!-- /.col-md-6 -->
<div class="col-md-6">
<div class="input-group input-medium">
<input type="text" class="form-control" placeholder=".input-medium">
<div class="input-group-btn">
<button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">Action
</button>
<ul class="dropdown-menu pull-right">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</form>
<h4 class="block">Buttons With Dropdowns On Both Sides
</h4>
<form role="form">
<div class="row">
<div class="col-md-12">
<div class="input-group input-xlarge">
<div class="input-group-btn">
<button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">Action
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control" placeholder=".input-xlarge">
<div class="input-group-btn">
<button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">Action
</button>
<ul class="dropdown-menu pull-right">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</form>
<h4 class="block">Segmented Buttons
</h4>
<form role="form">
<div class="row">
<div class="col-md-12">
<div class="input-group input-large">
<div class="input-group-btn">
<button type="button" class="btn default" tabindex="-1">Action
</button>
<button type="button" class="btn default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<input type="text" class="form-control" placeholder=".input-large">
</div>
<!-- /.input-group -->
</div>
<!-- /.col-md-6 -->
</div>
</form>
<form role="form" class="margin-top-10">
<div class="row">
<div class="col-md-12">
<div class="input-group input-large">
<input type="text" class="form-control" placeholder=".input-large">
<div class="input-group-btn">
<button type="button" class="btn green" tabindex="-1">Action
</button>
<button type="button" class="btn green dropdown-toggle" data-toggle="dropdown" tabindex="-1">
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
</div>
<!-- /.input-group -->
</div>
<!-- /.col-md-6 -->
</div>
</form>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
<div class="portlet box blue ">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> Validation States
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form role="form">
<div class="form-body">
<div class="form-group has-success">
<label class="control-label">Input with success
</label>
<input type="text" class="form-control" id="inputSuccess">
</div>
<div class="form-group has-warning">
<label class="control-label">Input with warning
</label>
<input type="text" class="form-control" id="inputWarning">
</div>
<div class="form-group has-error">
<label class="control-label">Input with error
</label>
<input type="text" class="form-control" id="inputError">
</div>
</div>
<div class="form-actions">
<button type="button" class="btn default">Cancel
</button>
<button type="submit" class="btn red">Submit
</button>
</div>
</form>
</div>
</div>
<div class="portlet box yellow ">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> Validation States With Icons
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form role="form">
<div class="form-body">
<div class="form-group">
<label class="control-label">Default input
</label>
<div class="input-icon right">
<i class="fa fa-info-circle tooltips" data-original-title="Email address" data-container="body"></i>
<input type="text" class="form-control">
</div>
</div>
<div class="form-group has-success">
<label class="control-label">Input with success
</label>
<div class="input-icon right">
<i class="fa fa-check tooltips" data-original-title="You look OK!" data-container="body"></i>
<input type="text" class="form-control">
</div>
</div>
<div class="form-group has-warning">
<label class="control-label">Input with warning
</label>
<div class="input-icon right">
<i class="fa fa-warning tooltips" data-original-title="please provide an email" data-container="body"></i>
<input type="text" class="form-control">
</div>
</div>
<div class="form-group has-error">
<label class="control-label">Input with error
</label>
<div class="input-icon right">
<i class="fa fa-exclamation tooltips" data-original-title="please write a valid email" data-container="body"></i>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="form-actions right">
<button type="button" class="btn default">Cancel
</button>
<button type="submit" class="btn green">Submit
</button>
</div>
</form>
</div>
</div>
<div class="portlet box purple">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> Horizontal Form Validation States
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form role="form" class="form-horizontal">
<div class="form-body">
<div class="form-group">
<label class="col-md-4 control-label">Default input
</label>
<div class="col-md-8">
<div class="input-icon right">
<i class="fa fa-info-circle tooltips" data-original-title="Email address" data-container="body"></i>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="form-group has-success">
<label class="col-md-4 control-label">Input with success
</label>
<div class="col-md-8">
<div class="input-icon right">
<i class="fa fa-check tooltips" data-original-title="You look OK!" data-container="body"></i>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="form-group has-warning">
<label class="col-md-4 control-label">Input with warning
</label>
<div class="col-md-8">
<div class="input-icon right">
<i class="fa fa-warning tooltips" data-original-title="please provide an email" data-container="body"></i>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="form-group has-error">
<label class="col-md-4 control-label">Input with error
</label>
<div class="col-md-8">
<div class="input-icon right">
<i class="fa fa-exclamation tooltips" data-original-title="please write a valid email" data-container="body"></i>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div class="form-actions fluid">
<div class="col-md-offset-4 col-md-8">
<button type="button" class="btn default">Cancel
</button>
<button type="submit" class="btn blue">Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-12">
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box yellow">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> More Form Samples
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<h4>Inline Form
</h4>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address
</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password
</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in
</button>
</form>
<hr>
<h4>Inline Form With Icons
</h4>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail22">Email address
</label>
<div class="input-icon">
<i class="fa fa-envelope"></i>
<input type="email" class="form-control" id="exampleInputEmail22" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword42">Password
</label>
<div class="input-icon">
<i class="fa fa-user"></i>
<input type="password" class="form-control" id="exampleInputPassword42" placeholder="Password">
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in
</button>
</form>
<hr>
<h4>Horizontal Form
</h4>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-md-2 control-label">Email
</label>
<div class="col-md-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword12" class="col-md-2 control-label">Password
</label>
<div class="col-md-4">
<input type="password" class="form-control" id="inputPassword12" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-4">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn blue">Sign in
</button>
</div>
</div>
</form>
<hr>
<h4>Horizontal Form With Icons
</h4>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail12" class="col-md-2 control-label">Email
</label>
<div class="col-md-4">
<div class="input-icon">
<i class="fa fa-envelope"></i>
<input type="email" class="form-control" id="inputEmail12" placeholder="Email">
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-md-2 control-label">Password
</label>
<div class="col-md-4">
<div class="input-icon right">
<i class="fa fa-user"></i>
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
<div class="help-block">
with right aligned icon
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-4">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn green">Sign in
</button>
</div>
</div>
</form>
<hr>
<h4>Column Sizing
</h4>
<form role="form">
<div class="row">
<div class="col-md-2">
<input type="text" class="form-control" placeholder=".col-md-2">
</div>
<div class="col-md-3">
<input type="text" class="form-control" placeholder=".col-md-3">
</div>
<div class="col-md-4">
<input type="text" class="form-control" placeholder=".col-md-4">
</div>
<div class="col-md-3">
<input type="text" class="form-control" placeholder=".col-md-2">
</div>
</div>
</form>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
</div>
</div>
</div>
</div>
<!-- END CONTENT -->
</div>
<!-- END SIDEBAR & CONTENT -->
</div>
</div>
<!-- BEGIN PRE-FOOTER -->
<div class="pre-footer">
<div class="container">
<div class="row">
<!-- BEGIN BOTTOM ABOUT BLOCK -->
<div class="col-md-4 col-sm-6 pre-footer-col">
<h2>About us
</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam sit nonummy nibh euismod tincidunt ut laoreet dolore magna aliquarm erat sit volutpat.
</p>
<div class="photo-stream">
<h2>Photos Stream
</h2>
<ul class="list-unstyled">
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img5-small.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img1.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img4-large.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img6.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img3.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img2-large.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img2.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img5.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img5-small.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img1.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img4-large.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img6.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img3.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img2-large.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img2.jpg"></a></li>
</ul>
</div>
</div>
<!-- END BOTTOM ABOUT BLOCK -->
<!-- BEGIN BOTTOM CONTACTS -->
<div class="col-md-4 col-sm-6 pre-footer-col">
<h2>Our Contacts
</h2>
<address class="margin-bottom-40">
35, Lorem Lis Street, Park Ave
<br>
California, US
<br>
Phone: 300 323 3456
<br>
Fax: 300 323 1456
<br>
Email:
<a href="mailto:info@metronic.com">info@metronic.com
</a><br>
Skype:
<a href="skype:metronic">metronic
</a>
</address>
<div class="pre-footer-subscribe-box pre-footer-subscribe-box-vertical">
<h2>Newsletter
</h2>
<p>Subscribe to our newsletter and stay up to date with the latest news and deals!
</p>
<form action="#">
<div class="input-group">
<input type="text" placeholder="youremail@mail.com" class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Subscribe
</button>
</span>
</div>
</form>
</div>
</div>
<!-- END BOTTOM CONTACTS -->
<!-- BEGIN TWITTER BLOCK -->
<div class="col-md-4 col-sm-6 pre-footer-col">
<h2 class="margin-bottom-0">Latest Tweets
</h2>
<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-tweet-limit="2" data-theme="dark" data-link-color="#57C8EB" data-widget-id="455411516829736961" data-chrome="noheader nofooter noscrollbar noborders transparent">Loading tweets by @keenthemes...
</a>
</div>
<!-- END TWITTER BLOCK -->
</div>
</div>
</div>
<!-- END PRE-FOOTER -->
<!-- BEGIN FOOTER -->
<div class="footer">
<div class="container">
<div class="row">
<!-- BEGIN COPYRIGHT -->
<div class="col-md-6 col-sm-6 padding-top-10">
2014 © Metronic Shop UI. ALL Rights Reserved.
<a href="#">Privacy Policy
</a> |
<a href="#">Terms of Service
</a>
</div>
<!-- END COPYRIGHT -->
<!-- BEGIN PAYMENTS -->
<div class="col-md-6 col-sm-6">
<ul class="social-footer list-unstyled list-inline pull-right">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-skype"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-dropbox"></i></a></li>
</ul>
</div>
<!-- END PAYMENTS -->
</div>
</div>
</div>
<!-- END FOOTER -->
<!-- Load javascripts at bottom, this will reduce page load time -->
<!-- BEGIN CORE PLUGINS (REQUIRED FOR ALL PAGES) -->
<!--[if lt IE 9]>
<script src="../../assets/global/plugins/respond.min.js"></script>
<![endif]-->
<script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../assets/frontend/layout/scripts/back-to-top.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL JAVASCRIPTS (REQUIRED ONLY FOR CURRENT PAGE) -->
<script src="../../assets/global/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script><!-- pop up -->
<script src="../../assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript" ></script>
<script src="../../assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="../../assets/frontend/layout/scripts/layout.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
Metronic.init(); // init global framework features
Layout.init();
Layout.initUniform();
Layout.initTwitter();
});
</script>
<!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>