git.roojs.org Git - bootswatch/blob - material-kit/components-documentation.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   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" />
   8
   9         <title>Components Documentation - Material Kit by Creative Tim</title>
  10
  11         <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
  12
  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" />
  17
  18         <!-- CSS Files -->
  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" />
  22
  23     <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
  24
  25         <style>
  26                 pre.prettyprint{
  27                     background-color: #eee;
  28                     border: 0px;
  29                     margin-bottom: 60px;
  30                     margin-top: 30px;
  31                     padding: 20px;
  32                     text-align: left;
  33                 }
  34                 .atv, .str{
  35                     color: #05AE0E;
  36                 }
  37                 .tag, .pln, .kwd{
  38                     color: #3472F7;
  39                 }
  40                 .atn{
  41                     color: #2C93FF;
  42                 }
  43                 .pln{
  44                     color: #333;
  45                 }
  46                 .com{
  47                     color: #999;
  48                 }
  49                 .space-top{
  50                     margin-top: 50px;
  51                 }
  52                 .btn-primary .caret{
  53                     border-top-color: #3472F7;
  54                     color: #3472F7;
  55                 }
  56                 .area-line{
  57                     border: 1px solid #999;
  58                     border-left: 0;
  59                     border-right: 0;
  60                     color: #666;
  61                     display: block;
  62                     margin-top: 20px;
  63                     padding: 8px 0;
  64                     text-align: center;
  65                 }
  66                 .area-line a{
  67                     color: #666;
  68                 }
  69                 .container-fluid{
  70                     padding-right: 15px;
  71                     padding-left: 15px;
  72                 }
  73                 .table-shopping .td-name{
  74                         min-width: 130px;
  75                 }
  76         </style>
  77 </head>
  78
  79 <body class="components-page">
  80
  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>
  90       </button>
  91       <a href="http://www.creative-tim.com">
  92            <div class="logo-container">
  93                 <div class="logo">
  94                     <img src="assets/img/logo.png" alt="Creative Tim Logo">
  95                 </div>
  96                 <div class="brand">
  97                     Creative Tim
  98                 </div>
  99             </div>
 100       </a>
 101     </div>
 102
 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">
 106                         <li>
 107                                 <a href="index.html">Back to Kit</a>
 108                         </li>
 109                         <li>
 110                 <a href="https://github.com/timcreative/material-kit/issues">Have an issue?</a>
 111             </li>
 112                         <li>
 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
 115                                 </a>
 116                         </li>
 117         </ul>
 118
 119     </div><!-- /.navbar-collapse -->
 120   </div><!-- /.container-fluid -->
 121 </nav>
 122
 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">
 126                         <div class="row">
 127                                 <div class="col-md-6 col-md-offset-3">
 128                                         <h1 class="title text-center">Components Documentation</h1>
 129                                 </div>
 130                         </div>
 131                 </div>
 132         </div>
 133
 134     <div class="main main-raised">
 135         <div class="section">
 136     <div class="container">
 137         <div class="row">
 138             <div class="col-md-2">
 139                 <div class="fixed-section" data-spy="affix" data-offset-top="340">
 140                     <ul>
 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>
 157
 158                     </ul>
 159                 </div>
 160             </div>
 161             <div class="col-md-8 col-md-offset-1">
 162                 <div class="tim-container">
 163
 164                 <!-- buttons row -->
 165                 <div class="tim-row" id="buttons-row">
 166
 167                 <h2>Buttons</h2>
 168                 <legend></legend>
 169                 <h4>Colors</h4>
 170                 <p>We worked over the original Bootstrap classes, choosing a different, slightly intenser color pallete:</p>
 171                 <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>
 179                 </p>
 180
 181                         <pre class="prettyprint">
 182
 183 &lt;button class=&quot;btn btn-default&quot;&gt;Default&lt;/button&gt;
 184 &lt;button class=&quot;btn btn-primary&quot;&gt;Primary&lt;/button&gt;
 185 &lt;button class=&quot;btn btn-info&quot;&gt;Info&lt;/button&gt;
 186 &lt;button class=&quot;btn btn-success&quot;&gt;Success&lt;/button&gt;
 187 &lt;button class=&quot;btn btn-warning&quot;&gt;Warning&lt;/button&gt;
 188 &lt;button class=&quot;btn btn-danger&quot;&gt;Danger&lt;/button&gt;
 189 &lt;button class=&quot;btn btn-white&quot;&gt;White&lt;/button&gt;
 190                         </pre>
 191
 192
 193                 <h4>Sizes</h4>
 194                 <p>Buttons come in all needed sizes:</p>
 195                 <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>
 200                 </p>
 201
 202                                 <pre class="prettyprint">
 203
 204 &lt;button class=&quot;btn btn-primary btn-lg&quot;&gt;Large&lt;/button&gt;
 205 &lt;button class=&quot;btn btn-primary&quot;&gt;Normal&lt;/button&gt;
 206 &lt;button class=&quot;btn btn-primary btn-sm&quot;&gt;Small&lt;/button&gt;
 207 &lt;button class=&quot;btn btn-primary btn-xs&quot;&gt;Extra Small&lt;/button&gt;
 208                         </pre>
 209
 210                                 <h4>Styles</h4>
 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:
 212                 </p>
 213                                 <p>
 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
 218                                         </button>
 219                                         <button class="btn btn-primary btn-fab btn-fab-mini btn-round">
 220                                                 <i class="material-icons">favorite</i>
 221                                         </button>
 222                                         <button class="btn btn-primary btn-just-icon">
 223                                                 <i class="material-icons">favorite</i>
 224                                         </button>
 225                                         <button class="btn btn-primary btn-simple">Simple</button>
 226
 227                 </p>
 228
 229                         <pre class="prettyprint">
 230 &lt;button class=&quot;btn btn-primary&quot;&gt;Default&lt;/button&gt;
 231 &lt;button class=&quot;btn btn-primary btn-round&quot;&gt;Round&lt;/button&gt;
 232 &lt;button class=&quot;btn btn-primary btn-round&quot;&gt;
 233         &lt;i class=&quot;material-icons&quot;&gt;favorite&lt;/i&gt; With Icon
 234 &lt;/button&gt;
 235 &lt;button class=&quot;btn btn-primary btn-fab btn-fab-mini btn-round&quot;&gt;
 236         &lt;i class=&quot;material-icons&quot;&gt;favorite&lt;/i&gt;
 237 &lt;/button&gt;
 238 &lt;button class=&quot;btn btn-primary btn-just-icon&quot;&gt;
 239         &lt;i class=&quot;material-icons&quot;&gt;favorite&lt;/i&gt;
 240 &lt;/button&gt;
 241 &lt;button class=&quot;btn btn-primary btn-simple&quot;&gt;Simple&lt;/button&gt;
 242                         </pre>
 243
 244                 <p>
 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>.
 246                 </p>
 247                 </div>
 248                 <!--  end row -->
 249
 250                 <!-- checkbox row -->
 251                 <div class="tim-row" id="checkbox-row">
 252                 <h2> Checkboxes </h2>
 253                 <legend></legend>
 254                 <p>
 255                     To use the custom checkboxes, you don't need to import any separate Javascript file, everything is inside material.min.js
 256                 </p>
 257                 <p>
 258                                         <div class="checkbox">
 259                                                 <label>
 260                                                         <input type="checkbox" name="optionsCheckboxes">
 261                                                         Unchecked
 262                                                 </label>
 263                                         </div>
 264                                         <div class="checkbox">
 265                                                 <label>
 266                                                         <input type="checkbox" name="optionsCheckboxes" checked>
 267                                                         Checked
 268                                                 </label>
 269                                         </div>
 270                                         <div class="checkbox">
 271                                                 <label>
 272                                                         <input type="checkbox" name="optionsCheckboxes" disabled>
 273                                                         Disabled Unchecked
 274                                                 </label>
 275                                         </div>
 276                                         <div class="checkbox">
 277                                                 <label>
 278                                                         <input type="checkbox" name="optionsCheckboxes" disabled checked>
 279                                                         Disabled Checked
 280                                                 </label>
 281                                         </div>
 282                 </p>
 283
 284                         <pre class="prettyprint">
 285 &lt;div class=&quot;checkbox&quot;&gt;
 286         &lt;label&gt;
 287                 &lt;input type=&quot;checkbox&quot; name=&quot;optionsCheckboxes&quot;&gt;
 288                 Unchecked
 289         &lt;/label&gt;
 290 &lt;/div&gt;
 291 &lt;div class=&quot;checkbox&quot;&gt;
 292         &lt;label&gt;
 293                 &lt;input type=&quot;checkbox&quot; name=&quot;optionsCheckboxes&quot; checked&gt;
 294                 Checked
 295         &lt;/label&gt;
 296 &lt;/div&gt;
 297 &lt;div class=&quot;checkbox&quot;&gt;
 298         &lt;label&gt;
 299                 &lt;input type=&quot;checkbox&quot; name=&quot;optionsCheckboxes&quot; disabled&gt;
 300                 Disabled Unchecked
 301         &lt;/label&gt;
 302 &lt;/div&gt;
 303 &lt;div class=&quot;checkbox&quot;&gt;
 304         &lt;label&gt;
 305                 &lt;input type=&quot;checkbox&quot; name=&quot;optionsCheckboxes&quot; disabled checked&gt;
 306                 Disabled Checked
 307         &lt;/label&gt;
 308 &lt;/div&gt;
 309
 310                                 </pre>
 311                 </div>
 312                 <!-- end row -->
 313
 314                 <!-- radio row -->
 315                 <div class="tim-row" id="radio-row">
 316                 <h2> Radio Buttons </h2>
 317                 <legend></legend>
 318                 <p>
 319                     To use the custom radio buttons, you don't need to import any separate Javascript file, everything is inside material.min.js.
 320                 </p>
 321                 <p>
 322                                         <div class="radio">
 323                                                 <label>
 324                                                         <input type="radio" name="optionsRadios">
 325                                                         Radio is off
 326                                                 </label>
 327                                         </div>
 328                                         <div class="radio">
 329                                                 <label>
 330                                                         <input type="radio" name="optionsRadios" checked="true">
 331                                                         Radio is on
 332                                                 </label>
 333                                         </div>
 334                                         <div class="radio">
 335                                                 <label>
 336                                                         <input type="radio" name="optionsRadiosDisabled" disabled>
 337                                                         Disabled Radio is off
 338                                                 </label>
 339                                         </div>
 340                                         <div class="radio">
 341                                                 <label>
 342                                                         <input type="radio" name="optionsRadiosDisabled" checked="true" disabled>
 343                                                         Disabled Radio is on
 344                                                 </label>
 345                                         </div>
 346                 </p>
 347
 348                                 <pre class="prettyprint">
 349 &lt;div class=&quot;radio&quot;&gt;
 350         &lt;label&gt;
 351                 &lt;input type=&quot;radio&quot; name=&quot;optionsRadios&quot;&gt;
 352                 Radio is off
 353         &lt;/label&gt;
 354 &lt;/div&gt;
 355 &lt;div class=&quot;radio&quot;&gt;
 356         &lt;label&gt;
 357                 &lt;input type=&quot;radio&quot; name=&quot;optionsRadios&quot; checked=&quot;true&quot;&gt;
 358                 Radio is on
 359         &lt;/label&gt;
 360 &lt;/div&gt;
 361 &lt;div class=&quot;radio&quot;&gt;
 362         &lt;label&gt;
 363                 &lt;input type=&quot;radio&quot; name=&quot;optionsRadiosDisabled&quot; disabled&gt;
 364                 Disabled Radio is off
 365         &lt;/label&gt;
 366 &lt;/div&gt;
 367 &lt;div class=&quot;radio&quot;&gt;
 368         &lt;label&gt;
 369                 &lt;input type=&quot;radio&quot; name=&quot;optionsRadiosDisabled&quot; checked=&quot;true&quot; disabled&gt;
 370                 Disabled Radio is on
 371         &lt;/label&gt;
 372 &lt;/div&gt;
 373                         </pre>
 374                     </div>
 375                     <!-- end row -->
 376
 377                 <!-- switches row -->
 378                 <div class="tim-row" id="switch-row">
 379                 <h2>Toggle Buttons</h2>
 380                 <legend></legend>
 381                     <p>If you want to use something more special than a checkbox, we recomment the toggle buttons.</p>
 382
 383                                 <div class="togglebutton">
 384                                         <label>
 385                                                 <input type="checkbox" checked="">
 386                                                 Toggle is on
 387                                         </label>
 388                                 </div>
 389
 390                                 <div class="togglebutton">
 391                                         <label>
 392                                                 <input type="checkbox">
 393                                                 Toggle is off
 394                                         </label>
 395                                 </div>
 396
 397                         <pre class="prettyprint">
 398
 399 &lt;div class=&quot;togglebutton&quot;&gt;
 400         &lt;label&gt;
 401         &lt;input type=&quot;checkbox&quot; checked=&quot;&quot;&gt;
 402                 Toggle is on
 403         &lt;/label&gt;
 404 &lt;/div&gt;
 405
 406 &lt;div class=&quot;togglebutton&quot;&gt;
 407         &lt;label&gt;
 408         &lt;input type=&quot;checkbox&quot;&gt;
 409                 Toggle is off
 410         &lt;/label&gt;
 411 &lt;/div&gt;
 412                         </pre>
 413                 </div>
 414                 <!-- end row -->
 415
 416                     <!-- dropdown row -->
 417                     <div class="tim-row" id="dropdown-row">
 418                 <h2> Dropdown </h2>
 419                 <legend></legend>
 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>
 421
 422                     <div class="row">
 423                         <div class="col-md-3 dropdown">
 424                                 <a href="#" class="btn btn-simple dropdown-toggle" data-toggle="dropdown">
 425                                 Regular
 426                                 <b class="caret"></b>
 427                                 </a>
 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>
 436                                 </ul>
 437                         </div>
 438
 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"/>
 442                                  Flags
 443                                  <b class="caret"></b>
 444                             </a>
 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>
 451
 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>
 456                             </ul>
 457                         </div>
 458                     </div>
 459
 460                         <pre class="prettyprint">
 461 &lt;div class=&quot;col-md-3 dropdown&quot;&gt;
 462         &lt;a href=&quot;#&quot; class=&quot;btn btn-simple dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;
 463         Regular
 464         &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;
 465         &lt;/a&gt;
 466         &lt;ul class=&quot;dropdown-menu&quot;&gt;
 467                 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
 468                 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
 469                 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
 470                 &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
 471                 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;
 472                 &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
 473                 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
 474         &lt;/ul&gt;
 475 &lt;/div&gt;
 476                         </pre>
 477                     </div>
 478                     <!-- end row -->
 479
 480                 <!-- inputs row -->
 481                 <div class="tim-row" id="inputs-row">
 482                 <h2>Inputs </h2>
 483                 <legend></legend>
 484
 485                 <p>
 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.
 487                 </p>
 488                 <div class="row">
 489                                         <div class="col-sm-4">
 490                                 <div class="form-group">
 491                                         <input type="text" value="" placeholder="Regular" class="form-control" />
 492                                 </div>
 493                         </div>
 494
 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">
 499                                                 </div>
 500                                         </div>
 501
 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>
 508                                                         </span>
 509                                 </div>
 510                         </div>
 511
 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>
 517                                 </div>
 518                         </div>
 519
 520                                         <div class="col-sm-4">
 521                                                 <div class="input-group">
 522                                                         <span class="input-group-addon">
 523                                                                 <i class="material-icons">group</i>
 524                                                         </span>
 525                                                         <input type="text" class="form-control" placeholder="With Material Icons">
 526                                                 </div>
 527                                         </div>
 528
 529                                         <div class="col-sm-4">
 530                                                 <div class="input-group">
 531                                                         <span class="input-group-addon">
 532                                                                 <i class="fa fa-group"></i>
 533                                                         </span>
 534                                                         <input type="text" class="form-control" placeholder="With Font Awesome Icons">
 535                                                 </div>
 536                                         </div>
 537                         </div>
 538
 539
 540                         <pre class="prettyprint">
 541
 542 &lt;div class=&quot;col-sm-4&quot;&gt;
 543         &lt;div class=&quot;form-group&quot;&gt;
 544         &lt;input type=&quot;text&quot; value=&quot;&quot; placeholder=&quot;Regular&quot; class=&quot;form-control&quot; /&gt;
 545         &lt;/div&gt;
 546 &lt;/div&gt;
 547
 548 &lt;div class=&quot;col-sm-4&quot;&gt;
 549         &lt;div class=&quot;form-group label-floating&quot;&gt;
 550                 &lt;label class=&quot;control-label&quot;&gt;With Floating Label&lt;/label&gt;
 551                 &lt;input type=&quot;email&quot; class=&quot;form-control&quot;&gt;
 552         &lt;/div&gt;
 553 &lt;/div&gt;
 554
 555 &lt;div class=&quot;col-sm-4&quot;&gt;
 556         &lt;div class=&quot;form-group label-floating has-success&quot;&gt;
 557                 &lt;label class=&quot;control-label&quot;&gt;Success input&lt;/label&gt;
 558                 &lt;input type=&quot;text&quot; value=&quot;Success&quot; class=&quot;form-control&quot; /&gt;
 559                 &lt;span class=&quot;form-control-feedback&quot;&gt;
 560                         &lt;i class=&quot;material-icons&quot;&gt;done&lt;/i&gt;
 561                 &lt;/span&gt;
 562         &lt;/div&gt;
 563 &lt;/div&gt;
 564
 565 &lt;div class=&quot;col-sm-4&quot;&gt;
 566         &lt;div class=&quot;form-group label-floating has-error&quot;&gt;
 567                 &lt;label class=&quot;control-label&quot;&gt;Error input&lt;/label&gt;
 568                 &lt;input type=&quot;email&quot; value=&quot;Error Input&quot; class=&quot;form-control&quot; /&gt;
 569                 &lt;span class=&quot;material-icons form-control-feedback&quot;&gt;clear&lt;/span&gt;
 570         &lt;/div&gt;
 571 &lt;/div&gt;
 572
 573 &lt;div class=&quot;col-sm-4&quot;&gt;
 574         &lt;div class=&quot;input-group&quot;&gt;
 575                 &lt;span class=&quot;input-group-addon&quot;&gt;
 576                         &lt;i class=&quot;material-icons&quot;&gt;group&lt;/i&gt;
 577                 &lt;/span&gt;
 578                 &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;With Material Icons&quot;&gt;
 579         &lt;/div&gt;
 580 &lt;/div&gt;
 581
 582 &lt;div class=&quot;col-sm-4&quot;&gt;
 583         &lt;div class=&quot;input-group&quot;&gt;
 584                 &lt;span class=&quot;input-group-addon&quot;&gt;
 585                         &lt;i class=&quot;fa fa-group&quot;&gt;&lt;/i&gt;
 586                 &lt;/span&gt;
 587                 &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;With Font Awesome Icons&quot;&gt;
 588         &lt;/div&gt;
 589 &lt;/div&gt;
 590                                 </pre>
 591                 </div>
 592                 <!-- end row -->
 593
 594
 595                         <!-- textarea row -->
 596                         <div class="tim-row" id="textarea-row">
 597                             <h2>Textarea</h2>
 598                             <legend></legend>
 599                             <p>The textarea has a new style, so it looks similar to all other inputs.</p>
 600
 601                             <textarea class="form-control" placeholder="Here can be your nice text" rows="5"></textarea>
 602
 603                                 <pre class="prettyprint">
 604 &lt;textarea class=&quot;form-control&quot; placeholder=&quot;Here can be your nice text&quot; rows=&quot;5&quot;&gt;&lt;/textarea&gt;
 605                                 </pre>
 606                     </div>
 607                     <!-- end row -->
 608
 609                 <!-- navbar row -->
 610                 <div class="tim-row" id="navbar-row">
 611                     <h2>Navbar </h2>
 612                     <legend></legend>
 613                     <p>The classic Bootstrap Navbar was restyled:</p>
 614
 615                     <div id="navbar">
 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>
 624                                         </button>
 625                                         <a class="navbar-brand" href="#">Brand</a>
 626                                 </div>
 627
 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>
 642                                                         </ul>
 643                                                 </li>
 644                                         </ul>
 645                                 </div>
 646                                 </div>
 647                         </nav>
 648                     </div><!--  end navbar -->
 649
 650                         <pre class="prettyprint">
 651 &lt;nav class=&quot;navbar navbar-default&quot; role=&quot;navigation&quot;&gt;
 652         &lt;div class=&quot;container-fluid&quot;&gt;
 653         &lt;div class=&quot;navbar-header&quot;&gt;
 654                 &lt;button type=&quot;button&quot; class=&quot;navbar-toggle&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#bs-example-navbar-collapse-1&quot;&gt;
 655                 &lt;span class=&quot;sr-only&quot;&gt;Toggle navigation&lt;/span&gt;
 656                 &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
 657                 &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
 658                 &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
 659                 &lt;/button&gt;
 660                 &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Brand&lt;/a&gt;
 661         &lt;/div&gt;
 662
 663         &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;bs-example-navbar-collapse-1&quot;&gt;
 664                 &lt;ul class=&quot;nav navbar-nav&quot;&gt;
 665                                 &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
 666                         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
 667                         &lt;li class=&quot;dropdown&quot;&gt;
 668                                 &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;Dropdown &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/a&gt;
 669                                 &lt;ul class=&quot;dropdown-menu&quot;&gt;
 670                                           &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
 671                                           &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
 672                                           &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
 673                                           &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
 674                                           &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;
 675                                           &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
 676                                       &lt;li&gt;&lt;a href=&quot;#&quot;&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
 677                                 &lt;/ul&gt;
 678                         &lt;/li&gt;
 679                 &lt;/ul&gt;
 680         &lt;/div&gt;
 681         &lt;/div&gt;
 682 &lt;/nav&gt;
 683                         </pre>
 684
 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>
 686
 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>
 698                               </button>
 699                               <a class="navbar-brand" href="#">Brand</a>
 700                             </div>
 701
 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>
 717                                   </ul>
 718                                 </li>
 719                               </ul>
 720                             </div>
 721                           </div>
 722                         </nav>
 723
 724                     </div><!--  end navbar -->
 725
 726                     <!-- navbar info -->
 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>
 737                           </button>
 738                           <a class="navbar-brand" href="#">Brand</a>
 739                         </div>
 740
 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>
 756                               </ul>
 757                             </li>
 758                           </ul>
 759                         </div><!-- /.navbar-collapse -->
 760                       </div><!-- /.container-fluid -->
 761                     </nav>
 762
 763                 </div><!--  end navbar -->
 764
 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>
 776                               </button>
 777                               <a class="navbar-brand" href="#">Brand</a>
 778                             </div>
 779
 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>
 795                                   </ul>
 796                                 </li>
 797                               </ul>
 798                             </div><!-- /.navbar-collapse -->
 799                           </div><!-- /.container-fluid -->
 800                         </nav>
 801
 802                     </div><!--  end navbar -->
 803
 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>
 815                               </button>
 816                               <a class="navbar-brand" href="#">Brand</a>
 817                             </div>
 818
 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>
 834                                   </ul>
 835                                 </li>
 836                               </ul>
 837                             </div><!-- /.navbar-collapse -->
 838                           </div><!-- /.container-fluid -->
 839                         </nav>
 840
 841                     </div><!--  end navbar -->
 842
 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>
 854                               </button>
 855                               <a class="navbar-brand" href="#">Brand</a>
 856                             </div>
 857
 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>
 873                                   </ul>
 874                                 </li>
 875                               </ul>
 876                             </div><!-- /.navbar-collapse -->
 877                           </div><!-- /.container-fluid -->
 878                         </nav>
 879
 880                     </div><!--  end navbar -->
 881
 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>.
 884             </p>
 885
 886             </div>
 887             <!-- end row -->
 888
 889             <!-- nav pills row -->
 890             <div class="tim-row" id="navpills-row">
 891             <h2> Nav Pills</h2>
 892             <legend></legend>
 893             <p>
 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>
 895             </p>
 896
 897                         <ul class="nav nav-pills nav-pills-primary" role="tablist">
 898                                 <li>
 899                                         <a href="#dashboard" role="tab" data-toggle="tab">
 900                                                 <i class="material-icons">dashboard</i>
 901                                                 Dashboard
 902                                         </a>
 903                                 </li>
 904                                 <li class="active">
 905                                         <a href="#schedule" role="tab" data-toggle="tab">
 906                                                 <i class="material-icons">schedule</i>
 907                                                 Schedule
 908                                         </a>
 909                                 </li>
 910                                 <li>
 911                                         <a href="#tasks" role="tab" data-toggle="tab">
 912                                                 <i class="material-icons">list</i>
 913                                                 Tasks
 914                                         </a>
 915                                 </li>
 916                         </ul>
 917                         <br />
 918                         <ul class="nav nav-pills nav-pills-info" role="tablist">
 919                                 <li>
 920                                         <a href="#dashboard" role="tab" data-toggle="tab">
 921                                                 <i class="material-icons">dashboard</i>
 922                                                 Dashboard
 923                                         </a>
 924                                 </li>
 925                                 <li class="active">
 926                                         <a href="#schedule" role="tab" data-toggle="tab">
 927                                                 <i class="material-icons">schedule</i>
 928                                                 Schedule
 929                                         </a>
 930                                 </li>
 931                                 <li>
 932                                         <a href="#tasks" role="tab" data-toggle="tab">
 933                                                 <i class="material-icons">list</i>
 934                                                 Tasks
 935                                         </a>
 936                                 </li>
 937                         </ul>
 938                         <br />
 939                         <ul class="nav nav-pills nav-pills-success" role="tablist">
 940                                 <li>
 941                                         <a href="#dashboard" role="tab" data-toggle="tab">
 942                                                 <i class="material-icons">dashboard</i>
 943                                                 Dashboard
 944                                         </a>
 945                                 </li>
 946                                 <li class="active">
 947                                         <a href="#schedule" role="tab" data-toggle="tab">
 948                                                 <i class="material-icons">schedule</i>
 949                                                 Schedule
 950                                         </a>
 951                                 </li>
 952                                 <li>
 953                                         <a href="#tasks" role="tab" data-toggle="tab">
 954                                                 <i class="material-icons">list</i>
 955                                                 Tasks
 956                                         </a>
 957                                 </li>
 958                         </ul>
 959                         <br />
 960                         <ul class="nav nav-pills nav-pills-warning" role="tablist">
 961                                 <li>
 962                                         <a href="#dashboard" role="tab" data-toggle="tab">
 963                                                 <i class="material-icons">dashboard</i>
 964                                                 Dashboard
 965                                         </a>
 966                                 </li>
 967                                 <li class="active">
 968                                         <a href="#schedule" role="tab" data-toggle="tab">
 969                                                 <i class="material-icons">schedule</i>
 970                                                 Schedule
 971                                         </a>
 972                                 </li>
 973                                 <li>
 974                                         <a href="#tasks" role="tab" data-toggle="tab">
 975                                                 <i class="material-icons">list</i>
 976                                                 Tasks
 977                                         </a>
 978                                 </li>
 979                         </ul>
 980                         <br />
 981                         <ul class="nav nav-pills nav-pills-danger" role="tablist">
 982                                 <li>
 983                                         <a href="#dashboard" role="tab" data-toggle="tab">
 984                                                 <i class="material-icons">dashboard</i>
 985                                                 Dashboard
 986                                         </a>
 987                                 </li>
 988                                 <li class="active">
 989                                         <a href="#schedule" role="tab" data-toggle="tab">
 990                                                 <i class="material-icons">schedule</i>
 991                                                 Schedule
 992                                         </a>
 993                                 </li>
 994                                 <li>
 995                                         <a href="#tasks" role="tab" data-toggle="tab">
 996                                                 <i class="material-icons">list</i>
 997                                                 Tasks
 998                                         </a>
 999                                 </li>
1000                         </ul>
1001
1002                 <pre class="prettyprint">
1003 &lt;ul class=&quot;nav nav-pills nav-pills-primary&quot; role=&quot;tablist&quot;&gt;
1004         &lt;li&gt;
1005                 &lt;a href=&quot;#dashboard&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;
1006                         &lt;i class=&quot;material-icons&quot;&gt;dashboard&lt;/i&gt;
1007                         Dashboard
1008                 &lt;/a&gt;
1009         &lt;/li&gt;
1010         &lt;li class=&quot;active&quot;&gt;
1011                 &lt;a href=&quot;#schedule&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;
1012                         &lt;i class=&quot;material-icons&quot;&gt;schedule&lt;/i&gt;
1013                         Schedule
1014                 &lt;/a&gt;
1015         &lt;/li&gt;
1016         &lt;li&gt;
1017                 &lt;a href=&quot;#tasks&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;
1018                         &lt;i class=&quot;material-icons&quot;&gt;list&lt;/i&gt;
1019                         Tasks
1020                 &lt;/a&gt;
1021         &lt;/li&gt;
1022 &lt;/ul&gt;
1023                 </pre>
1024                     </div>
1025                     <!-- end row -->
1026
1027                     <!-- pagination row -->
1028                     <div class="tim-row" id="pagination-row">
1029                             <h2>Pagination</h2>
1030                             <legend></legend>
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>.
1032                         </p>
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>
1041                         </ul>
1042
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>
1051                         </ul>
1052
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>
1061                         </ul>
1062
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>
1071                         </ul>
1072
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>
1081                         </ul>
1082
1083                         <pre class="prettyprint">
1084
1085 &lt;ul class=&quot;pagination pagination-primary&quot;&gt;
1086         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;<&lt;/a&gt;&lt;/li&gt;
1087         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
1088         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
1089         &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
1090         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;4&lt;/a&gt;&lt;/li&gt;
1091         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;5&lt;/a&gt;&lt;/li&gt;
1092         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;>&lt;/a&gt;&lt;/li&gt;
1093 &lt;/ul&gt
1094                     </pre>
1095                     </div>
1096                     <!-- end row -->
1097
1098                     <!-- progressbar row -->
1099                     <div class="tim-row" id="progressbar-row">
1100                     <h2>Progress Bars</h2>
1101                     <legend></legend>
1102
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>
1107                         </div>
1108                     </div>
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>
1112                         </div>
1113                     </div>
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>
1117                         </div>
1118                     </div>
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>
1122                         </div>
1123                     </div>
1124                     <div class="progress">
1125                         <div class="progress-bar progress-bar-success" style="width: 35%">
1126                                 <span class="sr-only">35% Complete (success)</span>
1127                         </div>
1128                         <div class="progress-bar progress-bar-warning" style="width: 20%">
1129                                 <span class="sr-only">20% Complete (warning)</span>
1130                             </div>
1131                             <div class="progress-bar progress-bar-danger" style="width: 10%">
1132                                 <span class="sr-only">10% Complete (danger)</span>
1133                             </div>
1134                     </div>
1135
1136                         <pre class="prettyprint">
1137 &lt;div class=&quot;progress&quot;&gt;
1138         &lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 30%;&quot;&gt;
1139         &lt;span class=&quot;sr-only&quot;&gt;30% Complete&lt;/span&gt;
1140         &lt;/div&gt;
1141 &lt;/div&gt;
1142 &lt;div class=&quot;progress&quot;&gt;
1143         &lt;div class=&quot;progress-bar progress-bar-info&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 60%;&quot;&gt;
1144         &lt;span class=&quot;sr-only&quot;&gt;60% Complete&lt;/span&gt;
1145         &lt;/div&gt;
1146 &lt;/div&gt;
1147
1148 &lt;div class=&quot;progress progress-line-primary&quot;&gt;
1149         &lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 30%;&quot;&gt;
1150         &lt;span class=&quot;sr-only&quot;&gt;30% Complete&lt;/span&gt;
1151         &lt;/div&gt;
1152 &lt;/div&gt;
1153 &lt;div class=&quot;progress progress-line-info&quot;&gt;
1154         &lt;div class=&quot;progress-bar progress-bar-info&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 60%;&quot;&gt;
1155         &lt;span class=&quot;sr-only&quot;&gt;60% Complete&lt;/span&gt;
1156         &lt;/div&gt;
1157 &lt;/div&gt;
1158
1159 &lt;div class=&quot;progress&quot;&gt;
1160         &lt;div class=&quot;progress-bar progress-bar-success&quot; style=&quot;width: 35%&quot;&gt;
1161         &lt;span class=&quot;sr-only&quot;&gt;35% Complete (success)&lt;/span&gt;
1162         &lt;/div&gt;
1163         &lt;div class=&quot;progress-bar progress-bar-warning&quot; style=&quot;width: 20%&quot;&gt;
1164         &lt;span class=&quot;sr-only&quot;&gt;20% Complete (warning)&lt;/span&gt;
1165         &lt;/div&gt;
1166         &lt;div class=&quot;progress-bar progress-bar-danger&quot; style=&quot;width: 10%&quot;&gt;
1167         &lt;span class=&quot;sr-only&quot;&gt;10% Complete (danger)&lt;/span&gt;
1168         &lt;/div&gt;
1169 &lt;/div&gt;
1170                             </pre>
1171                             </div>
1172                             <!-- end row -->
1173
1174                             <!-- sliders row -->
1175                             <div class="tim-row" id="sliders-row">
1176                             <h2>Sliders</h2>
1177                             <legend></legend>
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>
1179
1180                                         <div id="sliderRegular" class="slider"></div>
1181                                         <br />
1182                                         <div id="sliderDouble" class="slider slider-info"></div>
1183
1184
1185                         <pre class="prettyprint">
1186 &lt;!-- Markup --&gt;
1187 &lt;div id=&quot;sliderRegular&quot; class=&quot;slider&quot;&gt;&lt;/div&gt;
1188 &lt;div id=&quot;sliderDouble&quot; class=&quot;slider slider-info&quot;&gt;&lt;/div&gt;
1189
1190 &lt;!-- Javascript --&gt;
1191 $(&#39;#sliderRegular&#39;).noUiSlider({
1192         start: 40,
1193         connect: &quot;lower&quot;,
1194         range: {
1195             min: 0,
1196             max: 100
1197         }
1198 });
1199
1200 $(&#39;#sliderDouble&#39;).noUiSlider({
1201         start: [20, 60] ,
1202         connect: true,
1203         range: {
1204             min: 0,
1205             max: 100
1206         }
1207 });
1208                         </pre>
1209                                 </div>
1210                                 <!-- end row -->
1211
1212                             <!-- labels row -->
1213                             <div class="tim-row" id="labels-row">
1214                                 <h2>Labels</h2>
1215                                 <legend></legend>
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>
1223
1224                                         <pre class="prettyprint">
1225
1226 &lt;span class=&quot;label label-default&quot;&gt;Default&lt;/span&gt;
1227 &lt;span class=&quot;label label-primary&quot;&gt;Primary&lt;/span&gt;
1228 &lt;span class=&quot;label label-success&quot;&gt;Success&lt;/span&gt;
1229 &lt;span class=&quot;label label-info&quot;&gt;Info&lt;/span&gt;
1230 &lt;span class=&quot;label label-warning&quot;&gt;Warning&lt;/span&gt;
1231 &lt;span class=&quot;label label-danger&quot;&gt;Danger&lt;/span&gt;
1232                                 </pre>
1233
1234                             </div>
1235                             <!-- end row -->
1236
1237
1238
1239
1240
1241                     <!-- tables row -->
1242                     <div class="tim-row" id="tables-row">
1243                         <h2>Tables</h2>
1244                         <legend></legend>
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">
1249                                 <thead>
1250                                     <tr>
1251                                         <th class="text-center">#</th>
1252                                         <th>Name</th>
1253                                         <th>Job Position</th>
1254                                         <th>Since</th>
1255                                         <th class="text-right">Salary</th>
1256                                         <th class="text-right">Actions</th>
1257                                     </tr>
1258                                 </thead>
1259                                 <tbody>
1260                                     <tr>
1261                                         <td class="text-center">1</td>
1262                                         <td>Andrew Mike</td>
1263                                         <td>Develop</td>
1264                                         <td>2013</td>
1265                                         <td class="text-right">&euro; 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>
1269                                             </button>
1270                                             <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
1271                                                 <i class="fa fa-edit"></i>
1272                                             </button>
1273                                             <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
1274                                                 <i class="fa fa-times"></i>
1275                                             </button>
1276                                         </td>
1277                                     </tr>
1278                                     <tr>
1279                                         <td class="text-center">2</td>
1280                                         <td>John Doe</td>
1281                                         <td>Design</td>
1282                                         <td>2012</td>
1283                                         <td class="text-right">&euro; 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>
1287                                             </button>
1288                                             <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
1289                                                 <i class="fa fa-edit"></i>
1290                                             </button>
1291                                             <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
1292                                                 <i class="fa fa-times"></i>
1293                                             </button>
1294                                         </td>
1295                                     </tr>
1296                                     <tr>
1297                                         <td class="text-center">3</td>
1298                                         <td>Alex Mike</td>
1299                                         <td>Design</td>
1300                                         <td>2010</td>
1301                                         <td class="text-right">&euro; 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>
1305                                             </button>
1306                                             <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
1307                                                 <i class="fa fa-edit"></i>
1308                                             </button>
1309                                             <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
1310                                                 <i class="fa fa-times"></i>
1311                                             </button>
1312                                         </td>
1313                                     </tr>
1314                                 </tbody>
1315                             </table>
1316                             </div>
1317
1318                                         <pre class="prettyprint">
1319
1320 &lt;table class=&quot;table&quot;&gt;
1321     &lt;thead&gt;
1322         &lt;tr&gt;
1323             &lt;th class=&quot;text-center&quot;&gt;#&lt;/th&gt;
1324             &lt;th&gt;Name&lt;/th&gt;
1325             &lt;th&gt;Job Position&lt;/th&gt;
1326             &lt;th&gt;Since&lt;/th&gt;
1327             &lt;th class=&quot;text-right&quot;&gt;Salary&lt;/th&gt;
1328             &lt;th class=&quot;text-right&quot;&gt;Actions&lt;/th&gt;
1329         &lt;/tr&gt;
1330     &lt;/thead&gt;
1331     &lt;tbody&gt;
1332         &lt;tr&gt;
1333             &lt;td class=&quot;text-center&quot;&gt;1&lt;/td&gt;
1334             &lt;td&gt;Andrew Mike&lt;/td&gt;
1335             &lt;td&gt;Develop&lt;/td&gt;
1336             &lt;td&gt;2013&lt;/td&gt;
1337             &lt;td class=&quot;text-right&quot;&gt;&amp;euro; 99,225&lt;/td&gt;
1338             &lt;td class=&quot;td-actions text-right&quot;&gt;
1339                 &lt;button type=&quot;button&quot; rel=&quot;tooltip&quot; title=&quot;View Profile&quot; class=&quot;btn btn-info btn-simple btn-xs&quot;&gt;
1340                     &lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt;
1341                 &lt;/button&gt;
1342                 &lt;button type=&quot;button&quot; rel=&quot;tooltip&quot; title=&quot;Edit Profile&quot; class=&quot;btn btn-success btn-simple btn-xs&quot;&gt;
1343                     &lt;i class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt;
1344                 &lt;/button&gt;
1345                 &lt;button type=&quot;button&quot; rel=&quot;tooltip&quot; title=&quot;Remove&quot; class=&quot;btn btn-danger btn-simple btn-xs&quot;&gt;
1346                     &lt;i class=&quot;fa fa-times&quot;&gt;&lt;/i&gt;
1347                 &lt;/button&gt;
1348             &lt;/td&gt;
1349         &lt;/tr&gt;
1350         &lt;tr&gt;
1351             &lt;td class=&quot;text-center&quot;&gt;2&lt;/td&gt;
1352             &lt;td&gt;John Doe&lt;/td&gt;
1353             &lt;td&gt;Design&lt;/td&gt;
1354             &lt;td&gt;2012&lt;/td&gt;
1355             &lt;td class=&quot;text-right&quot;&gt;&amp;euro; 89,241&lt;/td&gt;
1356             &lt;td class=&quot;td-actions text-right&quot;&gt;
1357                 &lt;button type=&quot;button&quot; rel=&quot;tooltip&quot; title=&quot;View Profile&quot; class=&quot;btn btn-info btn-simple btn-xs&quot;&gt;
1358                     &lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt;
1359                 &lt;/button&gt;
1360                 &lt;button type=&quot;button&quot; rel=&quot;tooltip&quot; title=&quot;Edit Profile&quot; class=&quot;btn btn-success btn-simple btn-xs&quot;&gt;
1361                     &lt;i class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt;
1362                 &lt;/button&gt;
1363                 &lt;button type=&quot;button&quot; rel=&quot;tooltip&quot; title=&quot;Remove&quot; class=&quot;btn btn-danger btn-simple btn-xs&quot;&gt;
1364                     &lt;i class=&quot;fa fa-times&quot;&gt;&lt;/i&gt;
1365                 &lt;/button&gt;
1366             &lt;/td&gt;
1367         &lt;/tr&gt;
1368         &lt;tr&gt;
1369             &lt;td class=&quot;text-center&quot;&gt;3&lt;/td&gt;
1370             &lt;td&gt;Alex Mike&lt;/td&gt;
1371             &lt;td&gt;Design&lt;/td&gt;
1372             &lt;td&gt;2010&lt;/td&gt;
1373             &lt;td class=&quot;text-right&quot;&gt;&amp;euro; 92,144&lt;/td&gt;
1374             &lt;td class=&quot;td-actions text-right&quot;&gt;
1375                 &lt;button type=&quot;button&quot; rel=&quot;tooltip&quot; title=&quot;View Profile&quot; class=&quot;btn btn-info btn-simple btn-xs&quot;&gt;
1376                     &lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt;
1377                 &lt;/button&gt;
1378                 &lt;button type=&quot;button&quot; rel=&quot;tooltip&quot; title=&quot;Edit Profile&quot; class=&quot;btn btn-success btn-simple btn-xs&quot;&gt;
1379                     &lt;i class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt;
1380                 &lt;/button&gt;
1381                 &lt;button type=&quot;button&quot; rel=&quot;tooltip&quot; title=&quot;Remove&quot; class=&quot;btn btn-danger btn-simple btn-xs&quot;&gt;
1382                     &lt;i class=&quot;fa fa-times&quot;&gt;&lt;/i&gt;
1383                 &lt;/button&gt;
1384             &lt;/td&gt;
1385         &lt;/tr&gt;
1386     &lt;/tbody&gt;
1387 &lt;/table&gt;
1388                     </pre>
1389
1390
1391                                 </div>
1392                     </div>
1393                     <!-- end row -->
1394
1395
1396                     <!-- datepicker row -->
1397                     <div class="tim-row" id="datepicker-row">
1398                         <h2>Datepicker</h2>
1399                         <legend></legend>
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>
1401                         <div class="row">
1402                             <div class="col-md-4">
1403                                 <input class="datepicker form-control" type="text" value="03/12/2016"/>
1404                             </div>
1405                         </div>
1406                             <pre class="prettyprint">
1407 &lt;!-- markup --&gt;
1408 &lt;input class=&quot;datepicker form-control&quot; type=&quot;text&quot; value=&quot;03/12/2016&quot;/&gt;
1409
1410 &lt;!-- javascript --&gt;
1411
1412 $(&apos;.datepicker&apos;).datepicker({
1413         weekStart:1
1414 });
1415                         </pre>
1416
1417                             </div>
1418                             <!-- end row -->
1419
1420                             <!-- modals row -->
1421                             <div class="tim-row" id="modal-row">
1422                                 <h2>Modals</h2>
1423                                 <legend></legend>
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.
1426                                 </p>
1427                                 <!-- Button trigger modal -->
1428                                 <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
1429
1430                             <pre class="prettyprint">
1431
1432 &lt;!-- Button trigger modal --&gt;
1433 &lt;button class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;
1434   Launch demo modal
1435 &lt;/button&gt;
1436
1437 &lt;!-- Modal Core --&gt;
1438 &lt;div class=&quot;modal fade&quot; id=&quot;myModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
1439   &lt;div class=&quot;modal-dialog&quot;&gt;
1440     &lt;div class=&quot;modal-content&quot;&gt;
1441       &lt;div class=&quot;modal-header&quot;&gt;
1442         &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/button&gt;
1443         &lt;h4 class=&quot;modal-title&quot; id=&quot;myModalLabel&quot;&gt;Modal title&lt;/h4&gt;
1444       &lt;/div&gt;
1445       &lt;div class=&quot;modal-body&quot;&gt;
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.
1447       &lt;/div&gt;
1448       &lt;div class=&quot;modal-footer&quot;&gt;
1449         &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-simple&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
1450         &lt;button type=&quot;button&quot; class=&quot;btn btn-info btn-simple&quot;&gt;Save&lt;/button&gt;
1451       &lt;/div&gt;
1452     &lt;/div&gt;
1453   &lt;/div&gt;
1454 &lt;/div&gt;
1455                         </pre>
1456
1457                         </div>
1458                         <!-- end row -->
1459
1460                         <!-- tooltip row -->
1461                         <div class="tim-row" id="tooltip-row">
1462                             <h2>Tooltips</h2>
1463                             <legend></legend>
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>
1466
1467                         <pre class="prettyprint">
1468 &lt;!-- Markup --&gt;
1469 &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;Tooltip on top&quot;&gt;Button with Tooltip&lt;/button&gt;
1470
1471 &lt;!-- Javascript --&gt;
1472 $(&apos;[data-toggle="tooltip"]&apos;).tooltip();
1473                                 </pre>
1474
1475                                 </div>
1476                             <!-- end row -->
1477
1478                             <!-- popover row -->
1479                             <div class="tim-row" id="popover-row">
1480                                 <h2>Popovers</h2>
1481                                 <legend></legend>
1482                                 <p>
1483                                     We restyled the Bootstrap popover to align with the Material Design Concept. <br />
1484                                     See the following example:
1485                                 </p>
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 &lt;!-- markup --&gt;
1489
1490 &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-toggle=&quot;popover&quot; data-placement=&quot;top&quot; title=&quot;Popover on top&quot; data-content=&quot;Here will be some very useful information about his popover.&quot;&gt;On top&lt;/button&gt;
1491
1492
1493 &lt;!-- javascript --&gt;
1494
1495 $(&#39;[data-toggle=&quot;popover&quot;]&#39;).popover();
1496                         </pre>
1497                             </div>
1498                             <!-- end row -->
1499
1500                                 <!-- popover row -->
1501                             <div class="tim-row" id="icons-row">
1502                                 <h2>Material Icons</h2>
1503                                 <legend></legend>
1504                                 <p>
1505                                     We used the default <a href="https://design.google.com/icons/" target="_blank">Icons for the Material Design</a> which provided by Google.
1506                                 </p>
1507                                 <i class="material-icons">face</i>
1508                             <pre class="prettyprint">
1509
1510 &lt;i class=&quot;material-icons&quot;&gt;face&lt;/i&gt;
1511                         </pre>
1512                             </div>
1513                             <!-- end row -->
1514
1515
1516                             <!-- notification row -->
1517                             <div class="tim-row" id="notification-row">
1518                                 <h2> Notifications </h2>
1519                                 <legend></legend>
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>
1521
1522                                         <div class="alert alert-info">
1523                                     <div class="container-fluid">
1524                                                         <div class="alert-icon">
1525                                                                 <i class="material-icons">info_outline</i>
1526                                                         </div>
1527                                                         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1528                                                                 <span aria-hidden="true"><i class="material-icons">clear</i></span>
1529                                                         </button>
1530
1531                                         <b>Info alert:</b> You've got some friends nearby, stop looking at your phone and find them...
1532                                     </div>
1533                                 </div>
1534                                 <div class="alert alert-success">
1535                                     <div class="container-fluid">
1536                                                         <div class="alert-icon">
1537                                                                 <i class="material-icons">check</i>
1538                                                         </div>
1539                                                         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1540                                                                 <span aria-hidden="true"><i class="material-icons">clear</i></span>
1541                                                         </button>
1542                                         <b>Success Alert:</b> Yuhuuu! You've got your $11.99 album from The Weeknd
1543                                     </div>
1544                                 </div>
1545                                 <div class="alert alert-warning">
1546                                      <div class="container-fluid">
1547                                                          <div class="alert-icon">
1548                                                                 <i class="material-icons">warning</i>
1549                                                         </div>
1550                                                         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1551                                                                 <span aria-hidden="true"><i class="material-icons">clear</i></span>
1552                                                         </button>
1553                                          <b>Warning Alert:</b> Hey, it looks like you still have the "copyright &copy;  2015" in your footer. Please update it!
1554                                     </div>
1555                                 </div>
1556                                 <div class="alert alert-danger">
1557                                      <div class="container-fluid">
1558                                                          <div class="alert-icon">
1559                                                                 <i class="material-icons">error_outline</i>
1560                                                         </div>
1561                                                         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1562                                                                 <span aria-hidden="true"><i class="material-icons">clear</i></span>
1563                                                         </button>
1564                                          <b>Error Alert:</b> Damn man! You screwed up the server this time. You should find a good excuse for your Boss...
1565                                     </div>
1566                                 </div>
1567
1568                                         <pre class="prettyprint">
1569 &lt;div class=&quot;alert alert-info&quot;&gt;
1570     &lt;div class=&quot;container-fluid&quot;&gt;
1571           &lt;div class=&quot;alert-icon&quot;&gt;
1572                 &lt;i class=&quot;material-icons&quot;&gt;info_outline&lt;/i&gt;
1573           &lt;/div&gt;
1574           &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;
1575                 &lt;span aria-hidden=&quot;true&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;clear&lt;/i&gt;&lt;/span&gt;
1576           &lt;/button&gt;
1577           &lt;b&gt;Info alert:&lt;/b&gt; You&#39;ve got some friends nearby, stop looking at your phone and find them...
1578     &lt;/div&gt;
1579 &lt;/div&gt;
1580
1581 &lt;div class=&quot;alert alert-success&quot;&gt;
1582     &lt;div class=&quot;container-fluid&quot;&gt;
1583           &lt;div class=&quot;alert-icon&quot;&gt;
1584                 &lt;i class=&quot;material-icons&quot;&gt;check&lt;/i&gt;
1585           &lt;/div&gt;
1586           &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;
1587                 &lt;span aria-hidden=&quot;true&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;clear&lt;/i&gt;&lt;/span&gt;
1588           &lt;/button&gt;
1589       &lt;b&gt;Success Alert:&lt;/b&gt; Yuhuuu! You&#39;ve got your $11.99 album from The Weeknd
1590     &lt;/div&gt;
1591 &lt;/div&gt;
1592
1593 &lt;div class=&quot;alert alert-warning&quot;&gt;
1594     &lt;div class=&quot;container-fluid&quot;&gt;
1595           &lt;div class=&quot;alert-icon&quot;&gt;
1596                 &lt;i class=&quot;material-icons&quot;&gt;warning&lt;/i&gt;
1597           &lt;/div&gt;
1598           &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;
1599                 &lt;span aria-hidden=&quot;true&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;clear&lt;/i&gt;&lt;/span&gt;
1600           &lt;/button&gt;
1601       &lt;b&gt;Warning Alert:&lt;/b&gt; Hey, it looks like you still have the &quot;copyright &amp;copy;  2015&quot; in your footer. Please update it!
1602     &lt;/div&gt;
1603 &lt;/div&gt;
1604
1605 &lt;div class=&quot;alert alert-danger&quot;&gt;
1606     &lt;div class=&quot;container-fluid&quot;&gt;
1607           &lt;div class=&quot;alert-icon&quot;&gt;
1608             &lt;i class=&quot;material-icons&quot;&gt;error_outline&lt;/i&gt;
1609           &lt;/div&gt;
1610           &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;
1611                 &lt;span aria-hidden=&quot;true&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;clear&lt;/i&gt;&lt;/span&gt;
1612           &lt;/button&gt;
1613       &lt;b&gt;Error Alert:&lt;/b&gt; Damn man! You screwed up the server this time. You should find a good excuse for your Boss...
1614     &lt;/div&gt;
1615 &lt;/div&gt;
1616                                         </pre>
1617                         </div>
1618                                 <!-- end row -->
1619
1620                 <!-- end container -->
1621             </div>
1622
1623         </div>
1624         </div>
1625     </div>
1626     </div>
1627     <footer class="footer footer-transparent">
1628         <div class="container">
1629             <nav class="pull-left">
1630                 <ul>
1631                                         <li>
1632                                                 <a href="http://www.creative-tim.com">
1633                                                         Creative Tim
1634                                                 </a>
1635                                         </li>
1636                                         <li>
1637                                                 <a href="http://presentation.creative-tim.com">
1638                                                    About Us
1639                                                 </a>
1640                                         </li>
1641                                         <li>
1642                                                 <a href="http://blog.creative-tim.com">
1643                                                    Blog
1644                                                 </a>
1645                                         </li>
1646                                         <li>
1647                                                 <a href="http://www.creative-tim.com/license">
1648                                                         Licenses
1649                                                 </a>
1650                                         </li>
1651                 </ul>
1652             </nav>
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>
1656                 </a>
1657                 <a class="btn btn-social btn-facebook btn-simple" href="https://www.facebook.com/CreativeTim">
1658                     <i class="fa fa-facebook-square"></i>
1659                 </a>
1660                 <a class="btn btn-social btn-google btn-simple" href="https://plus.google.com/+CreativetimPage">
1661                     <i class="fa fa-google-plus"></i>
1662                 </a>
1663             </div>
1664             <div class="copyright">
1665                 &copy; 2016 Creative Tim, made with love
1666             </div>
1667         </div>
1668     </footer>
1669
1670 </div>
1671
1672 <!-- Modal Core -->
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">&times;</button>
1678                 <h4 class="modal-title" id="myModalLabel">Modal title</h4>
1679           </div>
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.
1682           </div>
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>
1686           </div>
1687         </div>
1688   </div>
1689 </div>
1690
1691
1692 </body>
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>
1697
1698         <!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
1699         <script src="assets/js/nouislider.min.js" type="text/javascript"></script>
1700
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>
1703
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>
1706
1707     <script>
1708         var header_height;
1709         var fixed_section;
1710         var floating = false;
1711
1712         $().ready(function(){
1713             suggestions_distance = $("#suggestions").offset();
1714             pay_height = $('.fixed-section').outerHeight();
1715
1716                         $(window).on('scroll', materialKit.checkScrollForTransparentNavbar);
1717
1718                         // the body of this function is in assets/material-kit.js
1719                         materialKit.initSliders();
1720         });
1721     </script>
1722
1723 </html>