4 <meta charset="utf-8" />
5 <link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
6 <link rel="icon" type="image/png" href="assets/img/favicon.png">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
9 <title>Components Documentation - Material Kit by Creative Tim</title>
11 <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
13 <!-- Fonts and icons -->
14 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
15 <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" />
16 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
19 <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
20 <link href="assets/css/material-kit.css" rel="stylesheet"/>
21 <link href="assets/css/demo.css" rel="stylesheet" />
23 <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
27 background-color: #eee;
53 border-top-color: #3472F7;
57 border: 1px solid #999;
73 .table-shopping .td-name{
79 <body class="components-page">
81 <nav class="navbar navbar-transparent navbar-fixed-top navbar-color-on-scroll" role="navigation">
82 <div class="container">
83 <!-- Brand and toggle get grouped for better mobile display -->
84 <div class="navbar-header">
85 <button id="menu-toggle" type="button" class="navbar-toggle" data-target="#navigation-doc">
86 <span class="sr-only">Toggle navigation</span>
87 <span class="icon-bar bar1"></span>
88 <span class="icon-bar bar2"></span>
89 <span class="icon-bar bar3"></span>
91 <a href="http://www.creative-tim.com">
92 <div class="logo-container">
94 <img src="assets/img/logo.png" alt="Creative Tim Logo">
103 <!-- Collect the nav links, forms, and other content for toggling -->
104 <div class="collapse navbar-collapse" id="navigation-doc">
105 <ul class="nav navbar-nav navbar-right">
107 <a href="index.html">Back to Kit</a>
110 <a href="https://github.com/timcreative/material-kit/issues">Have an issue?</a>
113 <a href="http://demos.creative-tim.com/material-kit-pro/presentation.html?ref=utp-freebie" target="_blank">
114 <i class="material-icons">unarchive</i> Upgrade to PRO
119 </div><!-- /.navbar-collapse -->
120 </div><!-- /.container-fluid -->
123 <div class="wrapper">
124 <div class="header header-filter" style="background-image: url('https://images.unsplash.com/photo-1423655156442-ccc11daa4e99?crop=entropy&dpr=2&fit=crop&fm=jpg&h=750&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1450');">
125 <div class="container">
127 <div class="col-md-6 col-md-offset-3">
128 <h1 class="title text-center">Components Documentation</h1>
134 <div class="main main-raised">
135 <div class="section">
136 <div class="container">
138 <div class="col-md-2">
139 <div class="fixed-section" data-spy="affix" data-offset-top="340">
141 <li><a href="#buttons-row">Buttons</a></li>
142 <li><a href="#checkbox-row">Checkbox/Radio/Toggle</a></li>
143 <li><a href="#dropdown-row">Dropdown</a></li>
144 <li><a href="#inputs-row">Inputs</a></li>
145 <li><a href="#textarea-row">Textarea</a></li>
146 <li><a href="#navbar-row">Navigation</a></li>
147 <li><a href="#pagination-row">Pagination</a></li>
148 <li><a href="#progressbar-row">Progress Bars</a></li>
149 <li><a href="#sliders-row">Sliders</a></li>
150 <li><a href="#labels-row">Labels</a></li>
151 <li><a href="#tables-row">Tables</a></li>
152 <li><a href="#datepicker-row">Datepicker</a></li>
153 <li><a href="#modal-row">Modals</a></li>
154 <li><a href="#tooltip-row">Tooltips/Popovers</a></li>
155 <li><a href="#icons-row">Material Icons</a></li>
156 <li><a href="#notification-row">Notifications</a></li>
161 <div class="col-md-8 col-md-offset-1">
162 <div class="tim-container">
165 <div class="tim-row" id="buttons-row">
170 <p>We worked over the original Bootstrap classes, choosing a different, slightly intenser color pallete:</p>
172 <button class="btn btn-default">Default</button>
173 <button class="btn btn-primary">Primary</button>
174 <button class="btn btn-info">Info</button>
175 <button class="btn btn-success">Success</button><br/>
176 <button class="btn btn-warning">Warning</button>
177 <button class="btn btn-danger">Danger</button>
178 <button class="btn btn-white">White</button>
181 <pre class="prettyprint">
183 <button class="btn btn-default">Default</button>
184 <button class="btn btn-primary">Primary</button>
185 <button class="btn btn-info">Info</button>
186 <button class="btn btn-success">Success</button>
187 <button class="btn btn-warning">Warning</button>
188 <button class="btn btn-danger">Danger</button>
189 <button class="btn btn-white">White</button>
194 <p>Buttons come in all needed sizes:</p>
196 <button class="btn btn-primary btn-lg">Large</button>
197 <button class="btn btn-primary">Normal</button>
198 <button class="btn btn-primary btn-sm">Small</button>
199 <button class="btn btn-primary btn-xs">Extra Small</button>
202 <pre class="prettyprint">
204 <button class="btn btn-primary btn-lg">Large</button>
205 <button class="btn btn-primary">Normal</button>
206 <button class="btn btn-primary btn-sm">Small</button>
207 <button class="btn btn-primary btn-xs">Extra Small</button>
211 <p>We added extra classes that can help you better customise the look. You can use regular buttons, rounded corners buttons or plain simple buttons. Let's see some examples:
214 <button class="btn btn-primary">Default</button>
215 <button class="btn btn-primary btn-round">Round</button>
216 <button class="btn btn-primary btn-round">
217 <i class="material-icons">favorite</i> With Icon
219 <button class="btn btn-primary btn-fab btn-fab-mini btn-round">
220 <i class="material-icons">favorite</i>
222 <button class="btn btn-primary btn-just-icon">
223 <i class="material-icons">favorite</i>
225 <button class="btn btn-primary btn-simple">Simple</button>
229 <pre class="prettyprint">
230 <button class="btn btn-primary">Default</button>
231 <button class="btn btn-primary btn-round">Round</button>
232 <button class="btn btn-primary btn-round">
233 <i class="material-icons">favorite</i> With Icon
235 <button class="btn btn-primary btn-fab btn-fab-mini btn-round">
236 <i class="material-icons">favorite</i>
238 <button class="btn btn-primary btn-just-icon">
239 <i class="material-icons">favorite</i>
241 <button class="btn btn-primary btn-simple">Simple</button>
245 Button groups and disabled state all work like they are supposed to. We used the Font Awesome icons that can be found <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">here</a> and Material Design Icons that can be found <a href="https://design.google.com/icons/" target="_blank"> here</a>.
250 <!-- checkbox row -->
251 <div class="tim-row" id="checkbox-row">
252 <h2> Checkboxes </h2>
255 To use the custom checkboxes, you don't need to import any separate Javascript file, everything is inside material.min.js
258 <div class="checkbox">
260 <input type="checkbox" name="optionsCheckboxes">
264 <div class="checkbox">
266 <input type="checkbox" name="optionsCheckboxes" checked>
270 <div class="checkbox">
272 <input type="checkbox" name="optionsCheckboxes" disabled>
276 <div class="checkbox">
278 <input type="checkbox" name="optionsCheckboxes" disabled checked>
284 <pre class="prettyprint">
285 <div class="checkbox">
287 <input type="checkbox" name="optionsCheckboxes">
291 <div class="checkbox">
293 <input type="checkbox" name="optionsCheckboxes" checked>
297 <div class="checkbox">
299 <input type="checkbox" name="optionsCheckboxes" disabled>
303 <div class="checkbox">
305 <input type="checkbox" name="optionsCheckboxes" disabled checked>
315 <div class="tim-row" id="radio-row">
316 <h2> Radio Buttons </h2>
319 To use the custom radio buttons, you don't need to import any separate Javascript file, everything is inside material.min.js.
324 <input type="radio" name="optionsRadios">
330 <input type="radio" name="optionsRadios" checked="true">
336 <input type="radio" name="optionsRadiosDisabled" disabled>
337 Disabled Radio is off
342 <input type="radio" name="optionsRadiosDisabled" checked="true" disabled>
348 <pre class="prettyprint">
349 <div class="radio">
351 <input type="radio" name="optionsRadios">
355 <div class="radio">
357 <input type="radio" name="optionsRadios" checked="true">
361 <div class="radio">
363 <input type="radio" name="optionsRadiosDisabled" disabled>
364 Disabled Radio is off
367 <div class="radio">
369 <input type="radio" name="optionsRadiosDisabled" checked="true" disabled>
377 <!-- switches row -->
378 <div class="tim-row" id="switch-row">
379 <h2>Toggle Buttons</h2>
381 <p>If you want to use something more special than a checkbox, we recomment the toggle buttons.</p>
383 <div class="togglebutton">
385 <input type="checkbox" checked="">
390 <div class="togglebutton">
392 <input type="checkbox">
397 <pre class="prettyprint">
399 <div class="togglebutton">
401 <input type="checkbox" checked="">
406 <div class="togglebutton">
408 <input type="checkbox">
416 <!-- dropdown row -->
417 <div class="tim-row" id="dropdown-row">
420 <p> We are very proud to present the dropdown which has a subtle animation. We also thought of another use-case: dropdown with flags. <b>IMPORTANT!</b> The focus state is <b>Purple</b> by default, on the dropdowns from the navbars will take the color of the navbar parent.</p>
423 <div class="col-md-3 dropdown">
424 <a href="#" class="btn btn-simple dropdown-toggle" data-toggle="dropdown">
426 <b class="caret"></b>
428 <ul class="dropdown-menu">
429 <li><a href="#">Action</a></li>
430 <li><a href="#">Another action</a></li>
431 <li><a href="#">Something else here</a></li>
432 <li class="divider"></li>
433 <li><a href="#">Separated link</a></li>
434 <li class="divider"></li>
435 <li><a href="#">One more separated link</a></li>
439 <div class="col-md-3 dropdown">
440 <a href="#" class="btn btn-simple dropdown-toggle " data-toggle="dropdown">
441 <img src="assets/img/flags/US.png"/>
443 <b class="caret"></b>
445 <ul class="dropdown-menu">
446 <li><a href="#"><img src="assets/img/flags/DE.png"/> Deutsch</a></li>
447 <li><a href="#"><img src="assets/img/flags/GB.png"/> English(UK)</a></li>
448 <li><a href="#"><img src="assets/img/flags/FR.png"/> Français</a></li>
449 <li><a href="#"><img src="assets/img/flags/RO.png"/> Română</a></li>
450 <li><a href="#"><img src="assets/img/flags/IT.png"/> Italiano</a></li>
452 <li class="divider"></li>
453 <li><a href="#"><img src="assets/img/flags/ES.png"/> Español <span class="label label-default">soon</span></a></li>
454 <li><a href="#"><img src="assets/img/flags/BR.png"/> Português <span class="label label-default">soon</span></a></li>
455 <li><a href="#"><img src="assets/img/flags/JP.png"/> 日本語 <span class="label label-default">soon</span></a></li>
460 <pre class="prettyprint">
461 <div class="col-md-3 dropdown">
462 <a href="#" class="btn btn-simple dropdown-toggle" data-toggle="dropdown">
464 <b class="caret"></b>
466 <ul class="dropdown-menu">
467 <li><a href="#">Action</a></li>
468 <li><a href="#">Another action</a></li>
469 <li><a href="#">Something else here</a></li>
470 <li class="divider"></li>
471 <li><a href="#">Separated link</a></li>
472 <li class="divider"></li>
473 <li><a href="#">One more separated link</a></li>
481 <div class="tim-row" id="inputs-row">
486 We restyled the Bootstrap input to give it a more flat, minimal look. You can use them with regular labels, floating labels and states or input groups.
489 <div class="col-sm-4">
490 <div class="form-group">
491 <input type="text" value="" placeholder="Regular" class="form-control" />
495 <div class="col-sm-4">
496 <div class="form-group label-floating">
497 <label class="control-label">With Floating Label</label>
498 <input type="email" class="form-control">
502 <div class="col-sm-4">
503 <div class="form-group label-floating has-success">
504 <label class="control-label">Success input</label>
505 <input type="text" value="Success" class="form-control" />
506 <span class="form-control-feedback">
507 <i class="material-icons">done</i>
512 <div class="col-sm-4">
513 <div class="form-group label-floating has-error">
514 <label class="control-label">Error input</label>
515 <input type="email" value="Error Input" class="form-control" />
516 <span class="material-icons form-control-feedback">clear</span>
520 <div class="col-sm-4">
521 <div class="input-group">
522 <span class="input-group-addon">
523 <i class="material-icons">group</i>
525 <input type="text" class="form-control" placeholder="With Material Icons">
529 <div class="col-sm-4">
530 <div class="input-group">
531 <span class="input-group-addon">
532 <i class="fa fa-group"></i>
534 <input type="text" class="form-control" placeholder="With Font Awesome Icons">
540 <pre class="prettyprint">
542 <div class="col-sm-4">
543 <div class="form-group">
544 <input type="text" value="" placeholder="Regular" class="form-control" />
548 <div class="col-sm-4">
549 <div class="form-group label-floating">
550 <label class="control-label">With Floating Label</label>
551 <input type="email" class="form-control">
555 <div class="col-sm-4">
556 <div class="form-group label-floating has-success">
557 <label class="control-label">Success input</label>
558 <input type="text" value="Success" class="form-control" />
559 <span class="form-control-feedback">
560 <i class="material-icons">done</i>
565 <div class="col-sm-4">
566 <div class="form-group label-floating has-error">
567 <label class="control-label">Error input</label>
568 <input type="email" value="Error Input" class="form-control" />
569 <span class="material-icons form-control-feedback">clear</span>
573 <div class="col-sm-4">
574 <div class="input-group">
575 <span class="input-group-addon">
576 <i class="material-icons">group</i>
578 <input type="text" class="form-control" placeholder="With Material Icons">
582 <div class="col-sm-4">
583 <div class="input-group">
584 <span class="input-group-addon">
585 <i class="fa fa-group"></i>
587 <input type="text" class="form-control" placeholder="With Font Awesome Icons">
595 <!-- textarea row -->
596 <div class="tim-row" id="textarea-row">
599 <p>The textarea has a new style, so it looks similar to all other inputs.</p>
601 <textarea class="form-control" placeholder="Here can be your nice text" rows="5"></textarea>
603 <pre class="prettyprint">
604 <textarea class="form-control" placeholder="Here can be your nice text" rows="5"></textarea>
610 <div class="tim-row" id="navbar-row">
613 <p>The classic Bootstrap Navbar was restyled:</p>
616 <nav class="navbar navbar-default" role="navigation">
617 <div class="container-fluid">
618 <div class="navbar-header">
619 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
620 <span class="sr-only">Toggle navigation</span>
621 <span class="icon-bar"></span>
622 <span class="icon-bar"></span>
623 <span class="icon-bar"></span>
625 <a class="navbar-brand" href="#">Brand</a>
628 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
629 <ul class="nav navbar-nav">
630 <li class="active"><a href="#">Link</a></li>
631 <li><a href="#">Link</a></li>
632 <li class="dropdown">
633 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
634 <ul class="dropdown-menu">
635 <li><a href="#">Action</a></li>
636 <li><a href="#">Another action</a></li>
637 <li><a href="#">Something else here</a></li>
638 <li class="divider"></li>
639 <li><a href="#">Separated link</a></li>
640 <li class="divider"></li>
641 <li><a href="#">One more separated link</a></li>
648 </div><!-- end navbar -->
650 <pre class="prettyprint">
651 <nav class="navbar navbar-default" role="navigation">
652 <div class="container-fluid">
653 <div class="navbar-header">
654 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
655 <span class="sr-only">Toggle navigation</span>
656 <span class="icon-bar"></span>
657 <span class="icon-bar"></span>
658 <span class="icon-bar"></span>
660 <a class="navbar-brand" href="#">Brand</a>
663 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
664 <ul class="nav navbar-nav">
665 <li class="active"><a href="#">Link</a></li>
666 <li><a href="#">Link</a></li>
667 <li class="dropdown">
668 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
669 <ul class="dropdown-menu">
670 <li><a href="#">Action</a></li>
671 <li><a href="#">Another action</a></li>
672 <li><a href="#">Something else here</a></li>
673 <li class="divider"></li>
674 <li><a href="#">Separated link</a></li>
675 <li class="divider"></li>
676 <li><a href="#">One more separated link</a></li>
685 <p class="space-top">Besides the default navbar, we added 4 new colors: blue, green, orange, red. If you want to use one of them, you have to replace the <code>.navbar-default</code> or <code>navbar-primary</code> with the class for the chosen color <code>.navbar-info</code>, <code>.navbar-success</code>, <code>.navbar-warning</code>, <code>.navbar-danger</code>.</p>
687 <!-- navbar default -->
688 <div id="navbar-default">
689 <nav class="navbar navbar-default" role="navigation">
690 <div class="container-fluid">
691 <!-- Brand and toggle get grouped for better mobile display -->
692 <div class="navbar-header">
693 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
694 <span class="sr-only">Toggle navigation</span>
695 <span class="icon-bar"></span>
696 <span class="icon-bar"></span>
697 <span class="icon-bar"></span>
699 <a class="navbar-brand" href="#">Brand</a>
702 <!-- Collect the nav links, forms, and other content for toggling -->
703 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
704 <ul class="nav navbar-nav">
705 <li class="active"><a href="#">Link</a></li>
706 <li><a href="#">Link</a></li>
707 <li class="dropdown">
708 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
709 <ul class="dropdown-menu">
710 <li><a href="#">Action</a></li>
711 <li><a href="#">Another action</a></li>
712 <li><a href="#">Something else here</a></li>
713 <li class="divider"></li>
714 <li><a href="#">Separated link</a></li>
715 <li class="divider"></li>
716 <li><a href="#">One more separated link</a></li>
724 </div><!-- end navbar -->
727 <div id="navbar-info">
728 <nav class="navbar navbar-info" role="navigation">
729 <div class="container-fluid">
730 <!-- Brand and toggle get grouped for better mobile display -->
731 <div class="navbar-header">
732 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
733 <span class="sr-only">Toggle navigation</span>
734 <span class="icon-bar"></span>
735 <span class="icon-bar"></span>
736 <span class="icon-bar"></span>
738 <a class="navbar-brand" href="#">Brand</a>
741 <!-- Collect the nav links, forms, and other content for toggling -->
742 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
743 <ul class="nav navbar-nav">
744 <li class="active"><a href="#">Link</a></li>
745 <li><a href="#">Link</a></li>
746 <li class="dropdown">
747 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
748 <ul class="dropdown-menu">
749 <li><a href="#">Action</a></li>
750 <li><a href="#">Another action</a></li>
751 <li><a href="#">Something else here</a></li>
752 <li class="divider"></li>
753 <li><a href="#">Separated link</a></li>
754 <li class="divider"></li>
755 <li><a href="#">One more separated link</a></li>
759 </div><!-- /.navbar-collapse -->
760 </div><!-- /.container-fluid -->
763 </div><!-- end navbar -->
765 <!-- navbar success -->
766 <div id="navbar-success">
767 <nav class="navbar navbar-success" role="navigation">
768 <div class="container-fluid">
769 <!-- Brand and toggle get grouped for better mobile display -->
770 <div class="navbar-header">
771 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
772 <span class="sr-only">Toggle navigation</span>
773 <span class="icon-bar"></span>
774 <span class="icon-bar"></span>
775 <span class="icon-bar"></span>
777 <a class="navbar-brand" href="#">Brand</a>
780 <!-- Collect the nav links, forms, and other content for toggling -->
781 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
782 <ul class="nav navbar-nav">
783 <li class="active"><a href="#">Link</a></li>
784 <li><a href="#">Link</a></li>
785 <li class="dropdown">
786 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
787 <ul class="dropdown-menu">
788 <li><a href="#">Action</a></li>
789 <li><a href="#">Another action</a></li>
790 <li><a href="#">Something else here</a></li>
791 <li class="divider"></li>
792 <li><a href="#">Separated link</a></li>
793 <li class="divider"></li>
794 <li><a href="#">One more separated link</a></li>
798 </div><!-- /.navbar-collapse -->
799 </div><!-- /.container-fluid -->
802 </div><!-- end navbar -->
804 <!-- navbar warning -->
805 <div id="navbar-warning">
806 <nav class="navbar navbar-warning" role="navigation">
807 <div class="container-fluid">
808 <!-- Brand and toggle get grouped for better mobile display -->
809 <div class="navbar-header">
810 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
811 <span class="sr-only">Toggle navigation</span>
812 <span class="icon-bar"></span>
813 <span class="icon-bar"></span>
814 <span class="icon-bar"></span>
816 <a class="navbar-brand" href="#">Brand</a>
819 <!-- Collect the nav links, forms, and other content for toggling -->
820 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
821 <ul class="nav navbar-nav">
822 <li class="active"><a href="#">Link</a></li>
823 <li><a href="#">Link</a></li>
824 <li class="dropdown">
825 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
826 <ul class="dropdown-menu">
827 <li><a href="#">Action</a></li>
828 <li><a href="#">Another action</a></li>
829 <li><a href="#">Something else here</a></li>
830 <li class="divider"></li>
831 <li><a href="#">Separated link</a></li>
832 <li class="divider"></li>
833 <li><a href="#">One more separated link</a></li>
837 </div><!-- /.navbar-collapse -->
838 </div><!-- /.container-fluid -->
841 </div><!-- end navbar -->
843 <!-- navbar danger -->
844 <div id="navbar-danger">
845 <nav class="navbar navbar-danger" role="navigation">
846 <div class="container-fluid">
847 <!-- Brand and toggle get grouped for better mobile display -->
848 <div class="navbar-header">
849 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
850 <span class="sr-only">Toggle navigation</span>
851 <span class="icon-bar"></span>
852 <span class="icon-bar"></span>
853 <span class="icon-bar"></span>
855 <a class="navbar-brand" href="#">Brand</a>
858 <!-- Collect the nav links, forms, and other content for toggling -->
859 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
860 <ul class="nav navbar-nav">
861 <li class="active"><a href="#">Link</a></li>
862 <li><a href="#">Link</a></li>
863 <li class="dropdown">
864 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
865 <ul class="dropdown-menu">
866 <li><a href="#">Action</a></li>
867 <li><a href="#">Another action</a></li>
868 <li><a href="#">Something else here</a></li>
869 <li class="divider"></li>
870 <li><a href="#">Separated link</a></li>
871 <li class="divider"></li>
872 <li><a href="#">One more separated link</a></li>
876 </div><!-- /.navbar-collapse -->
877 </div><!-- /.container-fluid -->
880 </div><!-- end navbar -->
882 <p class="space-top">
883 Besides all this customisation, we have an extra navbar. <code>.navbar-transparent</code> is a special class that you can to use if you want the navbar to be transparent and then turn to color after scrolling 260px using the class <code>.navbar-color-on-scroll</code>. We recommend that the part of your page that has the transparent navbar contains something non-cluttered, like an image. If you want to see a nice example in details, check <a href="examples/profile-page.html" target="_blank">the Profile Page</a>.
889 <!-- nav pills row -->
890 <div class="tim-row" id="navpills-row">
894 We changed the design for the Bootstrap nav pills into something a bit more fresh. We also added more color classes for customisation like <code>.nav-pills-primary</code>,<code>.nav-pills-info</code>,<code>.nav-pills-success</code>,<code>.nav-pills-warning</code>,<code>.nav-pills-danger</code>
897 <ul class="nav nav-pills nav-pills-primary" role="tablist">
899 <a href="#dashboard" role="tab" data-toggle="tab">
900 <i class="material-icons">dashboard</i>
905 <a href="#schedule" role="tab" data-toggle="tab">
906 <i class="material-icons">schedule</i>
911 <a href="#tasks" role="tab" data-toggle="tab">
912 <i class="material-icons">list</i>
918 <ul class="nav nav-pills nav-pills-info" role="tablist">
920 <a href="#dashboard" role="tab" data-toggle="tab">
921 <i class="material-icons">dashboard</i>
926 <a href="#schedule" role="tab" data-toggle="tab">
927 <i class="material-icons">schedule</i>
932 <a href="#tasks" role="tab" data-toggle="tab">
933 <i class="material-icons">list</i>
939 <ul class="nav nav-pills nav-pills-success" role="tablist">
941 <a href="#dashboard" role="tab" data-toggle="tab">
942 <i class="material-icons">dashboard</i>
947 <a href="#schedule" role="tab" data-toggle="tab">
948 <i class="material-icons">schedule</i>
953 <a href="#tasks" role="tab" data-toggle="tab">
954 <i class="material-icons">list</i>
960 <ul class="nav nav-pills nav-pills-warning" role="tablist">
962 <a href="#dashboard" role="tab" data-toggle="tab">
963 <i class="material-icons">dashboard</i>
968 <a href="#schedule" role="tab" data-toggle="tab">
969 <i class="material-icons">schedule</i>
974 <a href="#tasks" role="tab" data-toggle="tab">
975 <i class="material-icons">list</i>
981 <ul class="nav nav-pills nav-pills-danger" role="tablist">
983 <a href="#dashboard" role="tab" data-toggle="tab">
984 <i class="material-icons">dashboard</i>
989 <a href="#schedule" role="tab" data-toggle="tab">
990 <i class="material-icons">schedule</i>
995 <a href="#tasks" role="tab" data-toggle="tab">
996 <i class="material-icons">list</i>
1002 <pre class="prettyprint">
1003 <ul class="nav nav-pills nav-pills-primary" role="tablist">
1005 <a href="#dashboard" role="tab" data-toggle="tab">
1006 <i class="material-icons">dashboard</i>
1010 <li class="active">
1011 <a href="#schedule" role="tab" data-toggle="tab">
1012 <i class="material-icons">schedule</i>
1017 <a href="#tasks" role="tab" data-toggle="tab">
1018 <i class="material-icons">list</i>
1027 <!-- pagination row -->
1028 <div class="tim-row" id="pagination-row">
1031 <p>The Bootstrap pagination elements were customised to fit the overall theme. Besides the classic look, we also added the color classes to offer more customisation like <code>.pagination-info</code>, <code>.pagination-success</code>, <code>.pagination-warning</code>, <code>.pagination-danger</code>.
1033 <ul class="pagination pagination-primary">
1034 <li><a href="#"><</a></li>
1035 <li class="active"><a href="#">1</a></li>
1036 <li><a href="#">2</a></li>
1037 <li><a href="#">3</a></li>
1038 <li><a href="#">4</a></li>
1039 <li><a href="#">5</a></li>
1040 <li><a href="#">></a></li>
1043 <ul class="pagination pagination-info">
1044 <li><a href="#"><</a></li>
1045 <li><a href="#">1</a></li>
1046 <li class="active"><a href="#">2</a></li>
1047 <li><a href="#">3</a></li>
1048 <li><a href="#">4</a></li>
1049 <li><a href="#">5</a></li>
1050 <li><a href="#">></a></li>
1053 <ul class="pagination pagination-success">
1054 <li><a href="#"><</a></li>
1055 <li><a href="#">1</a></li>
1056 <li><a href="#">2</a></li>
1057 <li class="active"><a href="#">3</a></li>
1058 <li><a href="#">4</a></li>
1059 <li><a href="#">5</a></li>
1060 <li><a href="#">></a></li>
1063 <ul class="pagination pagination-warning">
1064 <li><a href="#"><</a></li>
1065 <li><a href="#">1</a></li>
1066 <li><a href="#">2</a></li>
1067 <li><a href="#">3</a></li>
1068 <li class="active"><a href="#">4</a></li>
1069 <li><a href="#">5</a></li>
1070 <li><a href="#">></a></li>
1073 <ul class="pagination pagination-danger">
1074 <li><a href="#"><</a></li>
1075 <li><a href="#">1</a></li>
1076 <li><a href="#">2</a></li>
1077 <li><a href="#">3</a></li>
1078 <li><a href="#">4</a></li>
1079 <li class="active"><a href="#">5</a></li>
1080 <li><a href="#">></a></li>
1083 <pre class="prettyprint">
1085 <ul class="pagination pagination-primary">
1086 <li><a href="#"><</a></li>
1087 <li><a href="#">1</a></li>
1088 <li><a href="#">2</a></li>
1089 <li class="active"><a href="#">3</a></li>
1090 <li><a href="#">4</a></li>
1091 <li><a href="#">5</a></li>
1092 <li><a href="#">></a></li>
1098 <!-- progressbar row -->
1099 <div class="tim-row" id="progressbar-row">
1100 <h2>Progress Bars</h2>
1103 <p>The progress bars from Bootstrap hold the same classes and functionality. Adding this kit over your existing project will only make it look more clean. The default line is gray, each bar has a specific color but you can add some colors for the background lines using the next classes <code>.progress-line-primary</code>, <code>.progress-line-info</code>, <code>.progress-line-success</code>, <code>.progress-line-warning</code>, <code>.progress-line-danger</code>, </p>
1104 <div class="progress">
1105 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
1106 <span class="sr-only">60% Complete</span>
1109 <div class="progress">
1110 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
1111 <span class="sr-only">60% Complete</span>
1114 <div class="progress progress-line-primary">
1115 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
1116 <span class="sr-only">60% Complete</span>
1119 <div class="progress progress-line-info">
1120 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
1121 <span class="sr-only">60% Complete</span>
1124 <div class="progress">
1125 <div class="progress-bar progress-bar-success" style="width: 35%">
1126 <span class="sr-only">35% Complete (success)</span>
1128 <div class="progress-bar progress-bar-warning" style="width: 20%">
1129 <span class="sr-only">20% Complete (warning)</span>
1131 <div class="progress-bar progress-bar-danger" style="width: 10%">
1132 <span class="sr-only">10% Complete (danger)</span>
1136 <pre class="prettyprint">
1137 <div class="progress">
1138 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
1139 <span class="sr-only">30% Complete</span>
1142 <div class="progress">
1143 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
1144 <span class="sr-only">60% Complete</span>
1148 <div class="progress progress-line-primary">
1149 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
1150 <span class="sr-only">30% Complete</span>
1153 <div class="progress progress-line-info">
1154 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
1155 <span class="sr-only">60% Complete</span>
1159 <div class="progress">
1160 <div class="progress-bar progress-bar-success" style="width: 35%">
1161 <span class="sr-only">35% Complete (success)</span>
1163 <div class="progress-bar progress-bar-warning" style="width: 20%">
1164 <span class="sr-only">20% Complete (warning)</span>
1166 <div class="progress-bar progress-bar-danger" style="width: 10%">
1167 <span class="sr-only">10% Complete (danger)</span>
1174 <!-- sliders row -->
1175 <div class="tim-row" id="sliders-row">
1178 <p>We restyled noUIslider, while keeping the design consistent. You can use other classes for colors like <code>.slider-info</code>, <code>.slider-success</code>, <code>.slider-warning</code>, <code>.slider-danger</code>, . Check also <a href="http://refreshless.com/nouislider/" target="_blank">noUISlider Full Documentation</a>.</p>
1180 <div id="sliderRegular" class="slider"></div>
1182 <div id="sliderDouble" class="slider slider-info"></div>
1185 <pre class="prettyprint">
1186 <!-- Markup -->
1187 <div id="sliderRegular" class="slider"></div>
1188 <div id="sliderDouble" class="slider slider-info"></div>
1190 <!-- Javascript -->
1191 $('#sliderRegular').noUiSlider({
1193 connect: "lower",
1200 $('#sliderDouble').noUiSlider({
1213 <div class="tim-row" id="labels-row">
1216 <p>We restyled the default options for labels and we added the filled class, that can be used in any combination.</p>
1217 <span class="label label-default">Default</span>
1218 <span class="label label-primary">Primary</span>
1219 <span class="label label-success">Success</span>
1220 <span class="label label-info">Info</span>
1221 <span class="label label-warning">Warning</span>
1222 <span class="label label-danger">Danger</span>
1224 <pre class="prettyprint">
1226 <span class="label label-default">Default</span>
1227 <span class="label label-primary">Primary</span>
1228 <span class="label label-success">Success</span>
1229 <span class="label label-info">Info</span>
1230 <span class="label label-warning">Warning</span>
1231 <span class="label label-danger">Danger</span>
1242 <div class="tim-row" id="tables-row">
1245 <p>All Boostrap classes for tables are supported and improved.</p>
1246 <h4>Simple Table with Actions</h4>
1247 <div class="table-responsive">
1248 <table class="table">
1251 <th class="text-center">#</th>
1253 <th>Job Position</th>
1255 <th class="text-right">Salary</th>
1256 <th class="text-right">Actions</th>
1261 <td class="text-center">1</td>
1262 <td>Andrew Mike</td>
1265 <td class="text-right">€ 99,225</td>
1266 <td class="td-actions text-right">
1267 <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">
1268 <i class="fa fa-user"></i>
1270 <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
1271 <i class="fa fa-edit"></i>
1273 <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
1274 <i class="fa fa-times"></i>
1279 <td class="text-center">2</td>
1283 <td class="text-right">€ 89,241</td>
1284 <td class="td-actions text-right">
1285 <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">
1286 <i class="fa fa-user"></i>
1288 <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
1289 <i class="fa fa-edit"></i>
1291 <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
1292 <i class="fa fa-times"></i>
1297 <td class="text-center">3</td>
1301 <td class="text-right">€ 92,144</td>
1302 <td class="td-actions text-right">
1303 <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">
1304 <i class="fa fa-user"></i>
1306 <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
1307 <i class="fa fa-edit"></i>
1309 <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
1310 <i class="fa fa-times"></i>
1318 <pre class="prettyprint">
1320 <table class="table">
1323 <th class="text-center">#</th>
1324 <th>Name</th>
1325 <th>Job Position</th>
1326 <th>Since</th>
1327 <th class="text-right">Salary</th>
1328 <th class="text-right">Actions</th>
1333 <td class="text-center">1</td>
1334 <td>Andrew Mike</td>
1335 <td>Develop</td>
1336 <td>2013</td>
1337 <td class="text-right">&euro; 99,225</td>
1338 <td class="td-actions text-right">
1339 <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">
1340 <i class="fa fa-user"></i>
1342 <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
1343 <i class="fa fa-edit"></i>
1345 <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
1346 <i class="fa fa-times"></i>
1351 <td class="text-center">2</td>
1352 <td>John Doe</td>
1353 <td>Design</td>
1354 <td>2012</td>
1355 <td class="text-right">&euro; 89,241</td>
1356 <td class="td-actions text-right">
1357 <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">
1358 <i class="fa fa-user"></i>
1360 <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
1361 <i class="fa fa-edit"></i>
1363 <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
1364 <i class="fa fa-times"></i>
1369 <td class="text-center">3</td>
1370 <td>Alex Mike</td>
1371 <td>Design</td>
1372 <td>2010</td>
1373 <td class="text-right">&euro; 92,144</td>
1374 <td class="td-actions text-right">
1375 <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">
1376 <i class="fa fa-user"></i>
1378 <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
1379 <i class="fa fa-edit"></i>
1381 <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
1382 <i class="fa fa-times"></i>
1396 <!-- datepicker row -->
1397 <div class="tim-row" id="datepicker-row">
1400 <p>The re-styled the Bootstrap datepicker. Checkout the <a href="http://www.eyecon.ro/bootstrap-datepicker/" target="_blank">Bootstrap Datepicker Full Documentation</a>.</p>
1402 <div class="col-md-4">
1403 <input class="datepicker form-control" type="text" value="03/12/2016"/>
1406 <pre class="prettyprint">
1407 <!-- markup -->
1408 <input class="datepicker form-control" type="text" value="03/12/2016"/>
1410 <!-- javascript -->
1412 $('.datepicker').datepicker({
1421 <div class="tim-row" id="modal-row">
1424 <p>We restyled the classic Bootstrap Modal and gave it a more simple look.<br />
1425 <b>IMPORTANT!</b> Please make sure you place the modal body outside of the <code>div.wrapper</code> tag.
1427 <!-- Button trigger modal -->
1428 <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
1430 <pre class="prettyprint">
1432 <!-- Button trigger modal -->
1433 <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
1437 <!-- Modal Core -->
1438 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
1439 <div class="modal-dialog">
1440 <div class="modal-content">
1441 <div class="modal-header">
1442 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
1443 <h4 class="modal-title" id="myModalLabel">Modal title</h4>
1445 <div class="modal-body">
1446 Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
1448 <div class="modal-footer">
1449 <button type="button" class="btn btn-default btn-simple" data-dismiss="modal">Close</button>
1450 <button type="button" class="btn btn-info btn-simple">Save</button>
1460 <!-- tooltip row -->
1461 <div class="tim-row" id="tooltip-row">
1464 <p style="margin-bottom: 45px;">We restyled the Bootstrap tooltip.</p>
1465 <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Button with Tooltip</button>
1467 <pre class="prettyprint">
1468 <!-- Markup -->
1469 <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Button with Tooltip</button>
1471 <!-- Javascript -->
1472 $('[data-toggle="tooltip"]').tooltip();
1478 <!-- popover row -->
1479 <div class="tim-row" id="popover-row">
1483 We restyled the Bootstrap popover to align with the Material Design Concept. <br />
1484 See the following example:
1486 <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="Popover on top" data-content="Here will be some very useful information about his popover.">On top</button>
1487 <pre class="prettyprint">
1488 <!-- markup -->
1490 <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="Popover on top" data-content="Here will be some very useful information about his popover.">On top</button>
1493 <!-- javascript -->
1495 $('[data-toggle="popover"]').popover();
1500 <!-- popover row -->
1501 <div class="tim-row" id="icons-row">
1502 <h2>Material Icons</h2>
1505 We used the default <a href="https://design.google.com/icons/" target="_blank">Icons for the Material Design</a> which provided by Google.
1507 <i class="material-icons">face</i>
1508 <pre class="prettyprint">
1510 <i class="material-icons">face</i>
1516 <!-- notification row -->
1517 <div class="tim-row" id="notification-row">
1518 <h2> Notifications </h2>
1520 <p>The new notifications are looking fresh and clean. They go great with the navbar. For these notifications examples we used the <code>.container-fluid</code> class, so they will be fluid, please use the class <code>.container</code> when you use them outside of the <code>.wrapper</code> so they will be alignd with the general page container.</p>
1522 <div class="alert alert-info">
1523 <div class="container-fluid">
1524 <div class="alert-icon">
1525 <i class="material-icons">info_outline</i>
1527 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1528 <span aria-hidden="true"><i class="material-icons">clear</i></span>
1531 <b>Info alert:</b> You've got some friends nearby, stop looking at your phone and find them...
1534 <div class="alert alert-success">
1535 <div class="container-fluid">
1536 <div class="alert-icon">
1537 <i class="material-icons">check</i>
1539 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1540 <span aria-hidden="true"><i class="material-icons">clear</i></span>
1542 <b>Success Alert:</b> Yuhuuu! You've got your $11.99 album from The Weeknd
1545 <div class="alert alert-warning">
1546 <div class="container-fluid">
1547 <div class="alert-icon">
1548 <i class="material-icons">warning</i>
1550 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1551 <span aria-hidden="true"><i class="material-icons">clear</i></span>
1553 <b>Warning Alert:</b> Hey, it looks like you still have the "copyright © 2015" in your footer. Please update it!
1556 <div class="alert alert-danger">
1557 <div class="container-fluid">
1558 <div class="alert-icon">
1559 <i class="material-icons">error_outline</i>
1561 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1562 <span aria-hidden="true"><i class="material-icons">clear</i></span>
1564 <b>Error Alert:</b> Damn man! You screwed up the server this time. You should find a good excuse for your Boss...
1568 <pre class="prettyprint">
1569 <div class="alert alert-info">
1570 <div class="container-fluid">
1571 <div class="alert-icon">
1572 <i class="material-icons">info_outline</i>
1574 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1575 <span aria-hidden="true"><i class="material-icons">clear</i></span>
1577 <b>Info alert:</b> You've got some friends nearby, stop looking at your phone and find them...
1581 <div class="alert alert-success">
1582 <div class="container-fluid">
1583 <div class="alert-icon">
1584 <i class="material-icons">check</i>
1586 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1587 <span aria-hidden="true"><i class="material-icons">clear</i></span>
1589 <b>Success Alert:</b> Yuhuuu! You've got your $11.99 album from The Weeknd
1593 <div class="alert alert-warning">
1594 <div class="container-fluid">
1595 <div class="alert-icon">
1596 <i class="material-icons">warning</i>
1598 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1599 <span aria-hidden="true"><i class="material-icons">clear</i></span>
1601 <b>Warning Alert:</b> Hey, it looks like you still have the "copyright &copy; 2015" in your footer. Please update it!
1605 <div class="alert alert-danger">
1606 <div class="container-fluid">
1607 <div class="alert-icon">
1608 <i class="material-icons">error_outline</i>
1610 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1611 <span aria-hidden="true"><i class="material-icons">clear</i></span>
1613 <b>Error Alert:</b> Damn man! You screwed up the server this time. You should find a good excuse for your Boss...
1620 <!-- end container -->
1627 <footer class="footer footer-transparent">
1628 <div class="container">
1629 <nav class="pull-left">
1632 <a href="http://www.creative-tim.com">
1637 <a href="http://presentation.creative-tim.com">
1642 <a href="http://blog.creative-tim.com">
1647 <a href="http://www.creative-tim.com/license">
1653 <div class="social-area pull-right">
1654 <a class="btn btn-social btn-twitter btn-simple" href="https://twitter.com/CreativeTim">
1655 <i class="fa fa-twitter"></i>
1657 <a class="btn btn-social btn-facebook btn-simple" href="https://www.facebook.com/CreativeTim">
1658 <i class="fa fa-facebook-square"></i>
1660 <a class="btn btn-social btn-google btn-simple" href="https://plus.google.com/+CreativetimPage">
1661 <i class="fa fa-google-plus"></i>
1664 <div class="copyright">
1665 © 2016 Creative Tim, made with love
1673 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
1674 <div class="modal-dialog">
1675 <div class="modal-content">
1676 <div class="modal-header">
1677 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
1678 <h4 class="modal-title" id="myModalLabel">Modal title</h4>
1680 <div class="modal-body">
1681 Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
1683 <div class="modal-footer">
1684 <button type="button" class="btn btn-default btn-simple" data-dismiss="modal">Close</button>
1685 <button type="button" class="btn btn-info btn-simple">Save</button>
1693 <!-- Core JS Files -->
1694 <script src="assets/js/jquery.min.js" type="text/javascript"></script>
1695 <script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
1696 <script src="assets/js/material.min.js"></script>
1698 <!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
1699 <script src="assets/js/nouislider.min.js" type="text/javascript"></script>
1701 <!-- Plugin for the Datepicker, full documentation here: http://www.eyecon.ro/bootstrap-datepicker/ -->
1702 <script src="assets/js/bootstrap-datepicker.js" type="text/javascript"></script>
1704 <!-- Control Center for Material Kit: activating the ripples, parallax effects, scripts from the example pages etc -->
1705 <script src="assets/js/material-kit.js" type="text/javascript"></script>
1710 var floating = false;
1712 $().ready(function(){
1713 suggestions_distance = $("#suggestions").offset();
1714 pay_height = $('.fixed-section').outerHeight();
1716 $(window).on('scroll', materialKit.checkScrollForTransparentNavbar);
1718 // the body of this function is in assets/material-kit.js
1719 materialKit.initSliders();