Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1 espaco 1 
<!DOCTYPE html>
2 
<!--
3 
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.2.0
4 
Version: 3.4
5 
Author: KeenThemes
6 
Website: http://www.keenthemes.com/
7 
Contact: support@keenthemes.com
8 
Follow: www.twitter.com/keenthemes
9 
Like: www.facebook.com/keenthemes
10 
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
11 
License: You must have a valid license purchased only from themeforest (the above link) in order to legally use the theme for your project.
12 
-->
13 
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
14 
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
15 
<!--[if !IE]><!-->
16 
<html lang="en">
17 
<!--<![endif]-->
18 
 
19 
<!-- Head BEGIN -->
20 
<head>
21 
  <meta charset="utf-8">
22 
  <title>Forms | Metronic Frontend</title>
23 
 
24 
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
25 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
26 
 
27 
  <meta content="Metronic Shop UI description" name="description">
28 
  <meta content="Metronic Shop UI keywords" name="keywords">
29 
  <meta content="keenthemes" name="author">
30 
 
31 
  <meta property="og:site_name" content="-CUSTOMER VALUE-">
32 
  <meta property="og:title" content="-CUSTOMER VALUE-">
33 
  <meta property="og:description" content="-CUSTOMER VALUE-">
34 
  <meta property="og:type" content="website">
35 
  <meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
36 
  <meta property="og:url" content="-CUSTOMER VALUE-">
37 
 
38 
  <link rel="shortcut icon" href="favicon.ico">
39 
 
40 
  <!-- Fonts START -->
41 
  <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&amp;subset=all" rel="stylesheet" type="text/css">
42 
  <!-- Fonts END -->
43 
 
44 
  <!-- Global styles START -->          
45 
  <link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
46 
  <link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
47 
  <!-- Global styles END -->
48 
 
49 
  <!-- Page level plugin styles START -->
50 
  <link href="../../assets/global/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
51 
  <link href="../../assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
52 
  <!-- Page level plugin styles END -->
53 
 
54 
  <!-- Theme styles START -->
55 
  <link href="../../assets/global/css/components.css" rel="stylesheet">
56 
  <link href="../../assets/global/css/plugins.css" rel="stylesheet">
57 
  <link href="../../assets/frontend/layout/css/style.css" rel="stylesheet">
58 
  <link href="../../assets/frontend/layout/css/style-responsive.css" rel="stylesheet">
59 
  <link href="../../assets/frontend/layout/css/themes/red.css" rel="stylesheet" id="style-color">
60 
  <link href="../../assets/frontend/layout/css/custom.css" rel="stylesheet">
61 
  <!-- Theme styles END -->
62 
</head>
63 
<!-- Head END -->
64 
 
65 
<!-- Body BEGIN -->
66 
<body class="corporate">
67 
    <!-- BEGIN STYLE CUSTOMIZER -->
68 
    <div class="color-panel hidden-sm">
69 
      <div class="color-mode-icons icon-color"></div>
70 
      <div class="color-mode-icons icon-color-close"></div>
71 
      <div class="color-mode">
72 
        <p>THEME COLOR</p>
73 
        <ul class="inline">
74 
          <li class="color-red current color-default" data-style="red"></li>
75 
          <li class="color-blue" data-style="blue"></li>
76 
          <li class="color-green" data-style="green"></li>
77 
          <li class="color-orange" data-style="orange"></li>
78 
          <li class="color-gray" data-style="gray"></li>
79 
          <li class="color-turquoise" data-style="turquoise"></li>
80 
        </ul>
81 
      </div>
82 
    </div>
83 
    <!-- END BEGIN STYLE CUSTOMIZER -->
84 
 
85 
    <!-- BEGIN TOP BAR -->
86 
    <div class="pre-header">
87 
        <div class="container">
88 
            <div class="row">
89 
                <!-- BEGIN TOP BAR LEFT PART -->
90 
                <div class="col-md-6 col-sm-6 additional-shop-info">
91 
                    <ul class="list-unstyled list-inline">
92 
                        <li><i class="fa fa-phone"></i><span>+1 456 6717</span></li>
93 
                        <li><i class="fa fa-envelope-o"></i><span>info@keenthemes.com</span></li>
94 
                    </ul>
95 
                </div>
96 
                <!-- END TOP BAR LEFT PART -->
97 
                <!-- BEGIN TOP BAR MENU -->
98 
                <div class="col-md-6 col-sm-6 additional-nav">
99 
                    <ul class="list-unstyled list-inline pull-right">
100 
                        <li><a href="page-login.html">Log In</a></li>
101 
                        <li><a href="page-reg-page.html">Registration</a></li>
102 
                    </ul>
103 
                </div>
104 
                <!-- END TOP BAR MENU -->
105 
            </div>
106 
        </div>        
107 
    </div>
108 
    <!-- END TOP BAR -->
109 
    <!-- BEGIN HEADER -->
110 
    <div class="header">
111 
      <div class="container">
112 
        <a class="site-logo" href="index.html"><img src="../../assets/frontend/layout/img/logos/logo-corp-red.png" alt="Metronic FrontEnd"></a>
113 
 
114 
        <a href="javascript:void(0);" class="mobi-toggler"><i class="fa fa-bars"></i></a>
115 
 
116 
        <!-- BEGIN NAVIGATION -->
117 
        <div class="header-navigation pull-right font-transform-inherit">
118 
          <ul>
119 
            <li class="dropdown">
120 
              <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
121 
                Home
122 
 
123 
              </a>
124 
 
125 
              <ul class="dropdown-menu">
126 
                <li><a href="index.html">Home Default</a></li>
127 
                <li><a href="index-header-fix.html">Home with Header Fixed</a></li>
128 
                <li><a href="index-without-topbar.html">Home without Top Bar</a></li>
129 
              </ul>
130 
            </li>
131 
            <li class="dropdown dropdown-megamenu">
132 
              <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
133 
                Mega Menu
134 
 
135 
              </a>
136 
              <ul class="dropdown-menu">
137 
                <li>
138 
                  <div class="header-navigation-content">
139 
                    <div class="row">
140 
                      <div class="col-md-4 header-navigation-col">
141 
                        <h4>Footwear</h4>
142 
                        <ul>
143 
                          <li><a href="index.html">Astro Trainers</a></li>
144 
                          <li><a href="index.html">Basketball Shoes</a></li>
145 
                          <li><a href="index.html">Boots</a></li>
146 
                          <li><a href="index.html">Canvas Shoes</a></li>
147 
                          <li><a href="index.html">Football Boots</a></li>
148 
                          <li><a href="index.html">Golf Shoes</a></li>
149 
                          <li><a href="index.html">Hi Tops</a></li>
150 
                          <li><a href="index.html">Indoor Trainers</a></li>
151 
                        </ul>
152 
                      </div>
153 
                      <div class="col-md-4 header-navigation-col">
154 
                        <h4>Clothing</h4>
155 
                        <ul>
156 
                          <li><a href="index.html">Base Layer</a></li>
157 
                          <li><a href="index.html">Character</a></li>
158 
                          <li><a href="index.html">Chinos</a></li>
159 
                          <li><a href="index.html">Combats</a></li>
160 
                          <li><a href="index.html">Cricket Clothing</a></li>
161 
                          <li><a href="index.html">Fleeces</a></li>
162 
                          <li><a href="index.html">Gilets</a></li>
163 
                          <li><a href="index.html">Golf Tops</a></li>
164 
                        </ul>
165 
                      </div>
166 
                      <div class="col-md-4 header-navigation-col">
167 
                        <h4>Accessories</h4>
168 
                        <ul>
169 
                          <li><a href="index.html">Belts</a></li>
170 
                          <li><a href="index.html">Caps</a></li>
171 
                          <li><a href="index.html">Gloves</a></li>
172 
                        </ul>
173 
 
174 
                        <h4>Clearance</h4>
175 
                        <ul>
176 
                          <li><a href="index.html">Jackets</a></li>
177 
                          <li><a href="index.html">Bottoms</a></li>
178 
                        </ul>
179 
                      </div>
180 
                    </div>
181 
                  </div>
182 
                </li>
183 
              </ul>
184 
            </li>
185 
            <li class="dropdown">
186 
              <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
187 
                Pages
188 
 
189 
              </a>
190 
 
191 
              <ul class="dropdown-menu">
192 
                <li><a href="page-about.html">About Us</a></li>
193 
                <li><a href="page-services.html">Services</a></li>
194 
                <li><a href="page-prices.html">Prices</a></li>
195 
                <li><a href="page-faq.html">FAQ</a></li>
196 
                <li><a href="page-gallery.html">Gallery</a></li>
197 
                <li><a href="page-search-result.html">Search Result</a></li>
198 
                <li><a href="page-404.html">404</a></li>
199 
                <li><a href="page-500.html">500</a></li>
200 
                <li><a href="page-login.html">Login Page</a></li>
201 
                <li><a href="page-forgotton-password.html">Forget Password</a></li>
202 
                <li><a href="page-reg-page.html">Signup Page</a></li>
203 
                <li><a href="page-careers.html">Careers</a></li>
204 
                <li><a href="page-site-map.html">Site Map</a></li>
205 
                <li><a href="page-contacts.html">Contact</a></li>                
206 
              </ul>
207 
            </li>
208 
            <li class="dropdown active">
209 
              <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
210 
                Features
211 
 
212 
              </a>
213 
 
214 
              <ul class="dropdown-menu">
215 
                <li><a href="feature-typography.html">Typography</a></li>
216 
                <li><a href="feature-buttons.html">Buttons</a></li>
217 
                <li class="active"><a href="feature-forms.html">Forms</a></li>
218 
 
219 
                <li class="dropdown-submenu">
220 
                  <a href="index.html">Multi level <i class="fa fa-angle-right"></i></a>
221 
                  <ul class="dropdown-menu" role="menu">
222 
                    <li><a href="index.html">Second Level Link</a></li>
223 
                    <li><a href="index.html">Second Level Link</a></li>
224 
                    <li class="dropdown-submenu">
225 
                      <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
226 
                        Second Level Link
227 
                        <i class="fa fa-angle-right"></i>
228 
                      </a>
229 
                      <ul class="dropdown-menu">
230 
                        <li><a href="index.html">Third Level Link</a></li>
231 
                        <li><a href="index.html">Third Level Link</a></li>
232 
                        <li><a href="index.html">Third Level Link</a></li>
233 
                      </ul>
234 
                    </li>
235 
                  </ul>
236 
                </li>
237 
              </ul>
238 
            </li>
239 
            <li class="dropdown">
240 
              <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
241 
                Portfolio
242 
 
243 
              </a>
244 
 
245 
              <ul class="dropdown-menu">
246 
                <li><a href="portfolio-4.html">Portfolio 4</a></li>
247 
                <li><a href="portfolio-3.html">Portfolio 3</a></li>
248 
                <li><a href="portfolio-2.html">Portfolio 2</a></li>
249 
                <li><a href="portfolio-item.html">Portfolio Item</a></li>
250 
              </ul>
251 
            </li>
252 
            <li class="dropdown">
253 
              <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
254 
                Blog
255 
 
256 
              </a>
257 
 
258 
              <ul class="dropdown-menu">
259 
                <li><a href="blog.html">Blog Page</a></li>
260 
                <li><a href="blog-item.html">Blog Item</a></li>
261 
              </ul>
262 
            </li>
263 
            <li><a href="shop-index.html" target="_blank">E-Commerce</a></li>
264 
            <li><a href="onepage-index.html" target="_blank">One Page</a></li>
265 
            <li><a href="http://keenthemes.com/preview/metronic/theme/templates/admin" target="_blank">Admin theme</a></li>
266 
 
267 
            <!-- BEGIN TOP SEARCH -->
268 
            <li class="menu-search">
269 
              <span class="sep"></span>
270 
              <i class="fa fa-search search-btn"></i>
271 
              <div class="search-box">
272 
                <form action="#">
273 
                  <div class="input-group">
274 
                    <input type="text" placeholder="Search" class="form-control">
275 
                    <span class="input-group-btn">
276 
                      <button class="btn btn-primary" type="submit">Search</button>
277 
                    </span>
278 
                  </div>
279 
                </form>
280 
              </div>
281 
            </li>
282 
            <!-- END TOP SEARCH -->
283 
          </ul>
284 
        </div>
285 
        <!-- END NAVIGATION -->
286 
      </div>
287 
    </div>
288 
    <!-- Header END -->
289 
 
290 
    <div class="main">
291 
      <div class="container">
292 
        <ul class="breadcrumb">
293 
            <li><a href="index.html">Home</a></li>
294 
            <li><a href="#">Features</a></li>
295 
            <li class="active">Forms</li>
296 
        </ul>
297 
        <!-- BEGIN SIDEBAR & CONTENT -->
298 
        <div class="row margin-bottom-20">
299 
          <!-- BEGIN CONTENT -->
300 
          <div class="col-md-12 col-sm-12">
301 
            <h1>Forms</h1>
302 
            <div class="content-page">
303 
            <div class="content-page">
304 
              <div class="note note-success">
305 
                <h4 class="block">Metronic Admin (Framework) Features</h4>
306 
                <p>
307 
                  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:
308 
                  </p>
309 
                  <p>
310 
                  <code>../../assets/global/css/components.css</code><br>
311 
                  <code>../../assets/global/css/plugins.css</code>
312 
                </p>  
313 
                <p>
314 
                And selected plugin's css and js files accordingly.
315 
                </p>
316 
              </div>
317 
 
318 
      <div class="row">
319 
        <div class="col-md-6 ">
320 
          <!-- BEGIN SAMPLE FORM PORTLET-->
321 
          <div class="portlet box blue">
322 
            <div class="portlet-title">
323 
              <div class="caption">
324 
                <i class="fa fa-gift"></i> Default Form
325 
              </div>
326 
              <div class="tools">
327 
                <a href="" class="collapse">
328 
                </a>
329 
                <a href="#portlet-config" data-toggle="modal" class="config">
330 
                </a>
331 
                <a href="" class="reload">
332 
                </a>
333 
                <a href="" class="remove">
334 
                </a>
335 
              </div>
336 
            </div>
337 
            <div class="portlet-body form">
338 
              <form role="form">
339 
                <div class="form-body">
340 
                  <div class="form-group">
341 
                    <label>Email Address</label>
342 
                    <div class="input-group">
343 
                      <span class="input-group-addon">
344 
                        <i class="fa fa-envelope"></i>
345 
                      </span>
346 
                      <input type="text" class="form-control" placeholder="Email Address">
347 
                    </div>
348 
                  </div>
349 
                  <div class="form-group">
350 
                    <label for="exampleInputPassword1">Password</label>
351 
                    <div class="input-group">
352 
                      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
353 
                      <span class="input-group-addon">
354 
                        <i class="fa fa-user"></i>
355 
                      </span>
356 
                    </div>
357 
                  </div>
358 
                  <div class="form-group">
359 
                    <label>Left Icon</label>
360 
                    <div class="input-icon">
361 
                      <i class="fa fa-bell-o"></i>
362 
                      <input type="text" class="form-control" placeholder="Left icon">
363 
                    </div>
364 
                  </div>
365 
                  <div class="form-group">
366 
                    <label>Right Icon</label>
367 
                    <div class="input-icon right">
368 
                      <i class="fa fa-microphone"></i>
369 
                      <input type="text" class="form-control" placeholder="Right icon">
370 
                    </div>
371 
                  </div>
372 
                  <div class="form-group">
373 
                    <label>Input with Icon</label>
374 
                    <div class="input-group input-icon right">
375 
                      <span class="input-group-addon">
376 
                        <i class="fa fa-envelope"></i>
377 
                      </span>
378 
                      <i class="fa fa-exclamation tooltips" data-original-title="Invalid email." data-container="body"></i>
379 
                      <input id="email" class="input-error form-control" type="text" value="">
380 
                    </div>
381 
                  </div>
382 
                  <div class="form-group">
383 
                    <label>Input With Spinner</label>
384 
                    <input class="form-control spinner" type="text" placeholder="Process something"/>
385 
                  </div>
386 
                  <div class="form-group">
387 
                    <label>Static Control</label>
388 
                    <p class="form-control-static">
389 
                       email@example.com
390 
                    </p>
391 
                  </div>
392 
                  <div class="form-group">
393 
                    <label>Disabled</label>
394 
                    <input type="text" class="form-control" placeholder="Disabled" disabled>
395 
                  </div>
396 
                  <div class="form-group">
397 
                    <label>Readonly</label>
398 
                    <input type="text" class="form-control" placeholder="Readonly" readonly>
399 
                  </div>
400 
                  <div class="form-group">
401 
                    <label>Dropdown</label>
402 
                    <select class="form-control">
403 
                      <option>Option 1</option>
404 
                      <option>Option 2</option>
405 
                      <option>Option 3</option>
406 
                      <option>Option 4</option>
407 
                      <option>Option 5</option>
408 
                    </select>
409 
                  </div>
410 
                  <div class="form-group">
411 
                    <label>Multiple Select</label>
412 
                    <select multiple class="form-control">
413 
                      <option>Option 1</option>
414 
                      <option>Option 2</option>
415 
                      <option>Option 3</option>
416 
                      <option>Option 4</option>
417 
                      <option>Option 5</option>
418 
                    </select>
419 
                  </div>
420 
                  <div class="form-group">
421 
                    <label>Textarea</label>
422 
                    <textarea class="form-control" rows="3"></textarea>
423 
                  </div>
424 
                  <div class="form-group">
425 
                    <label for="exampleInputFile1">File input</label>
426 
                    <input type="file" id="exampleInputFile1">
427 
                    <p class="help-block">
428 
                       some help text here.
429 
                    </p>
430 
                  </div>
431 
                  <div class="form-group">
432 
                    <label>Checkboxes</label>
433 
                    <div class="checkbox-list">
434 
                      <label>
435 
                      <input type="checkbox"> Checkbox 1 </label>
436 
                      <label>
437 
                      <input type="checkbox"> Checkbox 2 </label>
438 
                      <label>
439 
                      <input type="checkbox" disabled> Disabled </label>
440 
                    </div>
441 
                  </div>
442 
                  <div class="form-group">
443 
                    <label>Inline Checkboxes</label>
444 
                    <div class="checkbox-list">
445 
                      <label class="checkbox-inline">
446 
                      <input type="checkbox" id="inlineCheckbox1" value="option1"> Checkbox 1 </label>
447 
                      <label class="checkbox-inline">
448 
                      <input type="checkbox" id="inlineCheckbox2" value="option2"> Checkbox 2 </label>
449 
                      <label class="checkbox-inline">
450 
                      <input type="checkbox" id="inlineCheckbox3" value="option3" disabled> Disabled </label>
451 
                    </div>
452 
                  </div>
453 
                  <div class="form-group">
454 
                    <label>Radio</label>
455 
                    <div class="radio-list">
456 
                      <label>
457 
                      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option 1</label>
458 
                      <label>
459 
                      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option 2 </label>
460 
                      <label>
461 
                      <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Disabled </label>
462 
                    </div>
463 
                  </div>
464 
                  <div class="form-group">
465 
                    <label>Inline Radio</label>
466 
                    <div class="radio-list">
467 
                      <label class="radio-inline">
468 
                      <input type="radio" name="optionsRadios" id="optionsRadios4" value="option1" checked> Option 1 </label>
469 
                      <label class="radio-inline">
470 
                      <input type="radio" name="optionsRadios" id="optionsRadios5" value="option2"> Option 2 </label>
471 
                      <label class="radio-inline">
472 
                      <input type="radio" name="optionsRadios" id="optionsRadios6" value="option3" disabled> Disabled </label>
473 
                    </div>
474 
                  </div>
475 
                </div>
476 
                <div class="form-actions">
477 
                  <button type="submit" class="btn blue">Submit</button>
478 
                  <button type="button" class="btn default">Cancel</button>
479 
                </div>
480 
              </form>
481 
            </div>
482 
          </div>
483 
          <!-- END SAMPLE FORM PORTLET-->
484 
          <!-- BEGIN SAMPLE FORM PORTLET-->
485 
          <div class="portlet box red">
486 
            <div class="portlet-title">
487 
              <div class="caption">
488 
                <i class="fa fa-gift"></i> Default Form Height Sizing
489 
              </div>
490 
              <div class="tools">
491 
                <a href="" class="collapse">
492 
                </a>
493 
                <a href="#portlet-config" data-toggle="modal" class="config">
494 
                </a>
495 
                <a href="" class="reload">
496 
                </a>
497 
                <a href="" class="remove">
498 
                </a>
499 
              </div>
500 
            </div>
501 
            <div class="portlet-body form">
502 
              <form role="form">
503 
                <div class="form-body">
504 
                  <div class="form-group">
505 
                    <label>Large Input</label>
506 
                    <input type="text" class="form-control input-lg" placeholder="input-lg">
507 
                  </div>
508 
                  <div class="form-group">
509 
                    <label>Default Input</label>
510 
                    <input type="text" class="form-control" placeholder="">
511 
                  </div>
512 
                  <div class="form-group">
513 
                    <label>Small Input</label>
514 
                    <input type="text" class="form-control input-sm" placeholder="input-sm">
515 
                  </div>
516 
                  <div class="form-group">
517 
                    <label>Large Select</label>
518 
                    <select class="form-control input-lg">
519 
                      <option>Option 1</option>
520 
                      <option>Option 2</option>
521 
                      <option>Option 3</option>
522 
                      <option>Option 4</option>
523 
                      <option>Option 5</option>
524 
                    </select>
525 
                  </div>
526 
                  <div class="form-group">
527 
                    <label>Default Select</label>
528 
                    <select class="form-control">
529 
                      <option>Option 1</option>
530 
                      <option>Option 2</option>
531 
                      <option>Option 3</option>
532 
                      <option>Option 4</option>
533 
                      <option>Option 5</option>
534 
                    </select>
535 
                  </div>
536 
                  <div class="form-group">
537 
                    <label>Small Select</label>
538 
                    <select class="form-control input-sm">
539 
                      <option>Option 1</option>
540 
                      <option>Option 2</option>
541 
                      <option>Option 3</option>
542 
                      <option>Option 4</option>
543 
                      <option>Option 5</option>
544 
                    </select>
545 
                  </div>
546 
                </div>
547 
                <div class="form-actions right">
548 
                  <button type="button" class="btn default">Cancel</button>
549 
                  <button type="submit" class="btn green">Submit</button>
550 
                </div>
551 
              </form>
552 
            </div>
553 
          </div>
554 
          <!-- END SAMPLE FORM PORTLET-->
555 
          <!-- BEGIN SAMPLE FORM PORTLET-->
556 
          <div class="portlet box blue">
557 
            <div class="portlet-title">
558 
              <div class="caption">
559 
                <i class="fa fa-gift"></i> Form Input Width Sizing
560 
              </div>
561 
              <div class="tools">
562 
                <a href="" class="collapse">
563 
                </a>
564 
                <a href="#portlet-config" data-toggle="modal" class="config">
565 
                </a>
566 
                <a href="" class="reload">
567 
                </a>
568 
                <a href="" class="remove">
569 
                </a>
570 
              </div>
571 
            </div>
572 
            <div class="portlet-body form">
573 
              <form role="form">
574 
                <div class="form-body">
575 
                  <div class="form-group">
576 
                    <label>Fluid Input</label>
577 
                    <input type="text" class="form-control" placeholder="fluid">
578 
                    <div class="input-icon right margin-top-10">
579 
                      <i class="fa fa-check"></i>
580 
                      <input type="text" class="form-control" placeholder="fluid">
581 
                    </div>
582 
                    <div class="input-icon margin-top-10">
583 
                      <i class="fa fa-user"></i>
584 
                      <input type="text" class="form-control" placeholder="fluid">
585 
                    </div>
586 
                    <div class="input-group margin-top-10">
587 
                      <span class="input-group-addon">
588 
                        <i class="fa fa-envelope"></i>
589 
                      </span>
590 
                      <input type="email" class="form-control" placeholder=".input-xlarge">
591 
                    </div>
592 
                    <div class="input-group margin-top-10">
593 
                      <input type="email" class="form-control" placeholder=".input-xlarge">
594 
                      <span class="input-group-addon">
595 
                        <i class="fa fa-envelope"></i>
596 
                      </span>
597 
                    </div>
598 
                    <hr>
599 
                  </div>
600 
                  <div class="form-group">
601 
                    <label>Extra Large Input</label>
602 
                    <input type="text" class="form-control input-xlarge" placeholder=".input-xlarge">
603 
                    <div class="input-icon right input-xlarge margin-top-10">
604 
                      <i class="fa fa-check"></i>
605 
                      <input type="text" class="form-control" placeholder=".input-xlarge">
606 
                    </div>
607 
                    <div class="input-icon input-xlarge margin-top-10">
608 
                      <i class="fa fa-user"></i>
609 
                      <input type="text" class="form-control" placeholder=".input-xlarge">
610 
                    </div>
611 
                    <div class="input-group input-xlarge margin-top-10">
612 
                      <span class="input-group-addon">
613 
                        <i class="fa fa-envelope"></i>
614 
                      </span>
615 
                      <input type="email" class="form-control" placeholder=".input-xlarge">
616 
                    </div>
617 
                    <div class="input-group input-xlarge margin-top-10">
618 
                      <input type="email" class="form-control" placeholder=".input-xlarge">
619 
                      <span class="input-group-addon">
620 
                        <i class="fa fa-envelope"></i>
621 
                      </span>
622 
                    </div>
623 
                    <hr>
624 
                  </div>
625 
                  <div class="form-group">
626 
                    <label>Large Input</label>
627 
                    <input type="text" class="form-control input-large" placeholder=".input-large">
628 
                    <div class="input-icon right input-large margin-top-10">
629 
                      <i class="fa fa-check"></i>
630 
                      <input type="text" class="form-control" placeholder=".input-large">
631 
                    </div>
632 
                    <div class="input-icon input-large margin-top-10">
633 
                      <i class="fa fa-user"></i>
634 
                      <input type="text" class="form-control" placeholder=".input-large">
635 
                    </div>
636 
                    <div class="input-group input-large margin-top-10">
637 
                      <span class="input-group-addon">
638 
                        <i class="fa fa-envelope"></i>
639 
                      </span>
640 
                      <input type="email" class="form-control" placeholder=".input-large">
641 
                    </div>
642 
                    <div class="input-group input-large margin-top-10">
643 
                      <input type="email" class="form-control" placeholder=".input-large">
644 
                      <span class="input-group-addon">
645 
                        <i class="fa fa-envelope"></i>
646 
                      </span>
647 
                    </div>
648 
                    <hr>
649 
                  </div>
650 
                  <div class="form-group">
651 
                    <label>Medium Input</label>
652 
                    <input type="text" class="form-control input-medium" placeholder=".input-medium">
653 
                    <div class="input-icon right input-medium margin-top-10">
654 
                      <i class="fa fa-check"></i>
655 
                      <input type="text" class="form-control" placeholder=".input-medium">
656 
                    </div>
657 
                    <div class="input-icon input-medium margin-top-10">
658 
                      <i class="fa fa-user"></i>
659 
                      <input type="text" class="form-control" placeholder=".input-medium">
660 
                    </div>
661 
                    <div class="input-group input-medium margin-top-10">
662 
                      <span class="input-group-addon">
663 
                        <i class="fa fa-envelope"></i>
664 
                      </span>
665 
                      <input type="email" class="form-control" placeholder=".input-medium">
666 
                    </div>
667 
                    <div class="input-group input-medium margin-top-10">
668 
                      <input type="email" class="form-control" placeholder=".input-medium">
669 
                      <span class="input-group-addon">
670 
                        <i class="fa fa-envelope"></i>
671 
                      </span>
672 
                    </div>
673 
                    <hr>
674 
                  </div>
675 
                  <div class="form-group">
676 
                    <label>Small Input</label>
677 
                    <input type="text" class="form-control input-small" placeholder=".input-small">
678 
                    <div class="input-icon right input-small margin-top-10">
679 
                      <i class="fa fa-check"></i>
680 
                      <input type="text" class="form-control" placeholder=".input-small">
681 
                    </div>
682 
                    <div class="input-icon input-small margin-top-10">
683 
                      <i class="fa fa-user"></i>
684 
                      <input type="text" class="form-control" placeholder=".input-small">
685 
                    </div>
686 
                    <div class="input-group input-small margin-top-10">
687 
                      <span class="input-group-addon">
688 
                        <i class="fa fa-envelope"></i>
689 
                      </span>
690 
                      <input type="email" class="form-control" placeholder=".input-small">
691 
                    </div>
692 
                    <div class="input-group input-small margin-top-10">
693 
                      <input type="email" class="form-control" placeholder=".input-small">
694 
                      <span class="input-group-addon">
695 
                        <i class="fa fa-envelope"></i>
696 
                      </span>
697 
                    </div>
698 
                  </div>
699 
                  <div class="form-group">
700 
                    <label>Extra Small Input</label>
701 
                    <input type="text" class="form-control input-xsmall" placeholder=".input-xsmall">
702 
                  </div>
703 
                  <div class="form-group">
704 
                    <label>Extra Large Select</label>
705 
                    <select class="form-control input-xlarge">
706 
                      <option>Option 1</option>
707 
                      <option>Option 2</option>
708 
                      <option>Option 3</option>
709 
                      <option>Option 4</option>
710 
                      <option>Option 5</option>
711 
                    </select>
712 
                  </div>
713 
                  <div class="form-group">
714 
                    <label>Large Select</label>
715 
                    <select class="form-control input-large">
716 
                      <option>Option 1</option>
717 
                      <option>Option 2</option>
718 
                      <option>Option 3</option>
719 
                      <option>Option 4</option>
720 
                      <option>Option 5</option>
721 
                    </select>
722 
                  </div>
723 
                  <div class="form-group">
724 
                    <label>Medium Select</label>
725 
                    <select class="form-control input-medium">
726 
                      <option>Option 1</option>
727 
                      <option>Option 2</option>
728 
                      <option>Option 3</option>
729 
                      <option>Option 4</option>
730 
                      <option>Option 5</option>
731 
                    </select>
732 
                  </div>
733 
                  <div class="form-group">
734 
                    <label>Small Select</label>
735 
                    <select class="form-control input-small">
736 
                      <option>Option 1</option>
737 
                      <option>Option 2</option>
738 
                      <option>Option 3</option>
739 
                      <option>Option 4</option>
740 
                      <option>Option 5</option>
741 
                    </select>
742 
                  </div>
743 
                  <div class="form-group">
744 
                    <label>Extra Small Select</label>
745 
                    <select class="form-control input-xsmall">
746 
                      <option>Option 1</option>
747 
                      <option>Option 2</option>
748 
                      <option>Option 3</option>
749 
                      <option>Option 4</option>
750 
                      <option>Option 5</option>
751 
                    </select>
752 
                  </div>
753 
                </div>
754 
                <div class="form-actions right">
755 
                  <button type="button" class="btn default">Cancel</button>
756 
                  <button type="submit" class="btn green">Submit</button>
757 
                </div>
758 
              </form>
759 
            </div>
760 
          </div>
761 
          <!-- END SAMPLE FORM PORTLET-->
762 
        </div>
763 
        <div class="col-md-6 ">
764 
          <!-- BEGIN SAMPLE FORM PORTLET-->
765 
          <div class="portlet box green ">
766 
            <div class="portlet-title">
767 
              <div class="caption">
768 
                <i class="fa fa-gift"></i> Horizontal Form
769 
              </div>
770 
              <div class="tools">
771 
                <a href="" class="collapse">
772 
                </a>
773 
                <a href="#portlet-config" data-toggle="modal" class="config">
774 
                </a>
775 
                <a href="" class="reload">
776 
                </a>
777 
                <a href="" class="remove">
778 
                </a>
779 
              </div>
780 
            </div>
781 
            <div class="portlet-body form">
782 
              <form class="form-horizontal" role="form">
783 
                <div class="form-body">
784 
                  <div class="form-group">
785 
                    <label class="col-md-3 control-label">Block Help</label>
786 
                    <div class="col-md-9">
787 
                      <input type="text" class="form-control" placeholder="Enter text">
788 
                      <span class="help-block">
789 
                         A block of help text.
790 
                      </span>
791 
                    </div>
792 
                  </div>
793 
                  <div class="form-group">
794 
                    <label class="col-md-3 control-label">Inline Help</label>
795 
                    <div class="col-md-9">
796 
                      <input type="text" class="form-control input-inline input-medium" placeholder="Enter text">
797 
                      <span class="help-inline">
798 
                         Inline help.
799 
                      </span>
800 
                    </div>
801 
                  </div>
802 
                  <div class="form-group">
803 
                    <label class="col-md-3 control-label">Input Group</label>
804 
                    <div class="col-md-9">
805 
                      <div class="input-inline input-medium">
806 
                        <div class="input-group">
807 
                          <span class="input-group-addon">
808 
                            <i class="fa fa-user"></i>
809 
                          </span>
810 
                          <input type="email" class="form-control" placeholder="Email Address">
811 
                        </div>
812 
                      </div>
813 
                      <span class="help-inline">
814 
                         Inline help.
815 
                      </span>
816 
                    </div>
817 
                  </div>
818 
                  <div class="form-group">
819 
                    <label class="col-md-3 control-label">Email Address</label>
820 
                    <div class="col-md-9">
821 
                      <div class="input-group">
822 
                        <span class="input-group-addon">
823 
                          <i class="fa fa-envelope"></i>
824 
                        </span>
825 
                        <input type="email" class="form-control" placeholder="Email Address">
826 
                      </div>
827 
                    </div>
828 
                  </div>
829 
                  <div class="form-group">
830 
                    <label class="col-md-3 control-label">Password</label>
831 
                    <div class="col-md-9">
832 
                      <div class="input-group">
833 
                        <input type="password" class="form-control" placeholder="Password">
834 
                        <span class="input-group-addon">
835 
                          <i class="fa fa-user"></i>
836 
                        </span>
837 
                      </div>
838 
                    </div>
839 
                  </div>
840 
                  <div class="form-group">
841 
                    <label class="col-md-3 control-label">Left Icon</label>
842 
                    <div class="col-md-9">
843 
                      <div class="input-icon">
844 
                        <i class="fa fa-bell-o"></i>
845 
                        <input type="text" class="form-control" placeholder="Left icon">
846 
                      </div>
847 
                    </div>
848 
                  </div>
849 
                  <div class="form-group">
850 
                    <label class="col-md-3 control-label">Right Icon</label>
851 
                    <div class="col-md-9">
852 
                      <div class="input-icon right">
853 
                        <i class="fa fa-microphone"></i>
854 
                        <input type="text" class="form-control" placeholder="Right icon">
855 
                      </div>
856 
                    </div>
857 
                  </div>
858 
                  <div class="form-group">
859 
                    <label class="col-md-3 control-label">Icon Input in Group Input</label>
860 
                    <div class="col-md-9">
861 
                      <div class="input-group">
862 
                        <div class="input-icon">
863 
                          <i class="fa fa-lock fa-fw"></i>
864 
                          <input id="newpassword" class="form-control" type="text" name="password" placeholder="password"/>
865 
                        </div>
866 
                        <span class="input-group-btn">
867 
                          <button id="genpassword" class="btn btn-success" type="button"><i class="fa fa-arrow-left fa-fw"/></i> Random</button>
868 
                        </span>
869 
                      </div>
870 
                    </div>
871 
                  </div>
872 
                  <div class="form-group">
873 
                    <label class="col-md-3 control-label">Input With Spinner</label>
874 
                    <div class="col-md-9">
875 
                      <input type="password" class="form-control spinner" placeholder="Password">
876 
                    </div>
877 
                  </div>
878 
                  <div class="form-group">
879 
                    <label class="col-md-3 control-label">Static Control</label>
880 
                    <div class="col-md-9">
881 
                      <p class="form-control-static">
882 
                         email@example.com
883 
                      </p>
884 
                    </div>
885 
                  </div>
886 
                  <div class="form-group">
887 
                    <label class="col-md-3 control-label">Disabled</label>
888 
                    <div class="col-md-9">
889 
                      <input type="password" class="form-control" placeholder="Disabled" disabled>
890 
                    </div>
891 
                  </div>
892 
                  <div class="form-group">
893 
                    <label class="col-md-3 control-label">Readonly</label>
894 
                    <div class="col-md-9">
895 
                      <input type="password" class="form-control" placeholder="Readonly" readonly>
896 
                    </div>
897 
                  </div>
898 
                  <div class="form-group">
899 
                    <label class="col-md-3 control-label">Dropdown</label>
900 
                    <div class="col-md-9">
901 
                      <select class="form-control">
902 
                        <option>Option 1</option>
903 
                        <option>Option 2</option>
904 
                        <option>Option 3</option>
905 
                        <option>Option 4</option>
906 
                        <option>Option 5</option>
907 
                      </select>
908 
                    </div>
909 
                  </div>
910 
                  <div class="form-group">
911 
                    <label class="col-md-3 control-label">Multiple Select</label>
912 
                    <div class="col-md-9">
913 
                      <select multiple class="form-control">
914 
                        <option>Option 1</option>
915 
                        <option>Option 2</option>
916 
                        <option>Option 3</option>
917 
                        <option>Option 4</option>
918 
                        <option>Option 5</option>
919 
                      </select>
920 
                    </div>
921 
                  </div>
922 
                  <div class="form-group">
923 
                    <label class="col-md-3 control-label">Textarea</label>
924 
                    <div class="col-md-9">
925 
                      <textarea class="form-control" rows="3"></textarea>
926 
                    </div>
927 
                  </div>
928 
                  <div class="form-group">
929 
                    <label for="exampleInputFile" class="col-md-3 control-label">File input</label>
930 
                    <div class="col-md-9">
931 
                      <input type="file" id="exampleInputFile">
932 
                      <p class="help-block">
933 
                         some help text here.
934 
                      </p>
935 
                    </div>
936 
                  </div>
937 
                  <div class="form-group">
938 
                    <label class="col-md-3 control-label">Checkboxes</label>
939 
                    <div class="col-md-9">
940 
                      <div class="checkbox-list">
941 
                        <label>
942 
                        <input type="checkbox"> Checkbox 1 </label>
943 
                        <label>
944 
                        <input type="checkbox"> Checkbox 1 </label>
945 
                        <label>
946 
                        <input type="checkbox" disabled> Disabled </label>
947 
                      </div>
948 
                    </div>
949 
                  </div>
950 
                  <div class="form-group">
951 
                    <label class="col-md-3 control-label">Inline Checkboxes</label>
952 
                    <div class="col-md-9">
953 
                      <div class="checkbox-list">
954 
                        <label class="checkbox-inline">
955 
                        <input type="checkbox" id="inlineCheckbox21" value="option1"> Checkbox 1 </label>
956 
                        <label class="checkbox-inline">
957 
                        <input type="checkbox" id="inlineCheckbox22" value="option2"> Checkbox 2 </label>
958 
                        <label class="checkbox-inline">
959 
                        <input type="checkbox" id="inlineCheckbox23" value="option3" disabled> Disabled </label>
960 
                      </div>
961 
                    </div>
962 
                  </div>
963 
                  <div class="form-group">
964 
                    <label class="col-md-3 control-label">Radio</label>
965 
                    <div class="col-md-9">
966 
                      <div class="radio-list">
967 
                        <label>
968 
                        <input type="radio" name="optionsRadios" id="optionsRadios22" value="option1" checked> Option 1 </label>
969 
                        <label>
970 
                        <input type="radio" name="optionsRadios" id="optionsRadios23" value="option2" checked> Option 2 </label>
971 
                        <label>
972 
                        <input type="radio" name="optionsRadios" id="optionsRadios24" value="option2" disabled> Disabled </label>
973 
                      </div>
974 
                    </div>
975 
                  </div>
976 
                  <div class="form-group">
977 
                    <label class="col-md-3 control-label">Inline Radio</label>
978 
                    <div class="col-md-9">
979 
                      <div class="radio-list">
980 
                        <label class="radio-inline">
981 
                        <input type="radio" name="optionsRadios" id="optionsRadios25" value="option1" checked> Option 1 </label>
982 
                        <label class="radio-inline">
983 
                        <input type="radio" name="optionsRadios" id="optionsRadios26" value="option2" checked> Option 2 </label>
984 
                        <label class="radio-inline">
985 
                        <input type="radio" name="optionsRadios" id="optionsRadios27" value="option3" disabled> Disabled </label>
986 
                      </div>
987 
                    </div>
988 
                  </div>
989 
                </div>
990 
                <div class="form-actions fluid">
991 
                  <div class="col-md-offset-3 col-md-9">
992 
                    <button type="submit" class="btn green">Submit</button>
993 
                    <button type="button" class="btn default">Cancel</button>
994 
                  </div>
995 
                </div>
996 
              </form>
997 
            </div>
998 
          </div>
999 
          <!-- END SAMPLE FORM PORTLET-->
1000 
          <!-- BEGIN SAMPLE FORM PORTLET-->
1001 
          <div class="portlet box purple ">
1002 
            <div class="portlet-title">
1003 
              <div class="caption">
1004 
                <i class="fa fa-gift"></i> Horizontal Form Height Sizing
1005 
              </div>
1006 
              <div class="tools">
1007 
                <a href="" class="collapse">
1008 
                </a>
1009 
                <a href="#portlet-config" data-toggle="modal" class="config">
1010 
                </a>
1011 
                <a href="" class="reload">
1012 
                </a>
1013 
                <a href="" class="remove">
1014 
                </a>
1015 
              </div>
1016 
            </div>
1017 
            <div class="portlet-body form">
1018 
              <form class="form-horizontal" role="form">
1019 
                <div class="form-body">
1020 
                  <div class="form-group">
1021 
                    <label class="col-md-3 control-label">Large Input</label>
1022 
                    <div class="col-md-9">
1023 
                      <input type="text" class="form-control input-lg" placeholder="Large Input">
1024 
                    </div>
1025 
                  </div>
1026 
                  <div class="form-group">
1027 
                    <label class="col-md-3 control-label">Default Input</label>
1028 
                    <div class="col-md-9">
1029 
                      <input type="text" class="form-control" placeholder="Default Input">
1030 
                    </div>
1031 
                  </div>
1032 
                  <div class="form-group">
1033 
                    <label class="col-md-3 control-label">Small Input</label>
1034 
                    <div class="col-md-9">
1035 
                      <input type="text" class="form-control input-sm" placeholder="Default Input">
1036 
                    </div>
1037 
                  </div>
1038 
                  <div class="form-group">
1039 
                    <label class="col-md-3 control-label">Large Select</label>
1040 
                    <div class="col-md-9">
1041 
                      <select class="form-control input-lg">
1042 
                        <option>Option 1</option>
1043 
                        <option>Option 2</option>
1044 
                        <option>Option 3</option>
1045 
                        <option>Option 4</option>
1046 
                        <option>Option 5</option>
1047 
                      </select>
1048 
                    </div>
1049 
                  </div>
1050 
                  <div class="form-group">
1051 
                    <label class="col-md-3 control-label">Default Select</label>
1052 
                    <div class="col-md-9">
1053 
                      <select class="form-control">
1054 
                        <option>Option 1</option>
1055 
                        <option>Option 2</option>
1056 
                        <option>Option 3</option>
1057 
                        <option>Option 4</option>
1058 
                        <option>Option 5</option>
1059 
                      </select>
1060 
                    </div>
1061 
                  </div>
1062 
                  <div class="form-group">
1063 
                    <label class="col-md-3 control-label">Small Select</label>
1064 
                    <div class="col-md-9">
1065 
                      <select class="form-control input-sm">
1066 
                        <option>Option 1</option>
1067 
                        <option>Option 2</option>
1068 
                        <option>Option 3</option>
1069 
                        <option>Option 4</option>
1070 
                        <option>Option 5</option>
1071 
                      </select>
1072 
                    </div>
1073 
                  </div>
1074 
                </div>
1075 
                <div class="form-actions right1">
1076 
                  <button type="button" class="btn default">Cancel</button>
1077 
                  <button type="submit" class="btn green">Submit</button>
1078 
                </div>
1079 
              </form>
1080 
            </div>
1081 
          </div>
1082 
          <!-- END SAMPLE FORM PORTLET-->
1083 
          <!-- BEGIN SAMPLE FORM PORTLET-->
1084 
          <div class="portlet box purple ">
1085 
            <div class="portlet-title">
1086 
              <div class="caption">
1087 
                <i class="fa fa-gift"></i> Fluid Input Groups
1088 
              </div>
1089 
              <div class="tools">
1090 
                <a href="" class="collapse">
1091 
                </a>
1092 
                <a href="#portlet-config" data-toggle="modal" class="config">
1093 
                </a>
1094 
                <a href="" class="reload">
1095 
                </a>
1096 
                <a href="" class="remove">
1097 
                </a>
1098 
              </div>
1099 
            </div>
1100 
            <div class="portlet-body">
1101 
              <h4 class="block">Checkboxe Addons</h4>
1102 
              <form role="form">
1103 
                <div class="row">
1104 
                  <div class="col-md-6">
1105 
                    <div class="input-group">
1106 
                      <span class="input-group-addon">
1107 
                        <input type="checkbox">
1108 
                      </span>
1109 
                      <input type="text" class="form-control">
1110 
                    </div>
1111 
                    <!-- /input-group -->
1112 
                  </div>
1113 
                  <!-- /.col-md-6 -->
1114 
                  <div class="col-md-6">
1115 
                    <div class="input-group">
1116 
                      <input type="text" class="form-control">
1117 
                      <span class="input-group-addon">
1118 
                        <input type="checkbox">
1119 
                      </span>
1120 
                    </div>
1121 
                    <!-- /input-group -->
1122 
                  </div>
1123 
                  <!-- /.col-md-6 -->
1124 
                </div>
1125 
                <!-- /.row -->
1126 
              </form>
1127 
              <h4 class="block">Button Addons</h4>
1128 
              <form role="form">
1129 
                <div class="row">
1130 
                  <div class="col-md-6">
1131 
                    <div class="input-group">
1132 
                      <span class="input-group-btn">
1133 
                        <button class="btn red" type="button">Go!</button>
1134 
                      </span>
1135 
                      <input type="text" class="form-control">
1136 
                    </div>
1137 
                    <!-- /input-group -->
1138 
                  </div>
1139 
                  <!-- /.col-md-6 -->
1140 
                  <div class="col-md-6">
1141 
                    <div class="input-group">
1142 
                      <input type="text" class="form-control">
1143 
                      <span class="input-group-btn">
1144 
                        <button class="btn blue" type="button">Go!</button>
1145 
                      </span>
1146 
                    </div>
1147 
                    <!-- /input-group -->
1148 
                  </div>
1149 
                  <!-- /.col-md-6 -->
1150 
                </div>
1151 
                <!-- /.row -->
1152 
              </form>
1153 
              <h4 class="block">Button Addons On Both Sides</h4>
1154 
              <form role="form">
1155 
                <div class="row">
1156 
                  <div class="col-md-12">
1157 
                    <div class="input-group">
1158 
                      <span class="input-group-btn">
1159 
                        <button class="btn red" type="button">Go!</button>
1160 
                      </span>
1161 
                      <input type="text" class="form-control">
1162 
                      <span class="input-group-btn">
1163 
                        <button class="btn blue" type="button">Go!</button>
1164 
                      </span>
1165 
                    </div>
1166 
                    <!-- /input-group -->
1167 
                  </div>
1168 
                  <!-- /.col-md-6 -->
1169 
                </div>
1170 
              </form>
1171 
              <h4 class="block">Buttons With Dropdowns</h4>
1172 
              <form role="form">
1173 
                <div class="row">
1174 
                  <div class="col-md-6">
1175 
                    <div class="input-group">
1176 
                      <div class="input-group-btn">
1177 
                        <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">Action </button>
1178 
                        <ul class="dropdown-menu">
1179 
                          <li>
1180 
                            <a href="#">
1181 
                               Action
1182 
                            </a>
1183 
                          </li>
1184 
                          <li>
1185 
                            <a href="#">
1186 
                               Another action
1187 
                            </a>
1188 
                          </li>
1189 
                          <li>
1190 
                            <a href="#">
1191 
                               Something else here
1192 
                            </a>
1193 
                          </li>
1194 
                          <li class="divider">
1195 
                          </li>
1196 
                          <li>
1197 
                            <a href="#">
1198 
                               Separated link
1199 
                            </a>
1200 
                          </li>
1201 
                        </ul>
1202 
                      </div>
1203 
                      <!-- /btn-group -->
1204 
                      <input type="text" class="form-control">
1205 
                    </div>
1206 
                    <!-- /input-group -->
1207 
                  </div>
1208 
                  <!-- /.col-md-6 -->
1209 
                  <div class="col-md-6">
1210 
                    <div class="input-group">
1211 
                      <input type="text" class="form-control">
1212 
                      <div class="input-group-btn">
1213 
                        <button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">Action </button>
1214 
                        <ul class="dropdown-menu pull-right">
1215 
                          <li>
1216 
                            <a href="#">
1217 
                               Action
1218 
                            </a>
1219 
                          </li>
1220 
                          <li>
1221 
                            <a href="#">
1222 
                               Another action
1223 
                            </a>
1224 
                          </li>
1225 
                          <li>
1226 
                            <a href="#">
1227 
                               Something else here
1228 
                            </a>
1229 
                          </li>
1230 
                          <li class="divider">
1231 
                          </li>
1232 
                          <li>
1233 
                            <a href="#">
1234 
                               Separated link
1235 
                            </a>
1236 
                          </li>
1237 
                        </ul>
1238 
                      </div>
1239 
                      <!-- /btn-group -->
1240 
                    </div>
1241 
                    <!-- /input-group -->
1242 
                  </div>
1243 
                  <!-- /.col-md-6 -->
1244 
                </div>
1245 
                <!-- /.row -->
1246 
              </form>
1247 
              <h4 class="block">Buttons With Dropdowns On Both Sides</h4>
1248 
              <form role="form">
1249 
                <div class="row">
1250 
                  <div class="col-md-12">
1251 
                    <div class="input-group">
1252 
                      <div class="input-group-btn">
1253 
                        <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">Action </button>
1254 
                        <ul class="dropdown-menu">
1255 
                          <li>
1256 
                            <a href="#">
1257 
                               Action
1258 
                            </a>
1259 
                          </li>
1260 
                          <li>
1261 
                            <a href="#">
1262 
                               Another action
1263 
                            </a>
1264 
                          </li>
1265 
                          <li>
1266 
                            <a href="#">
1267 
                               Something else here
1268 
                            </a>
1269 
                          </li>
1270 
                          <li class="divider">
1271 
                          </li>
1272 
                          <li>
1273 
                            <a href="#">
1274 
                               Separated link
1275 
                            </a>
1276 
                          </li>
1277 
                        </ul>
1278 
                      </div>
1279 
                      <!-- /btn-group -->
1280 
                      <input type="text" class="form-control">
1281 
                      <div class="input-group-btn">
1282 
                        <button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">Action </button>
1283 
                        <ul class="dropdown-menu pull-right">
1284 
                          <li>
1285 
                            <a href="#">
1286 
                               Action
1287 
                            </a>
1288 
                          </li>
1289 
                          <li>
1290 
                            <a href="#">
1291 
                               Another action
1292 
                            </a>
1293 
                          </li>
1294 
                          <li>
1295 
                            <a href="#">
1296 
                               Something else here
1297 
                            </a>
1298 
                          </li>
1299 
                          <li class="divider">
1300 
                          </li>
1301 
                          <li>
1302 
                            <a href="#">
1303 
                               Separated link
1304 
                            </a>
1305 
                          </li>
1306 
                        </ul>
1307 
                      </div>
1308 
                      <!-- /btn-group -->
1309 
                    </div>
1310 
                    <!-- /input-group -->
1311 
                  </div>
1312 
                  <!-- /.col-md-6 -->
1313 
                </div>
1314 
                <!-- /.row -->
1315 
              </form>
1316 
              <h4 class="block">Segmented Buttons</h4>
1317 
              <form role="form">
1318 
                <div class="row">
1319 
                  <div class="col-md-6">
1320 
                    <div class="input-group">
1321 
                      <div class="input-group-btn">
1322 
                        <button type="button" class="btn default" tabindex="-1">Action</button>
1323 
                        <button type="button" class="btn default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
1324 
 
1325 
                        </button>
1326 
                        <ul class="dropdown-menu" role="menu">
1327 
                          <li>
1328 
                            <a href="#">
1329 
                               Action
1330 
                            </a>
1331 
                          </li>
1332 
                          <li>
1333 
                            <a href="#">
1334 
                               Another action
1335 
                            </a>
1336 
                          </li>
1337 
                          <li>
1338 
                            <a href="#">
1339 
                               Something else here
1340 
                            </a>
1341 
                          </li>
1342 
                          <li class="divider">
1343 
                          </li>
1344 
                          <li>
1345 
                            <a href="#">
1346 
                               Separated link
1347 
                            </a>
1348 
                          </li>
1349 
                        </ul>
1350 
                      </div>
1351 
                      <input type="text" class="form-control">
1352 
                    </div>
1353 
                    <!-- /.input-group -->
1354 
                  </div>
1355 
                  <!-- /.col-md-6 -->
1356 
                  <div class="col-md-6">
1357 
                    <div class="input-group">
1358 
                      <input type="text" class="form-control">
1359 
                      <div class="input-group-btn">
1360 
                        <button type="button" class="btn green" tabindex="-1">Action</button>
1361 
                        <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown" tabindex="-1">
1362 
 
1363 
                        </button>
1364 
                        <ul class="dropdown-menu pull-right" role="menu">
1365 
                          <li>
1366 
                            <a href="#">
1367 
                               Action
1368 
                            </a>
1369 
                          </li>
1370 
                          <li>
1371 
                            <a href="#">
1372 
                               Another action
1373 
                            </a>
1374 
                          </li>
1375 
                          <li>
1376 
                            <a href="#">
1377 
                               Something else here
1378 
                            </a>
1379 
                          </li>
1380 
                          <li class="divider">
1381 
                          </li>
1382 
                          <li>
1383 
                            <a href="#">
1384 
                               Separated link
1385 
                            </a>
1386 
                          </li>
1387 
                        </ul>
1388 
                      </div>
1389 
                    </div>
1390 
                    <!-- /.input-group -->
1391 
                  </div>
1392 
                  <!-- /.col-md-6 -->
1393 
                </div>
1394 
              </form>
1395 
            </div>
1396 
          </div>
1397 
          <!-- END SAMPLE FORM PORTLET-->
1398 
          <!-- BEGIN SAMPLE FORM PORTLET-->
1399 
          <div class="portlet box purple ">
1400 
            <div class="portlet-title">
1401 
              <div class="caption">
1402 
                <i class="fa fa-gift"></i> Fixed Input Groups
1403 
              </div>
1404 
              <div class="tools">
1405 
                <a href="" class="collapse">
1406 
                </a>
1407 
                <a href="#portlet-config" data-toggle="modal" class="config">
1408 
                </a>
1409 
                <a href="" class="reload">
1410 
                </a>
1411 
                <a href="" class="remove">
1412 
                </a>
1413 
              </div>
1414 
            </div>
1415 
            <div class="portlet-body">
1416 
              <h4 class="block">Checkboxe Addons</h4>
1417 
              <form role="form">
1418 
                <div class="row">
1419 
                  <div class="col-md-6">
1420 
                    <div class="input-group input-medium">
1421 
                      <span class="input-group-addon">
1422 
                        <input type="checkbox">
1423 
                      </span>
1424 
                      <input type="text" class="form-control" placeholder=".input-medium">
1425 
                    </div>
1426 
                    <!-- /input-group -->
1427 
                  </div>
1428 
                  <!-- /.col-md-6 -->
1429 
                  <div class="col-md-6">
1430 
                    <div class="input-group input-medium">
1431 
                      <input type="text" class="form-control" placeholder=".input-medium">
1432 
                      <span class="input-group-addon">
1433 
                        <input type="checkbox">
1434 
                      </span>
1435 
                    </div>
1436 
                    <!-- /input-group -->
1437 
                  </div>
1438 
                  <!-- /.col-md-6 -->
1439 
                </div>
1440 
                <!-- /.row -->
1441 
              </form>
1442 
              <h4 class="block">Button Addons</h4>
1443 
              <form role="form">
1444 
                <div class="row">
1445 
                  <div class="col-md-6">
1446 
                    <div class="input-group input-medium">
1447 
                      <span class="input-group-btn">
1448 
                        <button class="btn red" type="button">Go!</button>
1449 
                      </span>
1450 
                      <input type="text" class="form-control" placeholder=".input-medium">
1451 
                    </div>
1452 
                    <!-- /input-group -->
1453 
                  </div>
1454 
                  <!-- /.col-md-6 -->
1455 
                  <div class="col-md-6">
1456 
                    <div class="input-group input-medium">
1457 
                      <input type="text" class="form-control" placeholder=".input-medium">
1458 
                      <span class="input-group-btn">
1459 
                        <button class="btn blue" type="button">Go!</button>
1460 
                      </span>
1461 
                    </div>
1462 
                    <!-- /input-group -->
1463 
                  </div>
1464 
                  <!-- /.col-md-6 -->
1465 
                </div>
1466 
                <!-- /.row -->
1467 
              </form>
1468 
              <h4 class="block">Button Addons On Both Sides</h4>
1469 
              <form role="form">
1470 
                <div class="row">
1471 
                  <div class="col-md-12">
1472 
                    <div class="input-group input-large">
1473 
                      <span class="input-group-btn">
1474 
                        <button class="btn red" type="button">Go!</button>
1475 
                      </span>
1476 
                      <input type="text" class="form-control" placeholder=".input-large">
1477 
                      <span class="input-group-btn">
1478 
                        <button class="btn blue" type="button">Go!</button>
1479 
                      </span>
1480 
                    </div>
1481 
                    <!-- /input-group -->
1482 
                  </div>
1483 
                  <!-- /.col-md-6 -->
1484 
                </div>
1485 
              </form>
1486 
              <h4 class="block">Buttons With Dropdowns</h4>
1487 
              <form role="form">
1488 
                <div class="row">
1489 
                  <div class="col-md-6">
1490 
                    <div class="input-group input-medium">
1491 
                      <div class="input-group-btn">
1492 
                        <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">Action </button>
1493 
                        <ul class="dropdown-menu">
1494 
                          <li>
1495 
                            <a href="#">
1496 
                               Action
1497 
                            </a>
1498 
                          </li>
1499 
                          <li>
1500 
                            <a href="#">
1501 
                               Another action
1502 
                            </a>
1503 
                          </li>
1504 
                          <li>
1505 
                            <a href="#">
1506 
                               Something else here
1507 
                            </a>
1508 
                          </li>
1509 
                          <li class="divider">
1510 
                          </li>
1511 
                          <li>
1512 
                            <a href="#">
1513 
                               Separated link
1514 
                            </a>
1515 
                          </li>
1516 
                        </ul>
1517 
                      </div>
1518 
                      <!-- /btn-group -->
1519 
                      <input type="text" class="form-control" placeholder=".input-medium">
1520 
                    </div>
1521 
                    <!-- /input-group -->
1522 
                  </div>
1523 
                  <!-- /.col-md-6 -->
1524 
                  <div class="col-md-6">
1525 
                    <div class="input-group input-medium">
1526 
                      <input type="text" class="form-control" placeholder=".input-medium">
1527 
                      <div class="input-group-btn">
1528 
                        <button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">Action </button>
1529 
                        <ul class="dropdown-menu pull-right">
1530 
                          <li>
1531 
                            <a href="#">
1532 
                               Action
1533 
                            </a>
1534 
                          </li>
1535 
                          <li>
1536 
                            <a href="#">
1537 
                               Another action
1538 
                            </a>
1539 
                          </li>
1540 
                          <li>
1541 
                            <a href="#">
1542 
                               Something else here
1543 
                            </a>
1544 
                          </li>
1545 
                          <li class="divider">
1546 
                          </li>
1547 
                          <li>
1548 
                            <a href="#">
1549 
                               Separated link
1550 
                            </a>
1551 
                          </li>
1552 
                        </ul>
1553 
                      </div>
1554 
                      <!-- /btn-group -->
1555 
                    </div>
1556 
                    <!-- /input-group -->
1557 
                  </div>
1558 
                  <!-- /.col-md-6 -->
1559 
                </div>
1560 
                <!-- /.row -->
1561 
              </form>
1562 
              <h4 class="block">Buttons With Dropdowns On Both Sides</h4>
1563 
              <form role="form">
1564 
                <div class="row">
1565 
                  <div class="col-md-12">
1566 
                    <div class="input-group input-xlarge">
1567 
                      <div class="input-group-btn">
1568 
                        <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">Action </button>
1569 
                        <ul class="dropdown-menu">
1570 
                          <li>
1571 
                            <a href="#">
1572 
                               Action
1573 
                            </a>
1574 
                          </li>
1575 
                          <li>
1576 
                            <a href="#">
1577 
                               Another action
1578 
                            </a>
1579 
                          </li>
1580 
                          <li>
1581 
                            <a href="#">
1582 
                               Something else here
1583 
                            </a>
1584 
                          </li>
1585 
                          <li class="divider">
1586 
                          </li>
1587 
                          <li>
1588 
                            <a href="#">
1589 
                               Separated link
1590 
                            </a>
1591 
                          </li>
1592 
                        </ul>
1593 
                      </div>
1594 
                      <!-- /btn-group -->
1595 
                      <input type="text" class="form-control" placeholder=".input-xlarge">
1596 
                      <div class="input-group-btn">
1597 
                        <button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">Action </button>
1598 
                        <ul class="dropdown-menu pull-right">
1599 
                          <li>
1600 
                            <a href="#">
1601 
                               Action
1602 
                            </a>
1603 
                          </li>
1604 
                          <li>
1605 
                            <a href="#">
1606 
                               Another action
1607 
                            </a>
1608 
                          </li>
1609 
                          <li>
1610 
                            <a href="#">
1611 
                               Something else here
1612 
                            </a>
1613 
                          </li>
1614 
                          <li class="divider">
1615 
                          </li>
1616 
                          <li>
1617 
                            <a href="#">
1618 
                               Separated link
1619 
                            </a>
1620 
                          </li>
1621 
                        </ul>
1622 
                      </div>
1623 
                      <!-- /btn-group -->
1624 
                    </div>
1625 
                    <!-- /input-group -->
1626 
                  </div>
1627 
                  <!-- /.col-md-6 -->
1628 
                </div>
1629 
                <!-- /.row -->
1630 
              </form>
1631 
              <h4 class="block">Segmented Buttons</h4>
1632 
              <form role="form">
1633 
                <div class="row">
1634 
                  <div class="col-md-12">
1635 
                    <div class="input-group input-large">
1636 
                      <div class="input-group-btn">
1637 
                        <button type="button" class="btn default" tabindex="-1">Action</button>
1638 
                        <button type="button" class="btn default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
1639 
 
1640 
                        </button>
1641 
                        <ul class="dropdown-menu" role="menu">
1642 
                          <li>
1643 
                            <a href="#">
1644 
                               Action
1645 
                            </a>
1646 
                          </li>
1647 
                          <li>
1648 
                            <a href="#">
1649 
                               Another action
1650 
                            </a>
1651 
                          </li>
1652 
                          <li>
1653 
                            <a href="#">
1654 
                               Something else here
1655 
                            </a>
1656 
                          </li>
1657 
                          <li class="divider">
1658 
                          </li>
1659 
                          <li>
1660 
                            <a href="#">
1661 
                               Separated link
1662 
                            </a>
1663 
                          </li>
1664 
                        </ul>
1665 
                      </div>
1666 
                      <input type="text" class="form-control" placeholder=".input-large">
1667 
                    </div>
1668 
                    <!-- /.input-group -->
1669 
                  </div>
1670 
                  <!-- /.col-md-6 -->
1671 
                </div>
1672 
              </form>
1673 
              <form role="form" class="margin-top-10">
1674 
                <div class="row">
1675 
                  <div class="col-md-12">
1676 
                    <div class="input-group input-large">
1677 
                      <input type="text" class="form-control" placeholder=".input-large">
1678 
                      <div class="input-group-btn">
1679 
                        <button type="button" class="btn green" tabindex="-1">Action</button>
1680 
                        <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown" tabindex="-1">
1681 
 
1682 
                        </button>
1683 
                        <ul class="dropdown-menu" role="menu">
1684 
                          <li>
1685 
                            <a href="#">
1686 
                               Action
1687 
                            </a>
1688 
                          </li>
1689 
                          <li>
1690 
                            <a href="#">
1691 
                               Another action
1692 
                            </a>
1693 
                          </li>
1694 
                          <li>
1695 
                            <a href="#">
1696 
                               Something else here
1697 
                            </a>
1698 
                          </li>
1699 
                          <li class="divider">
1700 
                          </li>
1701 
                          <li>
1702 
                            <a href="#">
1703 
                               Separated link
1704 
                            </a>
1705 
                          </li>
1706 
                        </ul>
1707 
                      </div>
1708 
                    </div>
1709 
                    <!-- /.input-group -->
1710 
                  </div>
1711 
                  <!-- /.col-md-6 -->
1712 
                </div>
1713 
              </form>
1714 
            </div>
1715 
          </div>
1716 
          <!-- END SAMPLE FORM PORTLET-->
1717 
          <div class="portlet box blue ">
1718 
            <div class="portlet-title">
1719 
              <div class="caption">
1720 
                <i class="fa fa-gift"></i> Validation States
1721 
              </div>
1722 
              <div class="tools">
1723 
                <a href="" class="collapse">
1724 
                </a>
1725 
                <a href="#portlet-config" data-toggle="modal" class="config">
1726 
                </a>
1727 
                <a href="" class="reload">
1728 
                </a>
1729 
                <a href="" class="remove">
1730 
                </a>
1731 
              </div>
1732 
            </div>
1733 
            <div class="portlet-body form">
1734 
              <form role="form">
1735 
                <div class="form-body">
1736 
                  <div class="form-group has-success">
1737 
                    <label class="control-label">Input with success</label>
1738 
                    <input type="text" class="form-control" id="inputSuccess">
1739 
                  </div>
1740 
                  <div class="form-group has-warning">
1741 
                    <label class="control-label">Input with warning</label>
1742 
                    <input type="text" class="form-control" id="inputWarning">
1743 
                  </div>
1744 
                  <div class="form-group has-error">
1745 
                    <label class="control-label">Input with error</label>
1746 
                    <input type="text" class="form-control" id="inputError">
1747 
                  </div>
1748 
                </div>
1749 
                <div class="form-actions">
1750 
                  <button type="button" class="btn default">Cancel</button>
1751 
                  <button type="submit" class="btn red">Submit</button>
1752 
                </div>
1753 
              </form>
1754 
            </div>
1755 
          </div>
1756 
          <div class="portlet box yellow ">
1757 
            <div class="portlet-title">
1758 
              <div class="caption">
1759 
                <i class="fa fa-gift"></i> Validation States With Icons
1760 
              </div>
1761 
              <div class="tools">
1762 
                <a href="" class="collapse">
1763 
                </a>
1764 
                <a href="#portlet-config" data-toggle="modal" class="config">
1765 
                </a>
1766 
                <a href="" class="reload">
1767 
                </a>
1768 
                <a href="" class="remove">
1769 
                </a>
1770 
              </div>
1771 
            </div>
1772 
            <div class="portlet-body form">
1773 
              <form role="form">
1774 
                <div class="form-body">
1775 
                  <div class="form-group">
1776 
                    <label class="control-label">Default input</label>
1777 
                    <div class="input-icon right">
1778 
                      <i class="fa fa-info-circle tooltips" data-original-title="Email address" data-container="body"></i>
1779 
                      <input type="text" class="form-control">
1780 
                    </div>
1781 
                  </div>
1782 
                  <div class="form-group has-success">
1783 
                    <label class="control-label">Input with success</label>
1784 
                    <div class="input-icon right">
1785 
                      <i class="fa fa-check tooltips" data-original-title="You look OK!" data-container="body"></i>
1786 
                      <input type="text" class="form-control">
1787 
                    </div>
1788 
                  </div>
1789 
                  <div class="form-group has-warning">
1790 
                    <label class="control-label">Input with warning</label>
1791 
                    <div class="input-icon right">
1792 
                      <i class="fa fa-warning tooltips" data-original-title="please provide an email" data-container="body"></i>
1793 
                      <input type="text" class="form-control">
1794 
                    </div>
1795 
                  </div>
1796 
                  <div class="form-group has-error">
1797 
                    <label class="control-label">Input with error</label>
1798 
                    <div class="input-icon right">
1799 
                      <i class="fa fa-exclamation tooltips" data-original-title="please write a valid email" data-container="body"></i>
1800 
                      <input type="text" class="form-control">
1801 
                    </div>
1802 
                  </div>
1803 
                </div>
1804 
                <div class="form-actions right">
1805 
                  <button type="button" class="btn default">Cancel</button>
1806 
                  <button type="submit" class="btn green">Submit</button>
1807 
                </div>
1808 
              </form>
1809 
            </div>
1810 
          </div>
1811 
          <div class="portlet box purple">
1812 
            <div class="portlet-title">
1813 
              <div class="caption">
1814 
                <i class="fa fa-gift"></i> Horizontal Form Validation States
1815 
              </div>
1816 
              <div class="tools">
1817 
                <a href="" class="collapse">
1818 
                </a>
1819 
                <a href="#portlet-config" data-toggle="modal" class="config">
1820 
                </a>
1821 
                <a href="" class="reload">
1822 
                </a>
1823 
                <a href="" class="remove">
1824 
                </a>
1825 
              </div>
1826 
            </div>
1827 
            <div class="portlet-body form">
1828 
              <form role="form" class="form-horizontal">
1829 
                <div class="form-body">
1830 
                  <div class="form-group">
1831 
                    <label class="col-md-4 control-label">Default input</label>
1832 
                    <div class="col-md-8">
1833 
                      <div class="input-icon right">
1834 
                        <i class="fa fa-info-circle tooltips" data-original-title="Email address" data-container="body"></i>
1835 
                        <input type="text" class="form-control">
1836 
                      </div>
1837 
                    </div>
1838 
                  </div>
1839 
                  <div class="form-group has-success">
1840 
                    <label class="col-md-4 control-label">Input with success</label>
1841 
                    <div class="col-md-8">
1842 
                      <div class="input-icon right">
1843 
                        <i class="fa fa-check tooltips" data-original-title="You look OK!" data-container="body"></i>
1844 
                        <input type="text" class="form-control">
1845 
                      </div>
1846 
                    </div>
1847 
                  </div>
1848 
                  <div class="form-group has-warning">
1849 
                    <label class="col-md-4 control-label">Input with warning</label>
1850 
                    <div class="col-md-8">
1851 
                      <div class="input-icon right">
1852 
                        <i class="fa fa-warning tooltips" data-original-title="please provide an email" data-container="body"></i>
1853 
                        <input type="text" class="form-control">
1854 
                      </div>
1855 
                    </div>
1856 
                  </div>
1857 
                  <div class="form-group has-error">
1858 
                    <label class="col-md-4 control-label">Input with error</label>
1859 
                    <div class="col-md-8">
1860 
                      <div class="input-icon right">
1861 
                        <i class="fa fa-exclamation tooltips" data-original-title="please write a valid email" data-container="body"></i>
1862 
                        <input type="text" class="form-control">
1863 
                      </div>
1864 
                    </div>
1865 
                  </div>
1866 
                </div>
1867 
                <div class="form-actions fluid">
1868 
                  <div class="col-md-offset-4 col-md-8">
1869 
                    <button type="button" class="btn default">Cancel</button>
1870 
                    <button type="submit" class="btn blue">Submit</button>
1871 
                  </div>
1872 
                </div>
1873 
              </form>
1874 
            </div>
1875 
          </div>
1876 
        </div>
1877 
      </div>
1878 
      <div class="row ">
1879 
        <div class="col-md-12">
1880 
          <!-- BEGIN SAMPLE FORM PORTLET-->
1881 
          <div class="portlet box yellow">
1882 
            <div class="portlet-title">
1883 
              <div class="caption">
1884 
                <i class="fa fa-gift"></i> More Form Samples
1885 
              </div>
1886 
              <div class="tools">
1887 
                <a href="" class="collapse">
1888 
                </a>
1889 
                <a href="#portlet-config" data-toggle="modal" class="config">
1890 
                </a>
1891 
                <a href="" class="reload">
1892 
                </a>
1893 
                <a href="" class="remove">
1894 
                </a>
1895 
              </div>
1896 
            </div>
1897 
            <div class="portlet-body">
1898 
              <h4>Inline Form</h4>
1899 
              <form class="form-inline" role="form">
1900 
                <div class="form-group">
1901 
                  <label class="sr-only" for="exampleInputEmail2">Email address</label>
1902 
                  <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
1903 
                </div>
1904 
                <div class="form-group">
1905 
                  <label class="sr-only" for="exampleInputPassword2">Password</label>
1906 
                  <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
1907 
                </div>
1908 
                <div class="checkbox">
1909 
                  <label>
1910 
                  <input type="checkbox"> Remember me </label>
1911 
                </div>
1912 
                <button type="submit" class="btn btn-default">Sign in</button>
1913 
              </form>
1914 
              <hr>
1915 
              <h4>Inline Form With Icons</h4>
1916 
              <form class="form-inline" role="form">
1917 
                <div class="form-group">
1918 
                  <label class="sr-only" for="exampleInputEmail22">Email address</label>
1919 
                  <div class="input-icon">
1920 
                    <i class="fa fa-envelope"></i>
1921 
                    <input type="email" class="form-control" id="exampleInputEmail22" placeholder="Enter email">
1922 
                  </div>
1923 
                </div>
1924 
                <div class="form-group">
1925 
                  <label class="sr-only" for="exampleInputPassword42">Password</label>
1926 
                  <div class="input-icon">
1927 
                    <i class="fa fa-user"></i>
1928 
                    <input type="password" class="form-control" id="exampleInputPassword42" placeholder="Password">
1929 
                  </div>
1930 
                </div>
1931 
                <div class="checkbox">
1932 
                  <label>
1933 
                  <input type="checkbox"> Remember me </label>
1934 
                </div>
1935 
                <button type="submit" class="btn btn-default">Sign in</button>
1936 
              </form>
1937 
              <hr>
1938 
              <h4>Horizontal Form</h4>
1939 
              <form class="form-horizontal" role="form">
1940 
                <div class="form-group">
1941 
                  <label for="inputEmail1" class="col-md-2 control-label">Email</label>
1942 
                  <div class="col-md-4">
1943 
                    <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
1944 
                  </div>
1945 
                </div>
1946 
                <div class="form-group">
1947 
                  <label for="inputPassword12" class="col-md-2 control-label">Password</label>
1948 
                  <div class="col-md-4">
1949 
                    <input type="password" class="form-control" id="inputPassword12" placeholder="Password">
1950 
                  </div>
1951 
                </div>
1952 
                <div class="form-group">
1953 
                  <div class="col-md-offset-2 col-md-4">
1954 
                    <div class="checkbox">
1955 
                      <label>
1956 
                      <input type="checkbox"> Remember me </label>
1957 
                    </div>
1958 
                  </div>
1959 
                </div>
1960 
                <div class="form-group">
1961 
                  <div class="col-md-offset-2 col-md-10">
1962 
                    <button type="submit" class="btn blue">Sign in</button>
1963 
                  </div>
1964 
                </div>
1965 
              </form>
1966 
              <hr>
1967 
              <h4>Horizontal Form With Icons</h4>
1968 
              <form class="form-horizontal" role="form">
1969 
                <div class="form-group">
1970 
                  <label for="inputEmail12" class="col-md-2 control-label">Email</label>
1971 
                  <div class="col-md-4">
1972 
                    <div class="input-icon">
1973 
                      <i class="fa fa-envelope"></i>
1974 
                      <input type="email" class="form-control" id="inputEmail12" placeholder="Email">
1975 
                    </div>
1976 
                  </div>
1977 
                </div>
1978 
                <div class="form-group">
1979 
                  <label for="inputPassword1" class="col-md-2 control-label">Password</label>
1980 
                  <div class="col-md-4">
1981 
                    <div class="input-icon right">
1982 
                      <i class="fa fa-user"></i>
1983 
                      <input type="password" class="form-control" id="inputPassword1" placeholder="Password">
1984 
                    </div>
1985 
                    <div class="help-block">
1986 
                       with right aligned icon
1987 
                    </div>
1988 
                  </div>
1989 
                </div>
1990 
                <div class="form-group">
1991 
                  <div class="col-md-offset-2 col-md-4">
1992 
                    <div class="checkbox">
1993 
                      <label>
1994 
                      <input type="checkbox"> Remember me </label>
1995 
                    </div>
1996 
                  </div>
1997 
                </div>
1998 
                <div class="form-group">
1999 
                  <div class="col-md-offset-2 col-md-10">
2000 
                    <button type="submit" class="btn green">Sign in</button>
2001 
                  </div>
2002 
                </div>
2003 
              </form>
2004 
              <hr>
2005 
              <h4>Column Sizing</h4>
2006 
              <form role="form">
2007 
                <div class="row">
2008 
                  <div class="col-md-2">
2009 
                    <input type="text" class="form-control" placeholder=".col-md-2">
2010 
                  </div>
2011 
                  <div class="col-md-3">
2012 
                    <input type="text" class="form-control" placeholder=".col-md-3">
2013 
                  </div>
2014 
                  <div class="col-md-4">
2015 
                    <input type="text" class="form-control" placeholder=".col-md-4">
2016 
                  </div>
2017 
                  <div class="col-md-3">
2018 
                    <input type="text" class="form-control" placeholder=".col-md-2">
2019 
                  </div>
2020 
                </div>
2021 
              </form>
2022 
            </div>
2023 
          </div>
2024 
          <!-- END SAMPLE FORM PORTLET-->
2025 
        </div>
2026 
      </div>
2027 
 
2028 
            </div>
2029 
          </div>
2030 
          <!-- END CONTENT -->
2031 
        </div>
2032 
        <!-- END SIDEBAR & CONTENT -->
2033 
      </div>
2034 
    </div>
2035 
 
2036 
    <!-- BEGIN PRE-FOOTER -->
2037 
    <div class="pre-footer">
2038 
      <div class="container">
2039 
        <div class="row">
2040 
          <!-- BEGIN BOTTOM ABOUT BLOCK -->
2041 
          <div class="col-md-4 col-sm-6 pre-footer-col">
2042 
            <h2>About us</h2>
2043 
            <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>
2044 
 
2045 
            <div class="photo-stream">
2046 
              <h2>Photos Stream</h2>
2047 
              <ul class="list-unstyled">
2048 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img5-small.jpg"></a></li>
2049 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img1.jpg"></a></li>
2050 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img4-large.jpg"></a></li>
2051 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img6.jpg"></a></li>
2052 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img3.jpg"></a></li>
2053 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img2-large.jpg"></a></li>
2054 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img2.jpg"></a></li>
2055 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img5.jpg"></a></li>
2056 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img5-small.jpg"></a></li>
2057 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img1.jpg"></a></li>
2058 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img4-large.jpg"></a></li>
2059 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img6.jpg"></a></li>
2060 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img3.jpg"></a></li>
2061 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img2-large.jpg"></a></li>
2062 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img2.jpg"></a></li>
2063 
              </ul>                    
2064 
            </div>
2065 
          </div>
2066 
          <!-- END BOTTOM ABOUT BLOCK -->
2067 
 
2068 
          <!-- BEGIN BOTTOM CONTACTS -->
2069 
          <div class="col-md-4 col-sm-6 pre-footer-col">
2070 
            <h2>Our Contacts</h2>
2071 
            <address class="margin-bottom-40">
2072 
              35, Lorem Lis Street, Park Ave<br>
2073 
              California, US<br>
2074 
              Phone: 300 323 3456<br>
2075 
              Fax: 300 323 1456<br>
2076 
              Email: <a href="mailto:info@metronic.com">info@metronic.com</a><br>
2077 
              Skype: <a href="skype:metronic">metronic</a>
2078 
            </address>
2079 
 
2080 
            <div class="pre-footer-subscribe-box pre-footer-subscribe-box-vertical">
2081 
              <h2>Newsletter</h2>
2082 
              <p>Subscribe to our newsletter and stay up to date with the latest news and deals!</p>
2083 
              <form action="#">
2084 
                <div class="input-group">
2085 
                  <input type="text" placeholder="youremail@mail.com" class="form-control">
2086 
                  <span class="input-group-btn">
2087 
                    <button class="btn btn-primary" type="submit">Subscribe</button>
2088 
                  </span>
2089 
                </div>
2090 
              </form>
2091 
            </div>
2092 
          </div>
2093 
          <!-- END BOTTOM CONTACTS -->
2094 
 
2095 
          <!-- BEGIN TWITTER BLOCK -->
2096 
          <div class="col-md-4 col-sm-6 pre-footer-col">
2097 
            <h2 class="margin-bottom-0">Latest Tweets</h2>
2098 
            <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>
2099 
          </div>
2100 
          <!-- END TWITTER BLOCK -->
2101 
        </div>
2102 
      </div>
2103 
    </div>
2104 
    <!-- END PRE-FOOTER -->
2105 
 
2106 
    <!-- BEGIN FOOTER -->
2107 
    <div class="footer">
2108 
      <div class="container">
2109 
        <div class="row">
2110 
          <!-- BEGIN COPYRIGHT -->
2111 
          <div class="col-md-6 col-sm-6 padding-top-10">
2112 
            2014 © Metronic Shop UI. ALL Rights Reserved. <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a>
2113 
          </div>
2114 
          <!-- END COPYRIGHT -->
2115 
          <!-- BEGIN PAYMENTS -->
2116 
          <div class="col-md-6 col-sm-6">
2117 
            <ul class="social-footer list-unstyled list-inline pull-right">
2118 
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
2119 
              <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
2120 
              <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
2121 
              <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
2122 
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
2123 
              <li><a href="#"><i class="fa fa-skype"></i></a></li>
2124 
              <li><a href="#"><i class="fa fa-github"></i></a></li>
2125 
              <li><a href="#"><i class="fa fa-youtube"></i></a></li>
2126 
              <li><a href="#"><i class="fa fa-dropbox"></i></a></li>
2127 
            </ul>  
2128 
          </div>
2129 
          <!-- END PAYMENTS -->
2130 
        </div>
2131 
      </div>
2132 
    </div>
2133 
    <!-- END FOOTER -->
2134 
 
2135 
    <!-- Load javascripts at bottom, this will reduce page load time -->
2136 
    <!-- BEGIN CORE PLUGINS (REQUIRED FOR ALL PAGES) -->
2137 
    <!--[if lt IE 9]>
2138 
    <script src="../../assets/global/plugins/respond.min.js"></script>
2139 
    <![endif]-->
2140 
    <script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
2141 
    <script src="../../assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
2142 
    <script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>      
2143 
    <script src="../../assets/frontend/layout/scripts/back-to-top.js" type="text/javascript"></script>
2144 
    <!-- END CORE PLUGINS -->
2145 
 
2146 
    <!-- BEGIN PAGE LEVEL JAVASCRIPTS (REQUIRED ONLY FOR CURRENT PAGE) -->
2147 
    <script src="../../assets/global/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script><!-- pop up -->
2148 
    <script src="../../assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript" ></script>
2149 
    <script src="../../assets/global/scripts/metronic.js" type="text/javascript"></script>
2150 
    <script src="../../assets/frontend/layout/scripts/layout.js" type="text/javascript"></script>
2151 
    <script type="text/javascript">
2152 
        jQuery(document).ready(function() {
2153 
            Metronic.init(); // init global framework features
2154 
            Layout.init();
2155 
            Layout.initUniform();
2156 
            Layout.initTwitter();
2157 
        });
2158 
    </script>
2159 
    <!-- END PAGE LEVEL JAVASCRIPTS -->
2160 
</body>
2161 
<!-- END BODY -->
2162 
</html>