Elements - Paper Dashboard Pro by Creative Tim

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png"> <link rel="icon" type="image/png" sizes="96x96" href="../assets/img/favicon.png"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>Elements - Paper Dashboard Pro by Creative Tim</title> <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> <meta name="viewport" content="width=device-width" /> <link href="../assets/css/bootstrap.min.css" rel="stylesheet" /> <link href="../assets/css/paper-dashboard.css" rel="stylesheet"/> <link href="../assets/css/demo.css" rel="stylesheet" /> <link href="css/documentation.css" rel="stylesheet" />  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"> <link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'> <link href="../assets/css/themify-icons.css" rel="stylesheet"> <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> <style> pre.prettyprint{ background-color: #eee; border: 0px; margin-bottom: 60px; margin-top: 30px; padding: 20px; text-align: left; } .atv, .str{ color: #05AE0E; } .tag, .pln, .kwd{ color: #3472F7; } .atn{ color: #2C93FF; } .pln{ color: #333; } .com{ color: #999; } .space-top{ margin-top: 50px; } .area-line{ border: 1px solid #999; border-left: 0; border-right: 0; color: #666; display: block; margin-top: 20px; padding: 8px 0; text-align: center; } .area-line a{ color: #666; } .container-fluid{ padding-right: 15px; padding-left: 15px; } </style>  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-NKDMSK6');</script>  </head> <body class="nude">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <nav class="navbar navbar-ct-danger navbar-fixed-top" role="navigation"> <div class="container">  <div class="navbar-header"> <button id="menu-toggle" type="button" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar bar1"></span> <span class="icon-bar bar2"></span> <span class="icon-bar bar3"></span> </button> <a href="https://www.creative-tim.com"> <div class="logo-container"> <div class="logo"> <img src="../assets/img/new_logo.png" alt="Creative Tim Logo"> </div> <div class="brand"> Creative Tim </div> </div> </a> </div>  <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li> <a href="https://github.com/creativetimofficial/ct-paper-dashboard-pro/issues" class="btn btn-white btn-simple" target="_blank"> <i class="fa fa-github-alt"></i> Report Issue </a> </li> </ul> </div> </div> </nav> <div class="header-wrapper"> <div class="header"> <div class="filter"></div> <div class="title-container text-center"> <h1>Paper Dashboard PRO</h1> <h3>Elements description - v1.3.1</h3> </div> </div> </div> <div class="wrapper"> <div class="main"> <div class="section section-white"> <div class="container"> <div class="row"> <div class="col-md-2"> <div class="fixed-section affix" data-spy="affix" data-offset-top="450"> <ul> <li><a href="#license">License</a></li> <li><a href="#tutorial">Tutorial</a></li> <li><a href="#pablo"> </a></li> <li><a href="#buttons-row">Buttons</a></li> <li><a href="#checkbox-row">Checkbox/Radio/Switch</a></li> <li><a href="#dropdown-row">Dropdown</a></li> <li><a href="#inputs-row">Inputs</a></li> <li><a href="#select-row">Bootstrap SelectPicker</a></li> <li><a href="#tags-row">jQuery Tagsinput</a></li> <li><a href="#textarea-row">Textarea</a></li> <li><a href="#navbar-row">Navigation</a></li> <li><a href="#subscription-row">Footers</a></li> <li><a href="#pagination-row">Pagination</a></li> <li><a href="#progressbar-row">Progress Bars</a></li> <li><a href="#sliders-row">noUiSlider</a></li> <li><a href="#cards-row">Cards</a></li> <li><a href="#panels-row">Panels</a></li> <li><a href="#tables-row">Tables</a></li> <li><a href="#collapsable-row">Collapsible Groups</a></li> <li><a href="#notification-row">Bootstrap Notify</a></li> <li><a href="#sidebar-row">Sidebar</a></li> <li><a href="#sweetalert-row">Sweet Alert 2</a></li> <li><a href="#datetimepicker-row">Bootstrap DateTimePicker</a></li> <li><a href="#charts-row">Charts</a></li> <li><a href="#google-row">Google Maps</a></li> <li><a href="#api">How to setup Google API Keys</a></li> <li><a href="#changing-colors">Changing Colors (SASS)</a></li> <li><a href="#changing-bg-colors">Changing Background Color</a></li> <li><a href="#jvector-row">jVector Maps</a></li> <li><a href="#wizard-row">Wizard</a></li> <li><a href="#validation-row">jQuery Validation</a></li> </ul> </div> </div> <div class="col-md-8 col-md-offset-1"> <div class="space-top"></div> <div class="tim-container" style="min-height: 2000px;">  <div class="tim-row" id="license"> <h2 class="text-center">License</h2> <legend></legend> <p> Currently, on <a href="https://www.creative-tim.com/" target="_blank">Creative Tim</a> you can get the products with two types of licenses: Personal or Developer. All the freebies are licensed to Personal License as default. If you are making a paid purchase, be sure to go through the table with the rights and the guidelines, so you can know what is the best fit for you. View the rights table and the description for each license on our <a target="_blank" href="https://www.creative-tim.com/license?ref=license-page-mk-free">Official License Page</a>. </p> </div>  <div class="tim-row" id="tutorial"> <h2 class="text-center">Short Description and Usage</h2> <legend></legend> <p> Paper Dashboard PRO is a beautiful resource built over Bootstrap to allow you to create powerful and beautiful dashboards. We have redesigned all the usual components in Bootstrap to make it look flat, minimalist and easy to use. Using the dashboard is very simple, but it does require you to understand basic JavaScript functions. </p> </div> <div class="tim-row"> <h2 class="text-center">Getting Started</h2> <legend></legend> <p> The Paper Dashboard is built on top of Bootstrap 3, so you can safely use it on your existing or new Bootstrap project. No line of code from Bootstrap 3 was changed, so you don't have to worry about undesired effects in your work. </p> <p> We provide all the necessary CSS resources. So, to immediately change or get started with our design, include the "css/paper-dashboard.css" in your HTML template. Your project will get the new look. </p> <p> To jump start your project, you can use our start-up template where all the files are already included and ready to use. If you do however, want to start from scratch, you can see the file structure below. The core JavaScript is contained in "js/paper-dashboard.js". Some functions are called from "js/demo.js" because they are presented only for demo purpose, you can check there how they are working and duplicate their effect on your projct. For the other files, you should add them if you use the specific element inside your page. </p> </div> <div class="tim-row"> <h2 class="text-left">File Structure</h2> <legend></legend> <p> Once you have downloaded the archive and opened it, you will find the following structure: </p> <p> Let's take it one by one: </p> <p> paper_dashboard_pro<br> --assets<br> ---css<br> -----bootstrap.min.css<br> -----demo.css<br> -----paper-dashboard.css<br> -----themify-icons.css<br> ---img<br> ---fonts<br> ---js<br> -----bootstrap-switch-tags.js<br> -----bootstrap-datetimepicker.js<br> -----bootstrap-notify.js<br> -----bootstrap-selectpicker.js<br> -----bootstrap-table.js<br> -----bootstrap.min.js<br> -----chartist.min.js<br> -----demo.js (the demo functions for Paper Dashboard Pro)<br> -----es6-promise-auto.min.js<br> -----fullcalendar.min.js<br> -----jquery.min.js<br> -----jquery-jvectormap.js<br> -----jquery-ui.min.js<br> -----jquery.bootstrap.wizard.min.js<br> -----jquery.datatables.js<br> -----jquery.easypiechart.min.js<br> -----jquery.validate.min.js<br> -----moment.min.js<br> -----paper-dashboard.js (the main functions for Paper Dashboard Pro)<br> -----sweetalert2.js<br> ----sass<br> --documentation<br> --examples<br> ----calendar.html<br> ----charts.html<br> ----components<br> ----dashboard<br> ----forms<br> ----maps<br> ----pages<br> ----tables<br> ----start-template.html<br> </p> </div> <div class="tim-row"> <h2 class="text-left">Restyled Components</h2> <legend></legend> <p> Here is the list of Bootstrap 3 components that we restyled for the Paper Dashboard: <ul> <li> Buttons </li> <li> Collapse</li> <li> Dropdown</li> <li> Images</li> <li> Inputs</li> <li> Menu </li> <li> Navigation Menu</li> <li> Notifications</li> <li> Pagination</li> <li> Progress Bars</li> <li> Select</li> <li> Tables</li> <li> Textarea</li> <li> Tooltips</li> <li> Typography</li> </ul> </p> </div> <div class="tim-row"> <h2 class="text-left">New Components</h2> <legend></legend> <p> Besides giving the existing Bootstrap elements a new look, we added new ones, so that the interface and consistent and homogenous. We also imported more plugins to use depending on your needs. </p> <p> Going through them, we added: <ul> <li> Charts</li> <li> Checkboxes</li> <li> Footers</li> <li> Google Maps</li> <li> jVector Maps</li> <li> jQuery Validations</li> <li> Bootstrap Tables</li> <li> DataTables.net</li> <li> DateTimePicker</li> <li> Maps</li> <li> Panels</li> <li> Radio Buttons</li> <li> Sliders</li> <li> Sweet Alert</li> <li> Switches</li> <li> Sidebar</li> <li> Tags</li> <li> Wizard</li> </ul> </p> </div>  <div class="tim-row" id="components"> <h2 class="text-center">Components</h2> </div>  <div class="tim-row" id="buttons-row"> <h2>Buttons <small><a href="../examples/components/buttons.html">Live Demo</a></small> </h2> <legend></legend> <h4>Colors</h4> <p> We worked over the original Bootstrap classes, choosing a different, slightly intenser colour palette: </p> <p> <button class="btn btn-default">Default</button> <button class="btn btn-primary">Primary</button> <button class="btn btn-info">Info</button> <button class="btn btn-success">Success</button> <button class="btn btn-warning">Warning</button> <button class="btn btn-danger">Danger</button> </p> <br /> <div class="area-line"> <a data-target="#buttonColor" href="javascript: void(0);" data-toggle="collapse"> See Full Implementation </a> <div id="buttonColor" class="collapse"> <pre class="prettyprint"> <button class="btn btn-default">Default</button> <button class="btn btn-primary">Primary</button> <button class="btn btn-info">Info</button> <button class="btn btn-success">Success</button> <button class="btn btn-warning">Warning</button> <button class="btn btn-danger">Danger</button> /* If you want to use button with white border on non-white background */ <button class="btn btn-neutral">Neutral</button> </pre> </div> </div> <h4>Sizes</h4> <p class="space-top"> Buttons come in all needed sizes: </p> <p> <button class="btn btn-primary btn-lg">Large</button> <button class="btn btn-primary">Normal</button> <button class="btn btn-primary btn-sm">Small</button> <button class="btn btn-primary btn-xs">Extra Small</button> </p> <div class="area-line"> <a data-target="#buttonSize" href="javascript: void(0);" data-toggle="collapse"> See Full Implementation </a> <div id="buttonSize" class="collapse"> <pre class="prettyprint"> <button class="btn btn-primary btn-lg">Large</button> <button class="btn btn-primary">Normal</button> <button class="btn btn-primary btn-sm">Small</button> <button class="btn btn-primary btn-xs">Extra Small</button> </pre> </div> </div> <h4>Styles</h4> <p class="space-top"> We added extra classes that help you better customise the look. You can use regular buttons, filled buttons or plain link buttons. Let's see some examples: </p> <p> <button class="btn btn-primary">Default</button> <button class="btn btn-primary btn-fill">Filled</button> <button class="btn btn-primary btn-simple">Simple</button> </p> <div class="area-line"> <a data-target="#buttonStyle" href="javascript: void(0);" data-toggle="collapse"> See Full Implementation </a> <div id="buttonStyle" class="collapse"> <pre class="prettyprint"> <button class="btn btn-primary">Default</button> <button class="btn btn-primary btn-fill">Filled</button> <button class="btn btn-primary btn-simple">Simple</button> </pre> </div> </div> <p class="space-top"> Button groups, toolbars, and disabled states all work like they are supposed to. </p> <h4>Social Buttons</h4> <p> An extra category of buttons that are necessary for any project is the social buttons. We have added classes that provide the default colour for every social network. <br /> To use them, you have to add to your button the general class <code>btn-social</code> and the specific network, for example <code>btn-twitter</code>. All styles described above can be applied to social buttons (default, filled, simple). <br /> We used the Themify social icons which you can find <a href="../examples/components/icons.html">here</a>. <br /> Here are examples for all the social buttons: </p> <div class="social-buttons"> <button class="btn btn-icon btn-twitter"> <i class="ti-twitter"></i> </button> <button class="btn btn-icon btn-facebook"> <i class="ti-facebook"> </i> </button> <button class="btn btn-icon btn-google"> <i class="ti-google"> </i> </button> <button class="btn btn-icon btn-linkedin"> <i class="ti-linkedin"></i> </button> <button class="btn btn-icon btn-pinterest"> <i class="ti-pinterest"></i> </button> <button class="btn btn-icon btn-youtube"> <i class="ti-youtube"> </i> </button> <button class="btn btn-icon btn-tumblr"> <i class="ti-tumblr"> </i> </button> <button class="btn btn-icon btn-github"> <i class="ti-github"></i> </button> <button class="btn btn-icon btn-dribbble"> <i class="ti-dribbble"></i> </button> <button class="btn btn-icon btn-reddit"> <i class="ti-reddit"></i> </button> <button class="btn btn-icon btn-instagram"> <i class="ti-instagram"></i> </button> </div> <div class="area-line"> <a data-target="#buttonSocial" href="javascript: void(0);" data-toggle="collapse"> See Full Implementation </a> <div id="buttonSocial" class="collapse"> <pre class="prettyprint"> <button class="btn btn-icon btn-twitter"> <i class="ti-twitter"></i> </button> <button class="btn btn-icon btn-facebook"> <i class="ti-facebook"> </i> </button> <button class="btn btn-icon btn-google"> <i class="ti-google"> </i> </button> <button class="btn btn-icon btn-linkedin"> <i class="ti-linkedin"></i> </button> <button class="btn btn-icon btn-pinterest"> <i class="ti-pinterest"></i> </button> <button class="btn btn-icon btn-youtube"> <i class="ti-youtube"> </i> </button> <button class="btn btn-icon btn-tumblr"> <i class="ti-tumblr"> </i> </button> <button class="btn btn-icon btn-github"> <i class="ti-github"></i> </button> <button class="btn btn-icon btn-dribbble"> <i class="ti-dribbble"></i> </button> <button class="btn btn-icon btn-reddit"> <i class="ti-reddit"></i> </button> <button class="btn btn-icon btn-instagram"> <i class="ti-instagram"></i> </button> </pre> </div> </div> </div>   <div class="tim-row" id="checkbox-row"> <h2> Checkboxes <small>- v1.0.0</small> <small><a href="../examples/forms/extended.html">Live Demo</a></small> </h2> <legend></legend> <p> <div class="checkbox"> <input id="checkbox1" type="checkbox"> <label for="checkbox1"> Unchecked </label> </div> <div class="checkbox"> <input id="checkbox2" type="checkbox" checked=""> <label for="checkbox2"> Checked </label> </div> <div class="checkbox"> <input id="checkbox3" type="checkbox" disabled=""> <label for="checkbox3"> Disabled unchecked </label> </div> <div class="checkbox"> <input id="checkbox4" type="checkbox" checked="" disabled=""> <label for="checkbox4"> Disabled checked </label> </div> </p> <div class="area-line"> <a data-target="#awesomebootstrapcheckboxes" href="javascript: void(0);" data-toggle="collapse"> See Full Implementation </a> <div id="awesomebootstrapcheckboxes" class="collapse"> <pre class="prettyprint"> <div class="checkbox"> <input id="checkbox1" type="checkbox"> <label for="checkbox1"> Unchecked </label> </div> <div class="checkbox"> <input id="checkbox2" type="checkbox" checked=""> <label for="checkbox2"> Checked </label> </div> <div class="checkbox"> <input id="checkbox3" type="checkbox" disabled=""> <label for="checkbox3"> Disabled unchecked </label> </div> <div class="checkbox"> <input id="checkbox4" type="checkbox" checked="" disabled=""> <label for="checkbox4"> Disabled checked </label> </div> </pre> </div> </div> </div>   <div class="tim-row" id="radio-row"> <h2> Radio Buttons <small>- v1.0.0</small> <small><a href="../examples/forms/extended.html">Live Demo</a></small> </h2> <legend></legend> <p> <div class="radio"> <input type="radio" name="radio1" id="radio1" value="option1"> <label for="radio1"> Radio is off </label> </div> <div class="radio"> <input type="radio" name="radio1" id="radio2" value="option2" checked=""> <label for="radio2"> Radio is on </label> </div> <div class="radio"> <input type="radio" name="radio3" id="radio3" value="option1" disabled=""> <label for="radio3"> Disabled radio is off </label> </div> <div class="radio"> <input type="radio" name="radio4" id="radio4" value="option1" checked="" disabled=""> <label for="radio4"> Disabled radio is on </label> </div> </p> <div class="area-line"> <a data-target="#awesomebootstrapradios" href="javascript: void(0);" data-toggle="collapse"> See Full Implementation </a> <div id="awesomebootstrapradios" class="collapse"> <pre class="prettyprint"> <div class="radio"> <input type="radio" name="radio1" id="radio1" value="option1"> <label for="radio1"> Radio is off </label> </div> <div class="radio"> <input type="radio" name="radio1" id="radio2" value="option2" checked=""> <label for="radio2"> Radio is on </label> </div> <div class="radio"> <input type="radio" name="radio3" id="radio3" value="option1" disabled=""> <label for="radio3"> Disabled radio is off </label> </div> <div class="radio"> <input type="radio" name="radio4" id="radio4" value="option1" checked="" disabled=""> <label for="radio4"> Disabled radio is on </label> </div> </pre> </div> </div> </div>   <div class="tim-row" id="switch-row"> <h2> Switches <small>- v3.3.2</small> <small><a href="../examples/forms/extended.html">Live Demo</a></small> </h2> <legend></legend> <p> If you want to use something more special than a checkbox, we recommend the switch. You can use it as plain, with text or with icons. The default version is the one with text (on and off states). </p> <input type="checkbox" class="switch" /> <input type="checkbox" class="switch" checked /> <input type="checkbox" class="switch-plain" /> <input type="checkbox" class="switch-icon" checked /> <br /> <div class="area-line"> <a data-target="#switchColor" href="javascript: void(0);" data-toggle="collapse"> See Full Implementation </a> <div id="switchColor" class="collapse"> <pre class="prettyprint"> <input type="checkbox" class="switch" /> <input type="checkbox" class="switch" checked /> <input type="checkbox" class="switch-plain" /> <input type="checkbox" class="switch-icon" checked /> /* Javascript */ /* Here you change the color of the switch with one of our colours: danger, warning, success, info, primary */ /* These lines of code are located in assets/js/paper-dashboard.js */ $('.switch').bootstrapSwitch({ onColor: 'primary' ]}); </pre> </div> </div> </div>   <div class="tim-row" id="dropdown-row"> <h2> Dropdown <small><a href="../examples/forms/extended.html">Live Demo</a></small> </h2> <legend></legend> <p> We are very proud to present the dropdown, we added a subtle animation for this classic widget. <br /> Here is an example and the code: </p> <div class="row"> <div class="col-md-3"> <div class="dropdown"> <a href="#" class="btn dropdown-toggle" data-toggle="dropdown"> Regular <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#paper">Action</a></li> <li><a href="#paper">Another action</a></li> <li><a href="#paper">Something else here</a></li> <li class="divider"></li> <li><a href="#paper">Separated link</a></li> <li class="divider"></li> <li><a href="#paper">One more separated link</a></li> </ul> </div> </div> </div> <div class="area-line"> <a data-target="#dropdown" href="javascript: void(0);" data-toggle="collapse">See full implementation</a> <div id="dropdown" class="collapse"> <pre class="prettyprint"> <div class="dropdown"> <a href="#" class="btn dropdown-toggle" data-toggle="dropdown"> Regular <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#paper">Action</a></li> <li><a href="#paper">Another action</a></li> <li><a href="#paper">Something else here</a></li> <li class="divider"></li> <li><a href="#paper">Separated link</a></li> <li class="divider"></li> <li><a href="#paper">One more separated link</a></li> </ul> </div> </pre> </div> </div> </div>   <div class="tim-row" id="inputs-row"> <h2>Inputs <small><a href="../examples/forms/regular.html">Live Demo</a></small> </h2> <legend></legend> <p> We restyled the Bootstrap input to give it a flat, minimal look. You can use the classic look, different colours and states or input groups. </p> <div class="row"> <div class="col-md-6"> <div class="form-group"> <input type="text" value="" placeholder="Input" class="form-control" /> </div> </div> <div class="col-md-6"> <div class="form-group has-success"> <input type="text" value="Success" class="form-control" /> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group has-error has-feedback"> <input type="text" value="Error" class="form-control" /> <span class="fa fa-close form-control-feedback"></span> </div> </div> <div class="col-md-6"> <div class="input-group"> <input type="text" value="Group Addon" class="form-control"> <span class="input-group-addon"><i class="fa fa-group"></i></span> </div> </div> </div> <div class="area-line"> <a data-target="#inputs" href="javascript: void(0);" data-toggle="collapse">See full implementation</a> <div id="inputs" class="collapse"> <pre class="prettyprint"> <div class="form-group"> <input type="text" value="" placeholder="Input" class="form-control" /> </div> <div class="form-group has-success"> <input type="text" value="Success" class="form-control" /> </div> <div class="form-group has-error has-feedback"> <input type="text" value="Error" class="form-control" /> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div> <div class="input-group"> <input type="text" value="Group Addon" class="form-control"> <span class="input-group-addon"><i class="fa fa-group"></i></span> </div> </pre> </div> </div> </div>   <div class="tim-row" id="select-row"> <h2>Bootstrap SelectPicker<small>v1.12.1 -</small> <small><a href="../examples/forms/extended.html">Live Demo</a></small> </h2> <legend></legend> <p> There are 2 ways to use this input: as a normal select, in which case you need to specify the style as <code>.form-control</code>, or as a button, in which case you have to specify the style as <code>.btn-{type}</code>. You can also have multiple select options by using the <code>multiple</code> attribute on the select tag. Here are some coded examples. To see the original documentation, please check out Silvio Moreto <a href="https://silviomoreto.github.io/bootstrap-select" target="_blank">repo on GitHub</a>. </p> <div class="row"> <div class="col-sm-4"> <select class="selectpicker" data-style="btn btn-danger btn-block" title="Single Select" data-size="7"> <option value="id">Bahasa Indonesia</option> <option value="ms">Bahasa Melayu</option> <option value="ca">Català</option> <option value="da">Dansk</option> <option value="de">Deutsch</option> <option value="en">English</option> <option value="es">Español</option> <option value="el">Eλληνικά</option> <option value="fr">Français</option> <option value="it">Italiano</option> <option value="hu">Magyar</option> <option value="nl">Nederlands</option> <option value="no">Norsk</option> <option value="pl">Polski</option> <option value="pt">Português</option> <option value="fi">Suomi</option> <option value="sv">Svenska</option> <option value="tr">Türkçe</option> <option value="is">Íslenska</option> <option value="cs">Čeština</option> <option value="ru">Русский</option> <option value="th">ภาษาไทย</option> <option value="zh">中文 (简体)</option> <option value="zh-TW">中文 (繁體)</option> <option value="ja">日本語</option> <option value="ko">한국어</option> </select> </div> <div class="col-sm-4"> <select multiple title="Multiple Select" class="selectpicker" data-style="btn-info btn-fill btn-block" data-size="7"> <option value="ARS">ARS</option> <option value="AUD">AUD</option> <option value="BRL">BRL</option> <option value="CAD">CAD</option> <option value="CHF">CHF</option> <option value="CNY">CNY</option> <option value="CZK">CZK</option> <option value="DKK">DKK</option> <option value="EUR">EUR</option> <option value="GBP">GBP</option> <option value="HKD">HKD</option> <option value="HUF">HUF</option> <option value="IDR">IDR</option> <option value="ILS">ILS</option> <option value="INR">INR</option> <option value="JPY">JPY</option> <option value="KRW">KRW</option> <option value="MYR">MYR</option> <option value="MXN">MXN</option> <option value="NOK">NOK</option> <option value="NZD">NZD</option> <option value="PHP">PHP</option> <option value="PLN">PLN</option> <option value="RUB">RUB</option> <option value="SEK">SEK</option> <option value="SGD">SGD</option> <option value="TWD">TWD</option> <option value="USD">USD</option> <option value="VND">VND</option> <option value="ZAR">ZAR</option> </select> </div> </div> <div class="area-line"> <a data-target="#customizableSelect" href="javascript: void(0);" data-toggle="collapse">See full implementation</a> <div id="customizableSelect" class="collapse"> <pre class="prettyprint">  <select class="selectpicker" data-style="btn btn-danger btn-block" title="Single Select" data-size="7"> <option value="id">Bahasa Indonesia</option> <option value="ms">Bahasa Melayu</option> ... </select>  <select multiple title="Multiple Select" class="selectpicker" data-style="btn-info btn-fill btn-block" data-size="7"> <option value="ARS">ARS</option> <option value="AUD">AUD</option> ... </select>  if($(".selectpicker").length != 0){ $(".selectpicker").selectpicker(); } </pre> </div> </div> </div>   <div class="tim-row" id="tags-row"> <h2>jQuery Tagsinput <small>v0.8.0 -</small> <small><a href="../examples/forms/extended.html">Live Demo</a></small> </h2> <legend></legend> <p> If you want to use tags, we now offer you 2 possibilities: simple tags and coloured tags, that you can use by adding the necessary colour class. For more information please check <a href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/" target="_blank">Full Github Documentation</a>. </p> <input type="text" value="Minimal, Light, New, Friends" class="tagsinput" data-role="tagsinput" data-color="success"/> <div class="area-line"> <a data-target="#tags" href="javascript: void(0);" data-toggle="collapse">See full implementation</a> <div id="tags" class="collapse"> <pre class="prettyprint">  <input type="text" value="Minimal, Light, New, Friends" class="tagsinput" data-role="tagsinput" data-color="success"/>  $('.tagsinput').tagsinput(); </pre> </div> </div> </div>   <div class="tim-row" id="textarea-row"> <h2>Textarea <small><a href="../examples/forms/regular.html" target="_blank">Live Demo</a></small> </h2> <legend></legend> <p>We added custom style for the textarea, so it looks similar to all other inputs.</p> <textarea class="form-control" placeholder="Here can be your nice text" rows="3"></textarea> <div class="area-line"> <a data-target="#textarea" href="javascript: void(0);" data-toggle="collapse">See full implementation</a> <div id="textarea" class="collapse"> <pre class="prettyprint"> <textarea class="form-control" placeholder="Here can be your nice text" rows="3"></textarea> </pre> </div> </div> </div>   <div class="tim-row" id="navbar-row"> <h2>Navbar </h2> <legend></legend> <p> We restyled the classic Bootstrap Navbar: </p> <div id="navbar"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Dashboard</a> </div> <div class="collapse navbar-collapse"> <form class="navbar-form navbar-left navbar-search-form" role="search"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-search"></i></span> <input type="text" value="" class="form-control" placeholder="Search..."> </div> </form> <ul class="nav navbar-nav navbar-right"> <li> <a href="#"> <i class="fa fa-line-chart"></i> <p>Stats</p> </a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-gavel"></i> <p class="hidden-md hidden-lg"> Actions <b class="caret"></b> </p> </a> <ul class="dropdown-menu"> <li><a href="#">Create New Post</a></li> <li><a href="#">Manage Something</a></li> <li><a href="#">Do Nothing</a></li> <li><a href="#">Submit to live</a></li> <li class="divider"></li> <li><a href="#">Another Action</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-bell-o"></i> <span class="notification">5</span> <p class="hidden-md hidden-lg"> <b class="caret"></b> </p> </a> <ul class="dropdown-menu"> <li><a href="#">Notification 1</a></li> <li><a href="#">Notification 2</a></li> <li><a href="#">Notification 3</a></li> <li><a href="#">Notification 4</a></li> <li><a href="#">Another notification</a></li> </ul> </li> <li class="dropdown dropdown-with-icons"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-list"></i> <p class="hidden-md hidden-lg"> More <b class="caret"></b> </p> </a> <ul class="dropdown-menu dropdown-with-icons"> <li> <a href="#"> <i class="pe-7s-mail"></i> Messages </a> </li> <li> <a href="#"> <i class="pe-7s-help1"></i> Help Center </a> </li> <li> <a href="#"> <i class="pe-7s-tools"></i> Settings </a> </li> <li class="divider"></li> <li> <a href="#"> <i class="pe-7s-lock"></i> Lock Screen </a> </li> <li> <a href="#" class="text-danger"> <i class="pe-7s-close-circle"></i> Log out </a> </li> </ul> </li> </ul> </div> </div> </nav> <div class="area-line"> <a data-target="#navbarCode" href="javascript: void(0);" data-toggle="collapse">See full implementation</a> <div id="navbarCode" class="collapse"> <pre class="prettyprint"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Dashboard</a> </div> <div class="collapse navbar-collapse"> <form class="navbar-form navbar-left navbar-search-form" role="search"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-search"></i></span> <input type="text" value="" class="form-control" placeholder="Search..."> </div> </form> <ul class="nav navbar-nav navbar-right"> <li> <a href="#"> <i class="fa fa-line-chart"></i> <p>Stats</p> </a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-gavel"></i> <p class="hidden-md hidden-lg">Actions</p> </a> <ul class="dropdown-menu"> <li><a href="#">Create New Post</a></li> <li><a href="#">Manage Something</a></li> <li><a href="#">Do Nothing</a></li> <li><a href="#">Submit to live</a></li> <li class="divider"></li> <li><a href="#">Another Action</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-bell-o"></i> <span class="notification">5</span> <p class="hidden-md hidden-lg">Notifications</p> </a> <ul class="dropdown-menu"> <li><a href="#">Notification 1</a></li> <li><a href="#">Notification 2</a></li> <li><a href="#">Notification 3</a></li> <li><a href="#">Notification 4</a></li> <li><a href="#">Another notification</a></li> </ul> </li> <li class="dropdown dropdown-with-icons"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-list"></i> <p class="hidden-md hidden-lg">More</p> </a> <ul class="dropdown-menu dropdown-with-icons"> <li> <a href="#"> <i class="pe-7s-mail"></i> Messages </a> </li> <li> <a href="#"> <i class="pe-7s-help1"></i> Help Center </a> </li> <li> <a href="#"> <i class="pe-7s-tools"></i> Settings </a> </li> <li class="divider"></li> <li> <a href="#"> <i class="pe-7s-lock"></i> Lock Screen </a> </li> <li> <a href="#" class="text-danger"> <i class="pe-7s-close-circle"></i> Log out </a> </li> </ul> </li> </ul> </div> </div> </nav> </pre> </div> </div> <p class="space-top"> <b>Fixed Navbar: </b> If you want to have a "Fixed Navbar" on Desktop and Mobile please add the class <code>navbar-fixed</code> on the tag <code>nav</code> and move the entire <code>nav</code> structure outside of the div with class <code>main-panel</code>. Check the example implementation for more details: </p> <div id="navbar"> <div class="area-line"> <a data-target="#navbarCodeFixed" href="javascript: void(0);" data-toggle="collapse">Example implementation</a> <div id="navbarCodeFixed" class="collapse"> <pre class="prettyprint"> <div class="sidebar" data-color="orange" data-image="../assets/img/full-screen-image-3.jpg"> .... </div> <nav class="navbar navbar-default navbar-fixed"> <div class="container-fluid"> .... </div> </nav> <div class="main-panel"> <-- .navbar used to be here, but was moved outside of this div --> .... </div> </pre> </div> </div> <p class="space-top"> Besides the default navbar, we added 5 colors for the 5 classes: primary, info, success, warning, danger. If you want to use one of them, you have to replace the <code>navbar-default</code> with the class for the chosen color <code>navbar-ct-{class}</code>. </p> <div id="navbar-blue"> <nav class="navbar navbar-ct-primary"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Dashboard</a> </div> <div class="collapse navbar-collapse"> <form class="navbar-form navbar-left navbar-search-form" role="search"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-search"></i></span> <input type="text" value="" class="form-control" placeholder="Search..."> </div> </form> <ul class="nav navbar-nav navbar-right"> <li> <a href="#"> <i class="fa fa-line-chart"></i> <p>Stats</p> </a> </li> </ul> </div> </div> </nav> </div>  <div id="navbar-azure"> <nav class="navbar navbar-ct-info"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Dashboard</a> </div> <div class="collapse navbar-collapse"> <form class="navbar-form navbar-left navbar-search-form" role="search"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-search"></i></span> <input type="text" value="" class="form-control" placeholder="Search..."> </div> </form> <ul class="nav navbar-nav navbar-right"> <li> <a href="#"> <i class="fa fa-line-chart"></i> <p>Stats</p> </a> </li> </ul> </div> </div> </nav> </div>  <div id="navbar-green"> <nav class="navbar navbar-ct-success"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Dashboard</a> </div> <div class="collapse navbar-collapse"> <form class="navbar-form navbar-left navbar-search-form" role="search"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-search"></i></span> <input type="text" value="" class="form-control" placeholder="Search..."> </div> </form> <ul class="nav navbar-nav navbar-right"> <li> <a href="#"> <i class="fa fa-line-chart"></i> <p>Stats</p> </a> </li> </ul> </div> </div> </nav> </div>  <div id="navbar-orange"> <nav class="navbar navbar-ct-warning"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Dashboard</a> </div> <div class="collapse navbar-collapse"> <form class="navbar-form navbar-left navbar-search-form" role="search"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-search"></i></span> <input type="text" value="" class="form-control" placeholder="Search..."> </div> </form> <ul class="nav navbar-nav navbar-right"> <li> <a href="#"> <i class="fa fa-line-chart"></i> <p>Stats</p> </a> </li> </ul> </div> </div> </nav> </div>  <div id="navbar-red"> <nav class="navbar navbar-ct-danger"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Dashboard</a> </div> <div class="collapse navbar-collapse"> <form class="navbar-form navbar-left navbar-search-form" role="search"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-search"></i></span> <input type="text" value="" class="form-control" placeholder="Search..."> </div> </form> <ul class="nav navbar-nav navbar-right"> <li> <a href="#"> <i class="fa fa-line-chart"></i> <p>Stats</p> </a> </li> </ul> </div> </div> </nav> </div> </div>  <div class="tim-row" id="sliders-row"> <h2> noUiSlider <small>11.1.0 -</small> <small><a href="../examples/forms/extended.html" target="_blank">Live Demo</a></small> </h2> <legend></legend> <p>We restyled jQuery UI slider, while keeping the design consistent. For more information please check <a href="https://github.com/leongersen/noUiSlider" target="_blank">Full Github Documentation</a>. </p> <div id="sliderRegular" class="slider slider-success"></div> <br> <div id="sliderDouble" class="slider slider-info"></div> <div class="area-line"> <a data-target="#sliderMarkup" href="javascript: void(0);" data-toggle="collapse" class="" aria-expanded="true"> See Markup and Javascript</a> <div id="sliderMarkup" class="collapse in" aria-expanded="true" style=""> <pre class="prettyprint prettyprinted" style=""><span class="com"></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"sliderRegular"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"slider slider-success"</span><span class="tag">></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"sliderDouble"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"slider slider-info"</span><span class="tag">></div></span><span class="pln"> </span><span class="com"></span><span class="pln"> var slider = document.getElementById("sliderRegular"'); noUiSlider.create(slider, { start: 40, connect: [true,false], range: { min: 0, max: 100 } }); var slider2 = document.getElementById("sliderDouble"); noUiSlider.create(slider2, { start: [ 20, 60 ], connect: true, range: { min: 0, max: 100 } });</span></pre> </div> </div> </div>  <div class="tim-row" id="cards-row"> <h2>Cards</h2> <legend></legend> <p>We think cards are one of the best ways to organise your information. We went all out with possibilities and we recommended finding the right fit for your product. The general class for a card is called <code>.card</code>. The information inside the card usually goes inside the content (class <code>.card-content</code>). The content can have three types of elements inside: <code>.card-title</code> and <code>.category</code>. You can optionally add a <code>.card-footer</code>, if you want to place a call-to-action. You can change the color of the header using the <code>data-background-color</code> attribute like this: <code>data-background-color="{ purple | blue | green | orange | brown }"</code>.</p> <p>If you want to use the cards on white background you can remove it's shadow using the class <code>.card-plain</code>.</p> <br> <h5>Card with circle chart</h5> <legend></legend> <p>We've created some special cards with a circle chart. You can change the number of circle percentage by putting a value in <code>data-percent</code>.</p> <div class="row"> <div class="col-lg-4 col-sm-6"> <div class="card card-circle-chart" data-background-color="blue"> <div class="card-header text-center"> <h5 class="card-title">Dashboard</h5> <p class="description">Monthly sales target</p> </div> <div class="card-content"> <div id="chartDashboardDoc" class="chart-circle" data-percent="70">70%</div> </div> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="card card-circle-chart" data-background-color="green"> <div class="card-header text-center"> <h5 class="card-title">Orders</h5> <p class="description">Completed</p> </div> <div class="card-content"> <div id="chartOrdersDoc" class="chart-circle" data-percent="34">34%</div> </div> </div> </div> </div> <div class="area-line"> <a data-target="#cards-circleCode" href="javascript: void(0);" data-toggle="collapse"> See Markup and Javascript</a> <div id="cards-circleCode" class="collapse"> <pre class="prettyprint">  <div class="card card-circle-chart" data-background-color="blue"> <div class="card-header text-center"> <h5 class="card-title">Dashboard</h5> <p class="description">Monthly sales target</p> </div> <div class="card-content"> <div id="chartDashboardDoc" class="chart-circle" data-percent="70">70%</div> </div> </div> <div class="card card-circle-chart" data-background-color="green"> <div class="card-header text-center"> <h5 class="card-title">Orders</h5> <p class="description">Completed</p> </div> <div class="card-content"> <div id="chartOrdersDoc" class="chart-circle" data-percent="34">34%</div> </div> </div>  $('#chartDashboardDoc, #chartOrdersDoc').easyPieChart({ lineWidth: 6, size: 160, scaleColor: false, trackColor: "rgba(255,255,255,.25)", barColor: "#FFFFFF", animate: ({duration: 5000, enabled: true}) }); </pre> </div> </div> <br> <h5>Card with Chartist</h5> <legend></legend> <div class="row"> <div class="col-lg-5 col-sm-6"> <div class="card"> <div class="card-content"> <div class="row"> <div class="col-xs-7"> <div class="numbers pull-left"> $34,657 </div> </div> <div class="col-xs-5"> <div class="pull-right"> <span class="label label-success"> +18% </span> </div> </div> </div> <h6 class="big-title">total earnings <span class="text-muted">in last</span> ten <span class="text-muted">quarters</span></h6> <div id="chartTotalEarningsDoc"></div> </div> <div class="card-footer"> <hr> <div class="footer-title">Financial Statistics</div> <div class="pull-right"> <button class="btn btn-info btn-fill btn-icon btn-sm"> <i class="ti-plus"></i> </button> </div> </div> </div> </div> <div class="col-lg-5 col-sm-6"> <div class="card"> <div class="card-content"> <div class="row"> <div class="col-xs-7"> <div class="numbers pull-left"> 169 </div> </div> <div class="col-xs-5"> <div class="pull-right"> <span class="label label-danger"> -14% </span> </div> </div> </div> <h6 class="big-title">total subscriptions <span class="text-muted">in last</span> 7 days</h6> <div id="chartTotalSubscriptionsDoc"></div> </div> <div class="card-footer"> <hr> <div class="footer-title">View all members</div> <div class="pull-right"> <button class="btn btn-default btn-fill btn-icon btn-sm"> <i class="ti-angle-right"></i> </button> </div> </div> </div> </div> </div> <div class="area-line"> <a data-target="#cards-chartistCode" href="javascript: void(0);" data-toggle="collapse"> See Markup and Javascript</a> <div id="cards-chartistCode" class="collapse"> <pre class="prettyprint">  <div class="col-lg-4 col-sm-6"> <div class="card"> <div class="card-content"> <div class="row"> <div class="col-xs-7"> <div class="numbers pull-left"> $34,657 </div> </div> <div class="col-xs-5"> <div class="pull-right"> <span class="label label-success"> +18% </span> </div> </div> </div> <h6 class="big-title">total earnings <span class="text-muted">in last</span> ten <span class="text-muted">quarters</span> </h6> <div id="chartTotalEarningsDoc"></div> </div> <div class="card-footer"> <hr> <div class="footer-title">Financial Statistics</div> <div class="pull-right"> <button class="btn btn-info btn-fill btn-icon btn-sm"> <i class="ti-plus"></i> </button> </div> </div> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="card"> <div class="card-content"> <div class="row"> <div class="col-xs-7"> <div class="numbers pull-left"> 169 </div> </div> <div class="col-xs-5"> <div class="pull-right"> <span class="label label-danger"> -14% </span> </div> </div> </div> <h6 class="big-title">total subscriptions <span class="text-muted">in last</span> 7 days </h6> <div id="chartTotalSubscriptionsDoc"></div> </div> <div class="card-footer"> <hr> <div class="footer-title">View all members</div> <div class="pull-right"> <button class="btn btn-default btn-fill btn-icon btn-sm"> <i class="ti-angle-right"></i> </button> </div> </div> </div> </div>  /* **************** Chart Total Earnings - single line ******************** */ var dataPrice = { labels: ["Jan","Feb","Mar", "April", "May", "June"], series: [ [230, 340, 400, 300, 570, 500, 800] ] }; var optionsPrice = { showPoint: false, lineSmooth: true, height: "210px", axisX: { showGrid: false, showLabel: true }, axisY: { offset: 40, showGrid: false }, low: 0, high: "auto", classNames: { line: "ct-line ct-green" } }; Chartist.Line("#chartTotalEarningsDoc", dataPrice, optionsPrice); /* **************** Chart Subscriptions - single line ******************** */ var dataDays = { labels: ["M","T","W", "T", "F", "S","S"], series: [ [60, 50, 30, 50, 70, 60, 90, 100] ] }; var optionsDays = { showPoint: false, lineSmooth: true, height: "210px", axisX: { showGrid: false, showLabel: true }, axisY: { offset: 40, showGrid: false }, low: 0, high: "auto", classNames: { line: "ct-line ct-red" } }; Chartist.Line("#chartTotalSubscriptionsDoc", dataDays, optionsDays); </pre> </div> </div> <br> <h5>Card Login</h5> <legend></legend> <div class="row"> <div class="col-md-5"> <div class="card card-login" data-background="color" data-color="blue"> <div class="card-header"> <h3 class="card-title">Login</h3> </div> <div class="card-content"> <div class="form-group"> <label>Email address</label> <input type="email" placeholder="Enter email" class="form-control input-no-border"> </div> <div class="form-group"> <label>Password</label> <input type="password" placeholder="Password" class="form-control input-no-border"> </div> </div> <div class="card-footer text-center"> <button type="submit" class="btn btn-fill btn-wd ">Let's go</button> <div class="forgot"> <a href="#pablo">Forgot your password?</a> </div> </div> </div> </div> </div> <div class="area-line"> <a data-target="#cards-loginCode" href="javascript: void(0);" data-toggle="collapse"> See Full implementation</a> <div id="cards-loginCode" class="collapse"> <pre class="prettyprint"> <div class="card card-login" data-background="color" data-color="blue"> <div class="card-header"> <h3 class="card-title">Login</h3> </div> <div class="card-content"> <div class="form-group"> <label>Email address</label> <input type="email" placeholder="Enter email" class="form-control input-no-border"> </div> <div class="form-group"> <label>Password</label> <input type="password" placeholder="Password" class="form-control input-no-border"> </div> </div> <div class="footer text-center"> <button type="submit" class="btn btn-fill btn-wd ">Let's go</button> <div class="forgot"> <a href="#pablo">Forgot your password?</a> </div> </div> </div> </pre> </div> </div> <br> <h5>Card Lock</h5> <legend></legend> <div class="row"> <div class="col-md-5"> <div class="card card-lock"> <div class="author"> <img class="avatar" src="../assets/img/faces/face-2.jpg" alt="..."> </div> <h4>Chet Faker</h4> <div class="form-group"> <input type="password" placeholder="Enter Password" class="form-control"> </div> <button type="button" class="btn btn-wd">Unlock</button> </div> </div> </div> <div class="area-line"> <a data-target="#cards-lockCode" href="javascript: void(0);" data-toggle="collapse"> See Full implementation</a> <div id="cards-lockCode" class="collapse"> <pre class="prettyprint"> <div class="card card-lock"> <div class="author"> <img class="avatar" src="../assets/img/faces/face-2.jpg" alt="..."> </div> <h4>Chet Faker</h4> <div class="form-group"> <input type="password" placeholder="Enter Password" class="form-control"> </div> <button type="button" class="btn btn-wd">Unlock</button> </div> </pre> </div> </div> </div>   <div class="tim-row" id="panels-row"> <h2>Panels <small><a href="../examples/components/panels.html" target="_blank">Live Demo</a></small> </h2> <legend></legend> <p> If you have information that you don't need to show at once, we suggest you use tabs. You can use them horizontally or vertically. Here are the coded examples: </p> <div class="space-top"></div> <div class="row"> <div class="col-md-5"> <div class="nav-tabs-navigation"> <div class="nav-tabs-wrapper"> <ul id="tabs" class="nav nav-tabs" data-tabs="tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#messages" data-toggle="tab">Messages</a></li> </ul> </div> </div> <div id="my-tab-content" class="tab-content text-center"> <div class="tab-pane active" id="home"> <p>Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.</p> </div> <div class="tab-pane" id="profile"> <p>Here is your profile.</p> </div> <div class="tab-pane" id="messages"> <p>Here are your messages.</p> </div> </div> </div> <div class="col-md-7"> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-6"> <ul class="nav nav-stacked" role="tablist"> <li class="active"> <a href="#info" role="tab" data-toggle="tab"> Info </a> </li> <li> <a href="#description" role="tab" data-toggle="tab"> Description </a> </li> <li> <a href="#concept" role="tab" data-toggle="tab"> Concept </a> </li> <li> <a href="#support" role="tab" data-toggle="tab"> Support </a> </li> <li> <a href="#extra" role="tab" data-toggle="tab"> Extra </a> </li> </ul> </div> <div class="col-md-8 col-sm-8 col-xs-6">  <div class="tab-content"> <div class="tab-pane active" id="info"> <p>Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.</p> <p>It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.</p> </div> <div class="tab-pane" id="description"> <p>The first thing you notice when you hold the phone is how great it feels in your hand. The cover glass curves down around the sides to meet the anodized aluminum enclosure in a remarkable, simplified design. </p> <p>There are no distinct edges. No gaps. Just a smooth, seamless bond of metal and glass that feels like one continuous surface.</p> </div> <div class="tab-pane" id="concept"> <p>It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.</p> <p>Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display. </p> </div> <div class="tab-pane" id="support"> <p>From the seamless transition of glass and metal to the streamlined profile, every detail was carefully considered to enhance your experience. So while its display is larger, the phone feels just right.</p> <p>It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.</p> </div> <div class="tab-pane" id="extra"> <p>Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display. </p> <p>It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.</p> </div> </div> </div> </div> </div> </div> <div class="area-line"> <a data-target="#tabsCode" href="javascript: void(0);" data-toggle="collapse"> See Full Implementation</a> <div id="tabsCode" class="collapse"> <pre class="prettyprint">  <div class="nav-tabs-navigation"> <div class="nav-tabs-wrapper"> <ul id="tabs" class="nav nav-tabs" data-tabs="tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#messages" data-toggle="tab">Messages</a></li> </ul> </div> </div> <div id="my-tab-content" class="tab-content text-center"> <div class="tab-pane active" id="home"> <p>Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.</p> </div> <div class="tab-pane" id="profile"> <p>Here is your profile.</p> </div> <div class="tab-pane" id="messages"> <p>Here are your messages.</p> </div> </div>  <div class="row"> <div class="col-md-4 col-sm-4 col-xs-6"> <ul class="nav nav-stacked" role="tablist"> <li class="active"> <a href="#info" role="tab" data-toggle="tab"> Info </a> </li> <li> <a href="#description" role="tab" data-toggle="tab"> Description </a> </li> <li> <a href="#concept" role="tab" data-toggle="tab"> Concept </a> </li> <li> <a href="#support" role="tab" data-toggle="tab"> Support </a> </li> <li> <a href="#extra" role="tab" data-toggle="tab"> Extra </a> </li> </ul> </div> <div class="col-md-8 col-sm-8 col-xs-6">  <div class="tab-content"> <div class="tab-pane active" id="info"> <p>Larger, yet.</p> </div> <div class="tab-pane" id="description"> <p>The first thing...</p> </div> <div class="tab-pane" id="concept"> <p>It’s one...</p> </div> <div class="tab-pane" id="support"> <p>From the...</p> </div> <div class="tab-pane" id="extra"> <p>Larger, yet...</p> </div> </div> </div> </div> </pre> </div> </div> </div>   <div class="tim-row" id="tables-row"> <h2>Tables <small><a href="../examples/tables/extended.html" target="_blank">Live Demo</a></small> </h2> <legend></legend> <p> All Boostrap classes for tables are supported and improved. Besides the simple and striped tables, we added tables that have actions and tables with switches. <br /> You can see coded examples below: </p> <h4>Simple Table with Actions</h4> <div class="table-responsive"> <table class="table"> <thead> <tr> <th class="text-center">#</th> <th>Name</th> <th>Job Position</th> <th>Since</th> <th class="text-right">Salary</th> <th class="text-right">Actions</th> </tr> </thead> <tbody> <tr> <td class="text-center">1</td> <td>Andrew Mike</td> <td>Develop</td> <td>2013</td> <td class="text-right">€ 99,225</td> <td class="td-actions text-right"> <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs"> <i class="fa fa-user"></i> </button> <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs"> <i class="fa fa-edit"></i> </button> <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs"> <i class="fa fa-times"></i> </button> </td> </tr> <tr> <td class="text-center">2</td> <td>John Doe</td> <td>Design</td> <td>2012</td> <td class="text-right">€ 89,241</td> <td class="td-actions text-right"> <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs"> <i class="fa fa-user"></i> </button> <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs"> <i class="fa fa-edit"></i> </button> <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs"> <i class="fa fa-times"></i> </button> </td> </tr> <tr> <td class="text-center">3</td> <td>Alex Mike</td> <td>Design</td> <td>2010</td> <td class="text-right">€ 92,144</td> <td class="td-actions text-right"> <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs"> <i class="fa fa-user"></i> </button> <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs"> <i class="fa fa-edit"></i> </button> <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs"> <i class="fa fa-times"></i> </button> </td> </tr> <tr> <td class="text-center">4</td> <td>Mike Monday</td> <td>Marketing</td> <td>2013</td> <td class="text-right">€ 49,990</td> <td class="td-actions text-right"> <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs"> <i class="fa fa-user"></i> </button> <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs"> <i class="fa fa-edit"></i> </button> <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs"> <i class="fa fa-times"></i> </button> </td> </tr> <tr> <td class="text-center">5</td> <td>Paul Dickens</td> <td>Communication</td> <td>2014</td> <td class="text-right">€ 69,201</td> <td class="td-actions text-right"> <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs"> <i class="fa fa-user"></i> </button> <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs"> <i class="fa fa-edit"></i> </button> <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs"> <i class="fa fa-times"></i> </button> </td> </tr> </tbody> </table> </div> <div class="area-line"> <a data-target="#simpleTableWithActions" href="javascript: void(0);" data-toggle="collapse"> See Full Implementation</a> <div id="simpleTableWithActions" class="collapse"> <pre class="prettyprint"> <div class="table-responsive"> <table class="table"> <thead> <tr> <th class="text-center">#</th> <th>Name</th> <th>Job Position</th> <th>Since</th> <th class="text-right">Salary</th> <th class="text-right">Actions</th> </tr> </thead> <tbody> <tr> <td class="text-center">1</td> <td>Andrew Mike</td> <td>Develop</td> <td>2013</td> <td class="text-right">&euro; 99,225</td> <td class="td-actions text-right"> <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs"> <i class="fa fa-user"></i> </button> <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs"> <i class="fa fa-edit"></i> </button> <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs"> <i class="fa fa-times"></i> </button> </td> </tr> <tr> <td class="text-center">2</td> <td>John Doe</td> <td>Design</td> <td>2012</td> <td class="text-right">&euro; 89,241</td> <td class="td-actions text-right"> <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs"> <i class="fa fa-user"></i> </button> <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs"> <i class="fa fa-edit"></i> </button> <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs"> <i class="fa fa-times"></i> </button> </td> </tr> <tr> <td class="text-center">3</td> <td>Alex Mike</td> <td>Design</td> <td>2010</td> <td class="text-right">&euro; 92,144</td> <td class="td-actions text-right"> <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs"> <i class="fa fa-user"></i> </button> <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs"> <i class="fa fa-edit"></i> </button> <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs"> <i class="fa fa-times"></i> </button> </td> </tr> <tr> <td class="text-center">4</td> <td>Mike Monday</td> <td>Marketing</td> <td>2013</td> <td class="text-right">&euro; 49,990</td> <td class="td-actions text-right"> <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs"> <i class="fa fa-user"></i> </button> <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs"> <i class="fa fa-edit"></i> </button> <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs"> <i class="fa fa-times"></i> </button> </td> </tr> <tr> <td class="text-center">5</td> <td>Paul Dickens</td> <td>Communication</td> <td>2014</td> <td class="text-right">&euro; 69,201</td> <td class="td-actions text-right"> <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs"> <i class="fa fa-user"></i> </button> <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs"> <i class="fa fa-edit"></i> </button> <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs"> <i class="fa fa-times"></i> </button> </td> </tr> </tbody> </table> </div> </pre> </div> </div> <h4>Striped Table with Switches</h4> <div class="table-responsive"> <table class="table table-striped"> <thead> <tr> <th class="text-center">#</th> <th>Name</th> <th>Job Position</th> <th class="text-right">Salary</th> <th class="text-right">Active</th> </tr> </thead> <tbody> <tr> <td class="text-center">1</td> <td>Andrew Mike</td> <td>Develop</td> <td class="text-right">€ 99,225</td> <td class="text-right"> <div class="switch" data-on-label="" data-off-label=""> <input type="checkbox"/> </div> </td> </tr> <tr> <td class="text-center">2</td> <td>John Doe</td> <td>Design</td> <td class="text-right">€ 89,241</td> <td class="text-right"> <div class="switch" data-on-label="" data-off-label=""> <input type="checkbox"/> </div> </td> </tr> <tr> <td class="text-center">3</td> <td>Alex Mike</td> <td>Design</td> <td class="text-right">€ 92,144</td> <td class="text-right"> <div class="switch" data-on-label="" data-off-label=""> <input type="checkbox" checked/> </div> </td> </tr> <tr> <td class="text-center">4</td> <td>Mike Monday</td> <td>Marketing</td> <td class="text-right">€ 49,990</td> <td class="text-right"> <div class="switch" data-on-label="" data-off-label=""> <input type="checkbox" checked/> </div> </td> </tr> </tbody> </table> </div> <div class="area-line"> <a data-target="#stripedTableWithCheckboxes" href="javascript: void(0);" data-toggle="collapse"> See Full Implementation</a> <div id="stripedTableWithCheckboxes" class="collapse"> <pre class="prettyprint"> <table class="table table-striped"> <thead> <tr> <th class="text-center">#</th> <th>Name</th> <th>Job Position</th> <th class="text-right">Salary</th> <th class="text-right">Active</th> </tr> </thead> <tbody> <tr> <td class="text-center">1</td> <td>Andrew Mike</td> <td>Develop</td> <td class="text-right">&euro; 99,225</td> <td class="text-right"> <div class="switch" data-on-label="" data-off-label=""> <input type="checkbox"/> </div> </td> </tr> <tr> <td class="text-center">2</td> <td>John Doe</td> <td>Design</td> <td class="text-right">&euro; 89,241</td> <td class="text-right"> <div class="switch" data-on-label="" data-off-label=""> <input type="checkbox"/> </div> </td> </tr> <tr> <td class="text-center">3</td> <td>Alex Mike</td> <td>Design</td> <td class="text-right">&euro; 92,144</td> <td class="text-right"> <div class="switch" data-on-label="" data-off-label=""> <input type="checkbox" checked/> </div> </td> </tr> <tr> <td class="text-center">4</td> <td>Mike Monday</td> <td>Marketing</td> <td class="text-right">&euro; 49,990</td> <td class="text-right"> <div class="switch" data-on-label="" data-off-label=""> <input type="checkbox" checked/> </div> </td> </tr> </tbody> </table> </pre> </div> </div> <h4>Big Boy Table</h4> <p>We have also created the Big Boy table, that can be used for content management systems or in the checkout process of an e-commerce. It offers extended functionality, like adding pictures, descriptions and actions.</p> <div class="table-responsive"> <table class="table table-shopping"> <thead> <tr> <th class="text-center"></th> <th></th> <th class="text-right">Price</th> <th class="text-right">Quantity</th> <th class="text-right">Total</th> </tr> </thead> <tbody> <tr> <td> <div class="img-container"> <img src="../assets/img/tables/agenda.png" alt="Agenda"> </div> </td> <td class="td-product"> <strong>Get Shit Done Notebook</strong> <p> Most beautiful agenda for the office.</p> </td> <td class="td-price"> <small>€</small>49 </td> <td class="td-number td-quantity"> 1 <div class="btn-group"> <button class="btn btn-sm"><i class="ti-minus"></i></button> <button class="btn btn-sm"><i class="ti-plus"></i></button> </div> </td> <td class="td-number"> <small>€</small>49 </td> </tr> </tbody> </table> </div> <div class="area-line"> <a data-target="#bigBoyTable" href="javascript: void(0);" data-toggle="collapse"> See Full Implementation</a> <div id="bigBoyTable" class="collapse"> <pre class="prettyprint"> <div class="table-responsive"> <table class="table table-shopping"> <thead> <tr> <th class="text-center"></th> <th></th> <th class="text-right">Price</th> <th class="text-right">Quantity</th> <th class="text-right">Total</th> </tr> </thead> <tbody> <tr> <td> <div class="img-container"> <img src="../assets/img/tables/agenda.png" alt="Agenda"> </div> </td> <td class="td-product"> <strong>Get Shit Done Notebook</strong> <p> Most beautiful agenda for the office.</p> </td> <td class="td-price"> <small>&euro;</small>49 </td> <td class="td-number td-quantity"> 1 <div class="btn-group"> <button class="btn btn-sm"><i class="ti-minus"></i></button> <button class="btn btn-sm"><i class="ti-plus"></i></button> </div> </td> <td class="td-number"> <small>&euro;</small>49 </td> </tr> </tbody> </table> </div> </pre> </div> </div> <h4>DataTables</h4> <p> To offer you the possibility to better work with tables, we have integrated a third party for datatables. We have changed the design for the inputs, buttons, typography, pagination and dropdown, so it can look consistent with the rest of the dashboard. <br /><br /> It contains methods for sorting columns, searching, paginations, ajax calls, actions on rows and many other functions. For detailed description regarding usage, please see <a href="https://bootstrap-table.wenzhixin.net.cn/documentation/">the original documentation</a> from our friend <a href="https://github.com/wenzhixin">Zhixin Wen</a>. <br /><br /> To get things going, you can start with the basic coded example below. </p> <div class="toolbar">  </div> <table id="bootstrap-table" class="table"> <thead> <th data-field="state" data-checkbox="true"></th> <th data-field="id" class="text-center">ID</th> <th data-field="name" data-sortable="true">Name</th> <th data-field="salary" data-sortable="true">Salary</th> <th data-field="country" data-sortable="true">Country</th> <th data-field="city">City</th> <th data-field="actions" class="td-actions text-right" data-events="operateEvents" data-formatter="operateFormatter">Actions</th> </thead> <tbody> <tr> <td></td> <td>1</td> <td>Dakota Rice</td> <td>$36,738</td> <td>Niger</td> <td>Oud-Turnhout</td> <td></td> </tr> <tr> <td></td> <td>2</td> <td>Minerva Hooper</td> <td>$23,789</td> <td>Curaçao</td> <td>Sinaai-Waas</td> <td></td> </tr> <tr> <td></td> <td>3</td> <td>Sage Rodriguez</td> <td>$56,142</td> <td>Netherlands</td> <td>Baileux</td> <td></td> </tr> </tbody> </table> <div class="area-line"> <a data-target="#dataTableExample" href="javascript: void(0);" data-toggle="collapse"> See Full Implementation</a> <div id="dataTableExample" class="collapse"> <pre class="prettyprint"> <div class="toolbar">  </div> <table id="bootstrap-table" class="table"> <thead> <th data-field="state" data-checkbox="true"></th> <th data-field="id" class="text-center">ID</th> <th data-field="name" data-sortable="true">Name</th> <th data-field="salary" data-sortable="true">Salary</th> <th data-field="country" data-sortable="true">Country</th> <th data-field="city">City</th> <th data-field="actions" class="td-actions text-right" data-events="operateEvents" data-formatter="operateFormatter">Actions</th> </thead> <tbody> <tr> <td></td> <td>1</td> <td>Dakota Rice</td> <td>$36,738</td> <td>Niger</td> <td>Oud-Turnhout</td> <td></td> </tr> <tr> <td></td> <td>2</td> <td>Minerva Hooper</td> <td>$23,789</td> <td>Curaçao</td> <td>Sinaai-Waas</td> <td></td> </tr> <tr> <td></td> <td>3</td> <td>Sage Rodriguez</td> <td>$56,142</td> <td>Netherlands</td> <td>Baileux</td> <td></td> </tr> </tbody> </table>  <script type="text/javascript"> var $table = $('#bootstrap-table'); $().ready(function(){ $table.bootstrapTable({ toolbar: ".toolbar", clickToSelect: true, showRefresh: true, search: true, showToggle: true, showColumns: true, pagination: true, searchAlign: 'left', pageSize: 8, clickToSelect: false, pageList: [8,10,25,50,100], formatShowingRows: function(pageFrom, pageTo, totalRows){ //do nothing here, we don't want to show the text "showing x of y from..." }, formatRecordsPerPage: function(pageNumber){ return pageNumber + " rows visible"; }, icons: { refresh: 'fa fa-refresh', toggle: 'fa fa-th-list', columns: 'fa fa-columns', detailOpen: 'fa fa-plus-circle', detailClose: 'fa fa-minus-circle' } }); //activate the tooltips after the data table is initialized $('[rel="tooltip"]').tooltip(); $(window).resize(function () { $table.bootstrapTable('resetView'); }); window.operateEvents = { 'click .view': function (e, value, row, index) { info = JSON.stringify(row); swal('You click view icon, row: ', info); console.log(info); }, 'click .edit': function (e, value, row, index) { info = JSON.stringify(row); swal('You click edit icon, row: ', info); console.log(info); }, 'click .remove': function (e, value, row, index) { console.log(row); $table.bootstrapTable('remove', { field: 'id', values: [row.id] }); } }; }); function operateFormatter(value, row, index) { return [ '<a rel="tooltip" title="View" class="btn btn-simple btn-info btn-icon table-action view" href="javascript:void(0)">', '<i class="fa fa-image"></i>', '</a>', '<a rel="tooltip" title="Edit" class="btn btn-simple btn-warning btn-icon table-action edit" href="javascript:void(0)">', '<i class="fa fa-edit"></i>', '</a>', '<a rel="tooltip" title="Remove" class="btn btn-simple btn-danger btn-icon table-action remove" href="javascript:void(0)">', '<i class="fa fa-remove"></i>', '</a>' ].join(''); } </script> </pre> </div> </div> </div>   <div class="tim-row" id="collapsable-row"> <h2> Collapsible Groups <small><a href="../examples/components/panels.html" target="_blank">Live Demo</a></small> </h2> <legend></legend> <p> We restyled the classic collapsable group, to make it look more like the other elements in paper dashboard. If you want to add a border for the panel, you can add the class <code>panel-border</code>. </p> <div id="acordeon"> <div class="panel-group" id="accordion"> <div class="panel panel-border panel-default"> <a data-toggle="collapse" href="#collapseOne"> <div class="panel-heading"> <h4 class="panel-title"> Default Collapsible Item 1 <i class="ti-angle-down"></i> </h4> </div> </a> <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-border panel-default"> <a data-toggle="collapse" href="#collapseTwo"> <div class="panel-heading"> <h4 class="panel-title"> Default Collapsible Item 1 <i class="ti-angle-down"></i> </h4> </div> </a> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-border panel-default"> <a data-toggle="collapse" href="#collapseThree"> <div class="panel-heading"> <h4 class="panel-title"> Default Collapsible Item 1 <i class="ti-angle-down"></i> </h4> </div> </a> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div> </div> <div class="area-line"> <a data-target="#acordeonCode" href="javascript: void(0);" data-toggle="collapse"> See Full Implementation</a> <div id="acordeonCode" class="collapse"> <pre class="prettyprint"> <div id="acordeon"> <div class="panel-group" id="accordion"> <div class="panel panel-border panel-default"> <a data-toggle="collapse" href="#collapseOne"> <div class="panel-heading"> <h4 class="panel-title"> Default Collapsible Item 1 <i class="ti-angle-down"></i> </h4> </div> </a> <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur... </div> </div> </div> <div class="panel panel-border panel-default"> <a data-toggle="collapse" href="#collapseTwo"> <div class="panel-heading"> <h4 class="panel-title"> Default Collapsible Item 1 <i class="ti-angle-down"></i> </h4> </div> </a> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur... </div> </div> </div> <div class="panel panel-border panel-default"> <a data-toggle="collapse" href="#collapseThree"> <div class="panel-heading"> <h4 class="panel-title"> Default Collapsible Item 1 <i class="ti-angle-down"></i> </h4> </div> </a> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur... </div> </div> </div> </div> </div> </pre> </div> </div> </div>   <div class="tim-row" id="notification-row"> <h2> Bootstrap Notify <small>- v3.1.5</small> <small><a href="../examples/components/notifications.html" target="_blank">Live Demo</a></small> </h2> <legend></legend> <p> The notifications for Paper Dashboard PRO are looking fresh and clean. They go great with the navbar. They come with 4 classes, each for a different color: <code>.alert-info</code>, <code>.alert-success</code>, <code>.alert-warning</code>, <code>.alert-danger</code>. <br /><br /> If you want to add special animations for them, we integrated a third party plugin called Bootstrap Notify. To see the original repository for it, check it out <a href="https://github.com/mouse0270/bootstrap-notify">here</a>. Out friend Robert McIntosh did a wonderful job. If you want to see a coded example, you can see it below. </p> <button class="btn btn-default" onclick="showNotification('top','right')">Top Right Notification</button> <div class="area-line"> <a data-target="#notificationCode" href="javascript: void(0);" data-toggle="collapse"> See Full Implementation</a> <div id="notificationCode" class="collapse"> <pre class="prettyprint">  <button class="btn btn-default" onclick="showNotification('top','right')">Top Right Notification</button>  function showNotification(from, align){ color = Math.floor((Math.random() * 4) + 1); $.notify({ icon: "ti-gift", message: "Welcome to <b>Paper Dashboard</b> - a beautiful freebie for every web developer." },{ type: type[color], timer: 4000, placement: { from: from, align: align } }); } </pre> </div> </div> </div>   <div class="tim-row" id="sidebar-row"> <h2> Sidebar <small><a href="../examples/dashboard/stats.html" target="_blank">Live Demo</a></small> </h2> <legend></legend> <p> We have created the class <code>.sidebar</code> for navigation. It contains the company title, a photo of the logged in user with options inside a dropdown, and a list of all the pages. Every element in the list of pages can have a sublist of pages. </p> <p> You have two options for the background colour <code>data-background-color="white/brown"</code>.<br /> If you want to change the colour of the links inside the sidebar, you can do so by modifying the following attribute <code>data-active-color="primary/info/success/warning/danger"</code>. </p> <p>If you want to have more space for the main panel, you can shrink the sidebar by adding the class <code>sidebar-mini</code> on the body of the page.</p> <div class="area-line"> <a data-target="#sidebarCode" href="javascript: void(0);" data-toggle="collapse"> See Full Implementation</a> <div id="sidebarCode" class="collapse"> <pre class="prettyprint"> <div class="sidebar" data-background-color="brown" data-active-color="danger"> <div class="logo"> <a href="https://www.creative-tim.com" class="simple-text logo-mini"> CT </a> <a href="https://www.creative-tim.com" class="simple-text logo-normal"> Creative Tim </a> </div> <div class="sidebar-wrapper"> <div class="user"> <div class="info"> <div class="photo"> <img src="../../assets/img/faces/face-2.jpg" /> </div> <a data-toggle="collapse" href="#collapseExample" class="collapsed"> <span> Chet Faker <b class="caret"></b> </span> </a> <div class="clearfix"></div> <div class="collapse" id="collapseExample"> <ul class="nav"> <li> <a href="#profile"> <span class="sidebar-mini">Mp</span> <span class="sidebar-normal">My Profile</span> </a> </li> <li> <a href="#edit"> <span class="sidebar-mini">Ep</span> <span class="sidebar-normal">Edit Profile</span> </a> </li> <li> <a href="#settings"> <span class="sidebar-mini">S</span> <span class="sidebar-normal">Settings</span> </a> </li> </ul> </div> </div> </div> <ul class="nav"> <li class="active"> <a data-toggle="collapse" href="#dashboardOverview" aria-expanded="true"> <i class="ti-panel"></i> <p> Dashboard <b class="caret"></b> </p> </a> <div class="collapse in" id="dashboardOverview"> <ul class="nav"> <li class="active"> <a href="../dashboard/overview.html"> <span class="sidebar-mini">O</span> <span class="sidebar-normal">Overview</span> </a> </li> </ul> </div> </li> </ul> </div> </div> </pre> </div> </div> </div>   <div class="tim-row" id="sweetalert-row"> <h2> Sweet Alert 2 <small>v6.2.9 -</small> <small><a href="../examples/components/sweet-alert.html" target="_blank">Live Demo</a></small> </h2> <legend></legend> <p> If you want to replace the classic alert box with something that looks amazing, you can use the Sweet Alert 2 Plugin. We have changed the typography and colours for the plugin provided by <a href="https://twitter.com/t4t5">Tristan Edwards</a>. If you want to see the full documentation, please check <a href="https://limonte.github.io/sweetalert2/">out this page</a>. <br /><br /> If you want to see a basic coded example, here is one below. </p> <button class="btn btn-default btn-fill" onclick='swal("Good job!", "You clicked the button!", "success")'>Try me!</button> <div class="area-line"> <a data-target="#sweetAlertCode" href="javascript: void(0);" data-toggle="collapse"> See Full Implementation</a> <div id="sweetAlertCode" class="collapse"> <pre class="prettyprint"> <button class="btn btn-default btn-fill" onclick='swal("Good job!", "You clicked the button!", "success")'>Try me!</button>  </pre> </div> </div> </div>   <div class="tim-row" id="datetimepicker-row"> <h2>Bootstrap DateTimePicker <small><a href="../examples/forms/extended.html" target="_blank">Live Demo</a></small> </h2> <legend></legend> <p>We have created a date-time picker starting from <a href="https://eonasdan.github.io/bootstrap-datetimepicker/">this wonderful plugin</a> created by <a href="https://github.com/Eonasdan">Eonasdan</a>. We have changed the colours, typography and buttons, so it can look like the rest of the dashboard.<br /><br /> Here is a coded example: </p> <div class="row"> <div class="col-md-4"> <input type="text" class="form-control datetimepicker" placeholder="Datetime Picker Here"/> </div> </div> <div class="area-line"> <a data-target="#datepicker" href="javascript: void(0);" data-toggle="collapse"> See Markup and Javascript</a> <div id="datepicker" class="collapse"> <pre class="prettyprint">  <input type="text" class="form-control datetimepicker" placeholder="Datetime Picker Here"/>  $('.datetimepicker').datetimepicker({ icons: { time: "fa fa-clock-o", date: "fa fa-calendar", up: "fa fa-chevron-up", down: "fa fa-chevron-down", previous: 'fa fa-chevron-left', next: 'fa fa-chevron-right', today: 'fa fa-screenshot', clear: 'fa fa-trash', close: 'fa fa-remove' } }); </pre> </div> </div> </div>   <div class="tim-row" id="charts-row"> <h2>Charts <small><a href="../examples/charts.html" target="_blank">Live Demo</a></small> </h2> <legend></legend> <p>For the implementation of graphic charts, we used the Chartist plugin and added our custom styles. The plugin is free to download and use <a href="https://gionkunz.github.io/chartist-js/examples.html">here</a>. <a href="https://github.com/gionkunz">Gion Kunz</a> is the guy behind the project; he did an awesome job and we recommend using his stuff. Besides all the great options for customisation that you have using it, it is also fully responsive. We changed the colours, background and typography.</p> <h4>Line Chart</h4> <p>We recommend using this chart when you have easy to understand information, that can be conveyed in a single line throughout a continuous period. </p> <div class="row"> <div class="col-md-8"> <h4><small>24 Hours Performance</small></h4> <div id="chartPerformance" class="ct-chart"></div> </div> </div> <div class="area-line"> <a data-target="#lineChart" href="javascript: void(0);" data-toggle="collapse">See Full Implementation</a> <div id="lineChart" class="collapse"> <pre class="prettyprint">  <h4> <br><small>24 Hours Performance</small></h4> <div id="chartPerformance" class="ct-chart"></div>  var dataPerformance = { labels: ['6pm','9pm','11pm', '2am', '4am', '8am', '2pm', '5pm', '8pm', '11pm', '4am'], series: [ [1, 6, 8, 7, 4, 7, 8, 12, 16, 17, 14, 13] ] }; var optionsPerformance = { showPoint: false, lineSmooth: true, height: "200px", axisX: { showGrid: false, showLabel: true }, axisY: { offset: 40, }, low: 0, high: 16, height: "250px" }; Chartist.Line('#chartPerformance', dataPerformance, optionsPerformance); </pre> </div> </div> <h4>Line Chart with Points</h4> <p>This graphic is best used when you have multiple results for different points and you want to show a correlation (growth, down-side, etc).</p> <div class="row"> <div class="col-md-8"> <h4><small>NASDAQ: AAPL</small></h4> <div id="chartStock" class="ct-chart"></div> </div> </div> <div class="area-line"> <a data-target="#lineChartPoints" href="javascript: void(0);" data-toggle="collapse">See Full Implementation</a> <div id="lineChartPoints" class="collapse"> <pre class="prettyprint">  <h4></small> <br><small>NASDAQ: AAPL</small></h4> <div id="chartStock" class="ct-chart"></div>  var dataStock = { labels: ['\'07','\'08','\'09', '\'10', '\'11', '\'12', '\'13', '\'14', '\'15'], series: [ [22.20, 34.90, 42.28, 51.93, 62.21, 80.23, 62.21, 82.12, 102.50, 107.23] ] }; var optionsStock = { lineSmooth: false, height: "200px", axisY: { offset: 40, labelInterpolationFnc: function(value) { return '$' + value; } }, low: 10, height: "250px", high: 110, classNames: { point: 'ct-point ct-green', line: 'ct-line ct-green' } }; Chartist.Line('#chartStock', dataStock, optionsStock); </pre> </div> </div> <h4>Multiple Lines Chart</h4> <p>We recommend you use this graphic when you need to show multiple functions in the same visual element. For example, you can see a correlation between the registered versus active users. Always try to use a legend when you have multiple elements in the graphic.</p> <div class="row"> <div class="col-md-8"> <h4><small>Users Behavior</small></h4> <div id="chartHours" class="ct-chart"></div> <h6>Legend</h6> <i class="fa fa-circle text-info"></i> Visited Site <i class="fa fa-circle text-warning"></i> Register <i class="fa fa-circle text-danger"></i> Login 2nd Time </div> </div> <div class="area-line"> <a data-target="#multipleLinesChart" href="javascript: void(0);" data-toggle="collapse">See Full Implementation</a> <div id="multipleLinesChart" class="collapse"> <pre class="prettyprint">  <h4><small>Users Behavior</small></h4> <div id="chartHours" class="ct-chart"></div> <h6>Legend</h6> <i class="fa fa-circle text-info"></i> Visited Site <i class="fa fa-circle text-warning"></i> Register <i class="fa fa-circle text-danger"></i> Login 2nd Time  var dataSales = { labels: ['9:00AM', '12:00AM', '3:00PM', '6:00PM', '9:00PM', '12:00PM', '3:00AM', '6:00AM'], series: [ [287, 385, 490, 562, 594, 626, 698, 895, 952], [67, 152, 193, 240, 387, 435, 535, 642, 744], [23, 113, 67, 108, 190, 239, 307, 410, 410] ] }; var optionsSales = { lineSmooth: false, low: 0, high: 1000, showArea: true, height: "245px", axisX: { showGrid: false, }, lineSmooth: Chartist.Interpolation.simple({ divisor: 3 }), showLine: true, showPoint: false, }; var responsiveSales = [ ['screen and (max-width: 640px)', { axisX: { labelInterpolationFnc: function (value) { return value[0]; } } }] ]; Chartist.Line('#chartHours', dataSales, optionsSales, responsiveSales); </pre> </div> </div> <h4>Pie Chart</h4> <p>A pie chart is the easiest way to represent an information. Use it whenever you want to show something understandable at once.</p> <div class="row"> <div class="col-md-8"> <h4><small>Public Preferences</small></h4> <div class="row margin-top"> <div class="col-md-10 col-md-offset-1"> <div id="chartPreferences" class="ct-chart"></div> </div> </div> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="chart-legend"> <h6>Legend</h6> <i class="fa fa-circle text-info"></i> Open <i class="fa fa-circle text-danger"></i> Bounce <i class="fa fa-circle text-warning"></i> Unsubscribe </div> </div> </div> </div> </div> <div class="area-line"> <a data-target="#pieChart" href="javascript: void(0);" data-toggle="collapse">See Full Implementation</a> <div id="pieChart" class="collapse"> <pre class="prettyprint">  <h4><small>Public Preferences</small></h4> <div class="row margin-top"> <div class="col-md-10 col-md-offset-1"> <div id="chartPreferences" class="ct-chart"></div> </div> </div> <div class="row"> <div class="col-md-10 col-md-offset-1"> <h6>Legend</h6> <i class="fa fa-circle text-info"></i> Open <i class="fa fa-circle text-danger"></i> Bounce <i class="fa fa-circle text-warning"></i> Unsubscribe </div> </div>  Chartist.Pie('#chartPreferences', { labels: ['62%','32%','6%'], series: [62, 32, 6] }); </pre> </div> </div> <h4>Bar Chart</h4> <p>We recommend using the bar chart whenever you want to show progress over periods of time. Here is an example.</p> <div class="row"> <div class="col-md-8"> <h4><small>Views</small></h4> <div id="chartViews" class="ct-chart"></div> </div> </div> <div class="area-line"> <a data-target="#barChart" href="javascript: void(0);" data-toggle="collapse">See Full Implementation</a> <div id="barChart" class="collapse"> <pre class="prettyprint">  <h4><small>Views</small></h4> <div id="chartViews" class="ct-chart"></div>  var dataViews = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], series: [ [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895] ] }; var optionsViews = { seriesBarDistance: 10, classNames: { bar: 'ct-bar' }, axisX: { showGrid: false, }, height: "250px" }; var responsiveOptionsViews = [ ['screen and (max-width: 640px)', { seriesBarDistance: 5, axisX: { labelInterpolationFnc: function (value) { return value[0]; } } }] ]; Chartist.Bar('#chartViews', dataViews, optionsViews, responsiveOptionsViews); </pre> </div> </div> <h4>Multiple Bars Chart</h4> <p>Go for multiple bars charts if you want to show two indicators side by side.</p> <div class="row"> <div class="col-md-8"> <h4>Activity <br><small>Multiple Bars Chart</small></h4> <div id="chartActivity" class="ct-chart"></div> <h6>Legend</h6> <span class="label label-info">Tesla</span> <span class="label label-warning">BMW</span> </div> </div> <div class="area-line"> <a data-target="#multipleBarsChart" href="javascript: void(0);" data-toggle="collapse">See Full Implementation</a> <div id="multipleBarsChart" class="collapse"> <pre class="prettyprint">  <h4>Activity <br><small>Multiple Bars Chart</small></h4> <div id="chartActivity" class="ct-chart"></div> <h6>Legend</h6> <span class="label label-info">Tesla</span> <span class="label label-warning">BMW</span>  var data = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], series: [ [542, 543, 520, 680, 653, 753, 326, 434, 568, 610, 756, 895], [230, 293, 380, 480, 503, 553, 600, 664, 698, 710, 736, 795] ] }; var options = { seriesBarDistance: 10, axisX: { showGrid: false }, height: "245px" }; var responsiveOptions = [ ['screen and (max-width: 640px)', { seriesBarDistance: 5, axisX: { labelInterpolationFnc: function (value) { return value[0]; } } }] ]; Chartist.Line('#chartActivity', data, options, responsiveOptions); </pre> </div> </div> </div>   <div class="tim-row" id="google-row"> <h2> Google Maps <small><a href="../examples/maps/google.html" target="_blank">Live Demo</a></small> </h2> <legend></legend> <p> We changed the classic Google Maps by adding special skins and putting them in cards. If you want to see the full documentation from Google, you can see the docs <a href="https://developers.google.com/maps/documentation/javascript/">here</a>.<br /><br /> Below, you will find a coded example: </p> <div class="card"> <div class="header"> <p class="category">Regular Map</p> </div> <div class="content"> <div id="regularMap" class="map"></div> </div> </div> <div class="area-line"> <a data-target="#googleMapsCode" href="javascript: void(0);" data-toggle="collapse"> See Full Implementation</a> <div id="googleMapsCode" class="collapse"> <pre class="prettyprint">  <div class="card"> <div class="header"> <p class="category">Regular Map</p> </div> <div class="content"> <div id="regularMap" class="map"></div> </div> </div>  var myLatlng = new google.maps.LatLng(40.748817, -73.985428); var mapOptions = { zoom: 8, center: myLatlng, scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page } var map = new google.maps.Map(document.getElementById("regularMap"), mapOptions); var marker = new google.maps.Marker({ position: myLatlng, title:"Regular Map!" }); marker.setMap(map); }); </pre> </div> </div> </div>   <div class="tim-row" id="api"> <h2>How to setup Google API Keys</h2> <legend></legend> <ol> <li> <p>Go to <a href="https://developers.google.com/maps/documentation/javascript/get-api-key">https://developers.google.com/maps/documentation/javascript/get-api-key</a> </p> </li> <li><p>Scroll to the “Get an API key” Title and press the “Get a Key” Button</p></li> <li><p>Choose a name for your project then press on Create and Enable API</p></li> <li><p>Get the Key and place it in your project where is this script: <pre><script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script></pre> </p> </li> </ol> </div> <div class="tim-row" id="changing-colors"> <h2>Changing Colors (SASS)</h2> <legend></legend> <p>You can change the default colors via variables from SASS:</p> <ol> <li>You can find the colors in assets/sass/material-kit/_variables.scss starting with line 28 where is the primary color set: <code>$brand-primary: $purple !default;</code>. All the possible colors are in assets/sass/material-kit/_colors.scss</li> <li>Add the SASS folder from <code>assets/sass/</code> to a new project inside <a href="https://koala-app.com/" target="_blank">Koala Compiler</a> and find the file material-kit.scss, it will be the one in Green.</li> <li>Right click on that file and set the output path, it must be in <code>assets/css/</code> so anything that you compile will overwrite the original material-dashboard.css</li> <li>Press on compile and everything will be done automatically.</li> </ol> </div> <div class="tim-row" id="#changing-bg-colors"> <h2>Changing Background Color</h2> <legend></legend> <p>You can change the sidebar background color with another color that it's not used in Paper Dashboard Pro by simple following the steps:</p> <ol> <li>First go in <code>assets/sass/paper/_variables.scss</code> and declare your background color variable and the variable for the text of the sidebar. For example: <code>$red-background-color: #ff0000; $white-color: #ffffff;</code> </li> <li>Go to the project in assets/sass/paper/_sidebar-and-main-panel.scss and you have to add inside of the classes .sidebar, .off-canvas-sidebar the following lines of code: <code>.sidebar, .off-canvas-sidebar{ &[data-background-color="red"]{ @include sidebar-background-color($red-background-color, $white-color); } }</code></li> <li>After you do that please compile your scss with Koala and be sure that your output path is assets/css/paper-dashboard.css.</li> </ol> </div>  <div class="tim-row" id="jvector-row"> <h2> jVector Maps <small><a href="../examples/maps/vector.html" target="_blank">Live Demo</a></small> </h2> <legend></legend> <p> We have integrated and changed the look for the jVector Maps. We recommend using them for statistics for countries. To see the original documentation from Kirill Lebedev, you can go <a href="https://jvectormap.com/tutorials/getting-started/">here</a>.<br /><br /> If you want to see how it looks and how you can use this map, here is an example. </p> <div class="card card-plain"> <div class="content"> <div id="worldMap" class="map map-big"></div> </div> </div> <div class="area-line"> <a data-target="#jVectorMapsCode" href="javascript: void(0);" data-toggle="collapse"> See Full Implementation</a> <div id="jVectorMapsCode" class="collapse"> <pre class="prettyprint">  <div class="card card-plain"> <div class="content"> <div id="worldMap" class="map map-big"></div> </div> </div>  var mapData = { "AU": 760, "BR": 550, "CA": 120, "DE": 1300, "FR": 540, "GB": 690, "GE": 200, "IN": 200, "RO": 600, "RU": 300, "US": 2920, }; $('#worldMap').vectorMap({ map: 'world_mill_en', backgroundColor: "transparent", regionStyle: { initial: { fill: '#e4e4e4', "fill-opacity": 0.9, stroke: 'none', "stroke-width": 0, "stroke-opacity": 0 } }, series: { regions: [{ values: mapData, scale: ["#AAAAAA","#444444"], normalizeFunction: 'polynomial' }] }, }); }); </pre> </div> </div> </div>   <div class="tim-row" id="wizard-row"> <h2> Wizard <small><a href="../examples/forms/wizard.html" target="_blank">Live Demo</a></small> </h2> <legend></legend> <p> If you have lengthy forms to complete, you can use the Bootstrap Wizard. This plugin allows you to cut the form into steps and let the user complete it gradually. We have worked over the original repository from <a href="https://twitter.com/gabrielva">Vincent Gabriel</a>, which you can find <a href="https://vadimg.com/twitter-bootstrap-wizard-example/#demo">here</a>.<br /><br /> We have changed the typography, inputs, buttons and we have added validation for inputs. You can see how it looks and feels in the live demo. </p> </div>   <div class="tim-row" id="validation-row"> <h2> jQuery Validate for Forms <small><a href="../examples/forms/validation.html" target="_blank">Live Demo</a></small> </h2> <legend></legend> <p> If you have required fields in forms, the best way to add validation for them is through the jQuery Validation tool. We have imported it into the Paper Dashboard PRO library and changed its colours. To see the original and full documentation from jQueryValidation, you can go <a href="https://jqueryvalidation.org/">here</a>.<br /><br /> If you want to see a basic login example and the code behind it, check out the example below: </p> <div class="row"> <div class="col-md-5"> <div class="card"> <form id="loginFormValidation" action="" method="" novalidate=""> <div class="card-content"> <div class="header text-center"><h5>Login Form</h5></div> <div class="form-group"> <label class="control-label">Email Address <star>*</star></label> <input class="form-control" name="email" type="text" email="true" required="true" /> </div> <div class="form-group"> <label class="control-label">Password <star>*</star></label> <input class="form-control" name="password" id="registerPassword" type="password" required="true" /> </div> <div class="category"><star>*</star> Required fields</div> <br /> <div class="card-footer text-center"> <button type="submit" class="btn btn-info btn-fill btn-wd">Register</button> </div> </div> </form> </div> </div> </div> <div class="area-line"> <a data-target="#validationCode" href="javascript: void(0);" data-toggle="collapse"> See Full Implementation</a> <div id="validationCode" class="collapse"> <pre class="prettyprint">  <div class="card"> <form id="loginFormValidation" action="" method="" novalidate=""> <div class="content"> <div class="header text-center"><h5>Login Form</h5></div> <div class="form-group"> <label class="control-label">Email Address <star>*</star></label> <input class="form-control" name="email" type="text" email="true" required="true" /> </div> <div class="form-group"> <label class="control-label">Password <star>*</star></label> <input class="form-control" name="password" id="registerPassword" type="password" required="true" /> </div> <div class="category"><star>*</star> Required fields</div> <br /> <div class="footer text-center"> <button type="submit" class="btn btn-info btn-fill btn-wd">Register</button> </div> </div> </form> </div>  $('#loginFormValidation').validate(); </pre> </div> </div>  </div>   </div> </div> </div> </div> </div> </div> <footer class="footer footer-black"> <div class="container"> <nav class="pull-left"> <ul> <li> <a href="https://www.creative-tim.com"> Creative Tim </a> </li> <li> <a href="https://blog.creative-tim.com"> Blog </a> </li> <li> <a href="https://www.creative-tim.com/license"> Licenses </a> </li> </ul> </nav> <div class="copyright pull-right"> © <script>document.write(new Date().getFullYear())</script>, made with <i class="fa fa-heart heart"></i> by <a href="https://www.creative-tim.com">Creative Tim</a> </div> </div> </footer> </body>  <script src="../assets/js/jquery.min.js" type="text/javascript"></script> <script src="../assets/js/jquery-ui.min.js" type="text/javascript"></script> <script src="../assets/js/perfect-scrollbar.min.js" type="text/javascript"></script> <script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>  <script src="../assets/js/jquery.validate.min.js"></script>  <script src="../assets/js/nouislider.min.js"></script>  <script src="../assets/js/es6-promise-auto.min.js"></script>  <script src="../assets/js/moment.min.js"></script>  <script src="../assets/js/bootstrap-datetimepicker.js"></script>  <script src="../assets/js/bootstrap-selectpicker.js"></script>  <script src="../assets/js/bootstrap-switch-tags.js"></script>  <script src="../assets/js/jquery.easypiechart.min.js"></script>  <script src="../assets/js/chartist.min.js"></script>  <script src="../assets/js/bootstrap-notify.js"></script>  <script src="../assets/js/sweetalert2.js"></script>  <script src="../assets/js/jquery-jvectormap.js"></script>  <script src="https://maps.googleapis.com/maps/api/js"></script>  <script src="../assets/js/jquery.bootstrap.wizard.min.js"></script>  <script src="../assets/js/bootstrap-table.js"></script>  <script src="../assets/js/jquery.datatables.js"></script>  <script src="../assets/js/fullcalendar.min.js"></script>  <script src="../assets/js/paper-dashboard.js"></script>  <script src="../assets/js/demo.js"></script> <script> // Facebook Pixel Code Don't Delete !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n; n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script','//connect.facebook.net/en_US/fbevents.js'); try{ fbq('init', '111649226022273'); fbq('track', "PageView"); }catch(err) { console.log('Facebook Track Error:', err); } </script> <noscript> <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=111649226022273&ev=PageView&noscript=1" /> </noscript> <script> var $table = $('#bootstrap-table'); $().ready(function(){ demo.initFormExtendedSliders(); // for datatables $table.bootstrapTable({ toolbar: ".toolbar", clickToSelect: true, showRefresh: true, search: true, showToggle: true, showColumns: true, pagination: true, searchAlign: 'left', pageSize: 8, clickToSelect: false, pageList: [8,10,25,50,100], formatShowingRows: function(pageFrom, pageTo, totalRows){ //do nothing here, we don't want to show the text "showing x of y from..." }, formatRecordsPerPage: function(pageNumber){ return pageNumber + " rows visible"; }, icons: { refresh: 'fa fa-refresh', toggle: 'fa fa-th-list', columns: 'fa fa-columns', detailOpen: 'fa fa-plus-circle', detailClose: 'fa fa-minus-circle' } }); //activate the tooltips after the data table is initialized $('[rel="tooltip"]').tooltip(); $(window).resize(function () { $table.bootstrapTable('resetView'); }); window.operateEvents = { 'click .view': function (e, value, row, index) { info = JSON.stringify(row); swal('You click view icon, row: ', info); console.log(info); }, 'click .edit': function (e, value, row, index) { info = JSON.stringify(row); swal('You click edit icon, row: ', info); console.log(info); }, 'click .remove': function (e, value, row, index) { console.log(row); $table.bootstrapTable('remove', { field: 'id', values: [row.id] }); } }; //for datetimepickers $('.datetimepicker').datetimepicker({ icons: { time: "fa fa-clock-o", date: "fa fa-calendar", up: "fa fa-chevron-up", down: "fa fa-chevron-down", previous: 'fa fa-chevron-left', next: 'fa fa-chevron-right', today: 'fa fa-screenshot', clear: 'fa fa-trash', close: 'fa fa-remove' } }); //for chartist demo.initOverviewDashboardDoc(); demo.initDocumentationCharts(); demo.initCirclePercentage(); //for google map // Regular Map var myLatlng = new google.maps.LatLng(40.748817, -73.985428); var mapOptions = { zoom: 8, center: myLatlng, scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page } var map = new google.maps.Map(document.getElementById("regularMap"), mapOptions); var marker = new google.maps.Marker({ position: myLatlng, title:"Regular Map!" }); marker.setMap(map); //for jVector map var mapData = { "AU": 760, "BR": 550, "CA": 120, "DE": 1300, "FR": 540, "GB": 690, "GE": 200, "IN": 200, "RO": 600, "RU": 300, "US": 2920, }; $('#worldMap').vectorMap({ map: 'world_mill_en', backgroundColor: "transparent", regionStyle: { initial: { fill: '#e4e4e4', "fill-opacity": 0.9, stroke: 'none', "stroke-width": 0, "stroke-opacity": 0 } }, series: { regions: [{ values: mapData, scale: ["#AAAAAA","#444444"], normalizeFunction: 'polynomial' }] }, }); //for validation $('#loginFormValidation').validate(); }); function operateFormatter(value, row, index) { return [ '<a rel="tooltip" title="View" class="btn btn-simple btn-info btn-icon table-action view" href="javascript:void(0)">', '<i class="fa fa-image"></i>', '</a>', '<a rel="tooltip" title="Edit" class="btn btn-simple btn-warning btn-icon table-action edit" href="javascript:void(0)">', '<i class="fa fa-edit"></i>', '</a>', '<a rel="tooltip" title="Remove" class="btn btn-simple btn-danger btn-icon table-action remove" href="javascript:void(0)">', '<i class="fa fa-remove"></i>', '</a>' ].join(''); } function showNotification(from, align){ color = Math.floor((Math.random() * 4) + 1); $.notify({ icon: "ti-gift", message: "Welcome to <b>Paper Dashboard PRO</b> - a beautiful dashboard for your next project." },{ type: type[color], timer: 4000, placement: { from: from, align: align } }); } </script> </html>

CINXE.COM

Elements - Paper Dashboard Pro by Creative Tim