Introduction

Paper Dashboard 2 is a premium Bootstrap 4 Admin Template.

Quick start

To start using the Paper Dashboard 2 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 Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="../assets/js/plugins/bootstrap-switch.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: parallax effects, scripts for the example pages etc -->
<script src="../assets/js/paper-dashboard.js?v=2.0.0" type="text/javascript"></script>

<!-- Paper Dashboard DEMO methods, don't include it in your project! -->
<script src="../assets/demo/js/demo.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" />

    <!-- Material Kit CSS -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../assets/css/paper-dashboard.css?v=2.0.0" rel="stylesheet" />

  </head>
  <body>
    <div class="wrapper">
      <div class="sidebar" data-color="white">
      <!--
      Tip 1: You can change the color of the sidebar using: data-color="white | black"

      -->

        <div class="logo">
          <a href="http://www.creative-tim.com" class="simple-text logo-normal">
              Creative Tim
          </a>
        </div>

        <div class="sidebar-wrapper">
          <div class="user">
              <div class="photo">
                  <img src="../assets/img/chet.jpg" />
              </div>
              <div class="info">
                  <a data-toggle="collapse" href="#collapseExample" class="collapsed">
                      <span>
                          Chet Facker
                          <b class="caret"></b>
                      </span>
                  </a>
                  <div class="clearfix"></div>
                  <div class="collapse" id="collapseExample">
                      <ul class="nav">
                          <li>
                              <a href="#">
                                  <span class="sidebar-mini-icon">MP</span>
                                  <span class="sidebar-normal">My Profile</span>
                              </a>
                          </li>
                          <li>
                              <a href="#">
                                  <span class="sidebar-mini-icon">EP</span>
                                  <span class="sidebar-normal">Edit Profile</span>
                              </a>
                          </li>
                          <li>
                              <a href="#">
                                  <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-app"></i>
                      <p>Example 1</p>
                  </a>
              </li>

              <li>
                  <a data-toggle="collapse" href="#pagesExamples">
                      <i class="nc-icon nc-layout-11"></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-transparent navbar-absolute">
          <div class="container-fluid">


            <div class="navbar-wrapper">
              <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="#pablo">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...">
                      <span class="input-group-addon">
                        <i class="nc-icon nc-zoom-split"></i>
                      </span>
                  </div>
              </form>

              <ul class="navbar-nav">
                <li class="nav-item">
                  <a class="nav-link" href="#pablo">
                    <i class="nc-icon nc-chart-bar-32"></i>
                    <p>
                      <span class="d-lg-none d-md-block">Stats</span>
                    </p>
                  </a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="nc-icon nc-vector"></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="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </div>
                </li>

                <li class="nav-item">
                  <a class="nav-link" href="#pablo">
                    <i class="nc-icon nc-single-02"></i>
                    <p>
                      <span class="d-lg-none d-md-block">Account</span>
                    </p>
                  </a>
                </li>
              </ul>


              </div>
          </div>
        </nav>

        <div class="panel-header panel-header-sm">
        </div>

        <div class="content">
          <div class="card">
            <div class="card-header">
              <h3>Hello, world!</h3>
            </div>
          </div>          
        </div>

        <footer class="footer" >
          <div class="container-fluid">
            <nav>
              <ul>
                <li>
                    <a href="https://www.creative-tim.com">
                        Creative Tim
                    </a>
                </li>
                <li>
                    <a href="http://presentation.creative-tim.com">
                       About Us
                    </a>
                </li>
                <li>
                    <a href="http://blog.creative-tim.com">
                       Blog
                    </a>
                </li>
                <li>
                    <a href="https://github.com/creativetimofficial/paper-dashboard-2/blob/master/LICENSE.md">
                        MIT License
                    </a>
                </li>
              </ul>
            </nav>
            <div class="copyright">
              &copy; <script>document.write(new Date().getFullYear())</script> Coded by <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>.
            </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 Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
  <script src="../assets/js/plugins/bootstrap-switch.js"></script>

  <!--  DataTables.net Plugin, full documentation here: https://datatables.net/    -->
  <script src="../assets/js/plugins/jquery.dataTables.min.js"></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: parallax effects, scripts for the example pages etc -->
  <script src="../assets/js/paper-dashboard.js?v=2.0.0" type="text/javascript"></script>
</html>