Introduction
Paper Dashboard 2 PRO is a premium Bootstrap 4 Admin Template.
Quick start
To start using the Paper Dashboard 2 PRO you will need to import some files in your current project or start from scratch using our template (scroll down in this page to view it).
CSS
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
<link rel="stylesheet" href="/assets/css/paper-dashboard.css">JS
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.
<script src="../assets/js/core/jquery.min.js" type="text/javascript"></script>
<script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
<script src="../assets/js/plugins/moment.min.js"></script>
<!-- Plugin for Sweet Alert -->
<script src="../assets/js/plugins/sweetalert2.min.js"></script>
<!-- Forms Validations Plugin -->
<script src="../assets/js/plugins/jquery.validate.min.js"></script>
<!-- Plugin for the Wizard, full documentation here: https://github.com/VinceG/twitter-bootstrap-wizard -->
<script src="../assets/js/plugins/jquery.bootstrap-wizard.js"></script>
<!-- Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select -->
<script src="../assets/js/plugins/bootstrap-selectpicker.js" type="text/javascript"></script>
<!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="../assets/js/plugins/bootstrap-switch.js"></script>
<!-- Plugin for the DateTimePicker, full documentation here: https://eonasdan.github.io/bootstrap-datetimepicker/ -->
<script src="../assets/js/plugins/bootstrap-datetimepicker.js"></script>
<!-- DataTables.net Plugin, full documentation here: https://datatables.net/ -->
<script src="../assets/js/plugins/jquery.dataTables.min.js"></script>
<!-- Plugin for Tags, full documentation here: https://github.com/bootstrap-tagsinput/bootstrap-tagsinputs -->
<script src="../assets/js/plugins/bootstrap-tagsinput.js"></script>
<!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
<script src="../assets/js/plugins/jasny-bootstrap.min.js"></script>
<!-- Full Calendar Plugin, full documentation here: https://github.com/fullcalendar/fullcalendar -->
<script src="../assets/js/plugins/fullcalendar.min.js"></script>
<!-- Vector Map plugin, full documentation here: http://jvectormap.com/documentation/ -->
<script src="../assets/js/plugins/jquery-jvectormap.js"></script>
<!-- Plugin for the Bootstrap Table -->
<script src="../assets/js/plugins/bootstrap-table.js" ></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="../assets/js/plugins/nouislider.min.js" type="text/javascript"></script>
<!-- Google Maps Plugin -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Chart JS -->
<script src="../assets/js/plugins/chartjs.min.js"></script>
<!-- Notifications Plugin -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Paper Dashboard -->
<script src="../assets/js/paper-dashboard.js" type="text/javascript"></script>
<!-- Paper Dashboard DEMO methods, don't include it in your project! -->
<script src="../assets/demo/js/demo.js"></script>
<script src="../assets/demo/docs.min.js"></script>
<script src="../assets/demo/vendor/anchor.min.js"></script>
<script src="../assets/demo/vendor/clipboard.min.js"></script>
<script src="../assets/demo/vendor/holder.min.js"></script>
<script src="../assets/demo/src/application.js"></script>Fonts and Icons
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load the Fonts and Icons.
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />Starter template
Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
<!-- CSS Files -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="../assets/css/paper-dashboard.css?v=2.1.0" rel="stylesheet" />
</head>
<body>
<div class="wrapper">
<div class="sidebar" data-color="default">
<!--
Tip 1: You can change the color of the sidebar using: data-color="default | white"
-->
<div class="logo">
<a href="http://www.creative-tim.com" class="simple-text logo-mini">
CT
</a>
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
Creative Tim
</a>
<div class="sidebar-wrapper">
<div class="user">
<div class="photo">
<img src="../assets/img/james.jpg" />
</div>
<div class="info">
<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="javascript:;">
<span class="sidebar-mini-icon">MP</span>
<span class="sidebar-normal">My Profile</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="sidebar-mini-icon">EP</span>
<span class="sidebar-normal">Edit Profile</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="sidebar-mini-icon">S</span>
<span class="sidebar-normal">Settings</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<ul class="nav">
<li class="active">
<a href="../examples/dashboard.html">
<i class="nc-icon nc-layout-11"></i>
<p>Example 1</p>
</a>
</li>
<li>
<a data-toggle="collapse" href="#pagesExamples">
<i class="nc-icon nc-laptop"></i>
<p>Example 2
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="pagesExamples">
<ul class="nav">
<li>
<a href="../examples/pages/pricing.html">
<span class="sidebar-mini-icon">C1</span>
<span class="sidebar-normal">Collapse 1</span>
</a>
</li>
<li>
<a href="../examples/pages/timeline.html">
<span class="sidebar-mini-icon">C2</span>
<span class="sidebar-normal">Collapse 2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<nav class="navbar navbar-expand-lg navbar-absolute bg-white fixed-top">
<div class="container-fluid">
<div class="navbar-wrapper">
<div class="navbar-minimize">
<button id="minimizeSidebar" class="btn btn-icon btn-round">
<i class="nc-icon nc-minimal-right text-center visible-on-sidebar-mini"></i>
<i class="nc-icon nc-minimal-left text-center visible-on-sidebar-regular"></i>
</button>
</div>
<div class="navbar-toggle">
<button type="button" class="navbar-toggler">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<a class="navbar-brand" href="javascript:;">Dashboard</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navigation">
<form>
<div class="input-group no-border">
<input type="text" value="" class="form-control" placeholder="Search...">
<div class="input-group-append">
<div class="input-group-text">
<i class="nc-icon nc-zoom-split"></i>
</div>
</div>
</div>
</form>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link btn-magnify" href="javascript:;">
<i class="nc-icon nc-layout-11"></i>
<p>
<span class="d-lg-none d-md-block">Stats</span>
</p>
</a>
</li>
<li class="nav-item btn-rotate dropdown">
<a class="nav-link dropdown-toggle" href="javascript:;" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="nc-icon nc-bell-55"></i>
<p>
<span class="d-lg-none d-md-block">Some Actions</span>
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="javascript:;">Action</a>
<a class="dropdown-item" href="javascript:;">Another action</a>
<a class="dropdown-item" href="javascript:;">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link btn-rotate" href="javascript:;">
<i class="nc-icon nc-settings-gear-65"></i>
<p>
<span class="d-lg-none d-md-block">Account</span>
</p>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="content">
<div class="card">
<div class="card-header">
<h3>Hello, world!</h3>
</div>
</div>
</div>
<footer class="footer footer-black footer-white ">
<div class="container">
<div class="row">
<nav class="footer-nav">
<ul>
<li><a href="https://www.creative-tim.com">Creative Tim</a></li>
<li><a href="https://creative-tim.com/blog">Blog</a></li>
<li><a href="https://www.creative-tim.com/license">Licenses</a></li>
</ul>
</nav>
<div class="credits ml-auto">
<span class="copyright">
© <script>
document.write(new Date().getFullYear())
</script>, made with <i class="fa fa-heart heart"></i> by Creative Tim
</span>
</div>
</div>
</div>
</footer>
</div>
</div>
</body>
<!-- Core JS Files -->
<script src="../assets/js/core/jquery.min.js" type="text/javascript"></script>
<script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
<script src="../assets/js/plugins/moment.min.js"></script>
<!-- Plugin for Sweet Alert -->
<script src="../assets/js/plugins/sweetalert2.min.js"></script>
<!-- Forms Validations Plugin -->
<script src="../assets/js/plugins/jquery.validate.min.js"></script>
<!-- Plugin for the Wizard, full documentation here: https://github.com/VinceG/twitter-bootstrap-wizard -->
<script src="../assets/js/plugins/jquery.bootstrap-wizard.js"></script>
<!-- Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select -->
<script src="../assets/js/plugins/bootstrap-selectpicker.js" type="text/javascript"></script>
<!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="../assets/js/plugins/bootstrap-switch.js"></script>
<!-- Plugin for the DateTimePicker, full documentation here: https://eonasdan.github.io/bootstrap-datetimepicker/ -->
<script src="../assets/js/plugins/bootstrap-datetimepicker.js"></script>
<!-- DataTables.net Plugin, full documentation here: https://datatables.net/ -->
<script src="../assets/js/plugins/jquery.dataTables.min.js"></script>
<!-- Plugin for Tags, full documentation here: https://github.com/bootstrap-tagsinput/bootstrap-tagsinputs -->
<script src="../assets/js/plugins/bootstrap-tagsinput.js"></script>
<!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
<script src="../assets/js/plugins/jasny-bootstrap.min.js"></script>
<!-- Full Calendar Plugin, full documentation here: https://github.com/fullcalendar/fullcalendar -->
<script src="../assets/js/plugins/fullcalendar.min.js"></script>
<!-- Vector Map plugin, full documentation here: http://jvectormap.com/documentation/ -->
<script src="../assets/js/plugins/jquery-jvectormap.js"></script>
<!-- Plugin for the Bootstrap Table -->
<script src="../assets/js/plugins/bootstrap-table.js"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="../assets/js/plugins/nouislider.min.js" type="text/javascript"></script>
<!-- Google Maps Plugin -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Chart JS -->
<script src="../assets/js/plugins/chartjs.min.js"></script>
<!-- Notifications Plugin -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Paper Dashboard -->
<script src="../assets/js/paper-dashboard.js?v=2.1.0" type="text/javascript"></script>
</html>