<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="apple-touch-icon" sizes="76x76" href="https://demos.creative-tim.com/light-bootstrap-dashboard/assets/img/apple-icon.png"> <link rel="icon" type="image/png" href="https://demos.creative-tim.com/light-bootstrap-dashboard/assets/img/favicon.ico"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' /> <!-- Canonical SEO --> <link rel="canonical" href="https://www.creative-tim.com/product/light-bootstrap-dashboard"> <!-- Social tags --> <meta name="keywords" content="creative tim, html dashboard, html css dashboard, web dashboard, freebie, free bootstrap dashboard, bootstrap, css3 dashboard, bootstrap admin, light bootstrap dashboard, frontend, responsive bootstrap dashboard, bootstrap 4 admin, bootstrap 4 template, bootstrap 4 dashboard, bootstrap 4, free bootstrap 4"> <meta name="description" content="A bootstrap 4 admin dashboard template designed to be simple and beautiful."> <!-- Schema.org markup for Google+ --> <meta itemprop="name" content="Light Bootstrap Dashboard - Free Bootstrap 4 Admin Template by Creative Tim"> <meta itemprop="description" content="A bootstrap 4 admin dashboard template designed to be simple and beautiful."> <meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/32/original/opt_lbd_thumbnail.jpg"> <!-- Twitter Card data --> <meta name="twitter:card" content="product"> <meta name="twitter:site" content="@creativetim"> <meta name="twitter:title" content="Light Bootstrap Dashboard - Free Bootstrap 4 Admin Template by Creative Tim"> <meta name="twitter:description" content="A bootstrap 4 admin dashboard template designed to be simple and beautiful."> <meta name="twitter:creator" content="@creativetim"> <meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/32/original/opt_lbd_thumbnail.jpg"> <meta name="twitter:data1" content="Light Bootstrap Dashboard - Free Bootstrap 4 Admin Template by Creative Tim"> <meta name="twitter:label1" content="Product Type"> <meta name="twitter:data2" content="Free"> <meta name="twitter:label2" content="Price"> <!-- Open Graph data --> <meta property="fb:app_id" content="655968634437471"> <meta property="og:title" content="Light Bootstrap Dashboard - Free Bootstrap 4 Admin Template by Creative Tim"> <meta property="og:type" content="article"> <meta property="og:url" content="https://demos.creative-tim.com/light-bootstrap-dashboard/dashboard"> <meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/32/original/opt_lbd_thumbnail.jpg"> <meta property="og:description" content="A bootstrap 4 admin dashboard template designed to be simple and beautiful."> <meta property="og:site_name" content="Creative Tim"> <!-- 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="https://demos.creative-tim.com/light-bootstrap-dashboard/assets/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://demos.creative-tim.com/light-bootstrap-dashboard/assets/css/light-bootstrap-dashboard.css?v=2.0.1" rel="stylesheet" /> <!-- CSS Just for demo purpose, don't include it in your project --> <link href="https://demos.creative-tim.com/light-bootstrap-dashboard/assets/css/demo.css" rel="stylesheet" /> <!-- Google Tag Manager --> <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> <!-- End Google Tag Manager --> </head> <body> <!-- Google Tag Manager (noscript) --> <!-- End Google Tag Manager (noscript) --> <div class="wrapper"> <div class="sidebar" data-image="../assets/img/sidebar-5.jpg"> <!-- Tip 1: You can change the color of the sidebar using: data-color="purple | blue | green | orange | red" Tip 2: you can also add an image using data-image tag --> <div class="sidebar-wrapper"> <div class="logo"> <a href="https://www.creative-tim.com" class="simple-text"> Creative Tim </a> </div> <ul class="nav"> <li class="nav-item active"> <a class="nav-link" href="dashboard.html"> </a> </li> <li> <a class="nav-link" href="./user.html"> </a> </li> <li> <a class="nav-link" href="./table.html"> </a> </li> <li> <a class="nav-link" href="./typography.html"> </a> </li> <li> <a class="nav-link" href="./icons.html"> </a> </li> <li> <a class="nav-link" href="./maps.html"> </a> </li> <li> <a class="nav-link" href="./notifications.html"> </a> </li> <li class="nav-item active active-pro"> <a class="nav-link active" href="upgrade.html"> </a> </li> </ul> </div> </div> <div class="main-panel"> <!-- fixed plugin --> <div class="fixed-plugin"> <div class="dropdown show-dropdown"> <a href="#" data-toggle="dropdown"> </a> <ul class="dropdown-menu"> <li class="adjustments-line"> <a href="javascript:void(0)" class="switch-trigger"> <label class="switch"> <input type="checkbox" data-toggle="switch" checked="" data-on-color="primary" data-off-color="primary"> </label> </a> </li> <li class="adjustments-line"> <a href="javascript:void(0)" class="switch-trigger background-color"> <div class="pull-right"> </div> </a> </li> <li class="active"> <a class="img-holder switch-trigger" href="javascript:void(0)"> <img src="../assets/img/sidebar-1.jpg" alt="" /> </a> </li> <li> <a class="img-holder switch-trigger" href="javascript:void(0)"> <img src="../assets/img/sidebar-3.jpg" alt="" /> </a> </li> <li> <a class="img-holder switch-trigger" href="javascript:void(0)"> <img src="../assets/img/sidebar-4.jpg" alt="" /> </a> </li> <li> <a class="img-holder switch-trigger" href="javascript:void(0)"> <img src="../assets/img/sidebar-5.jpg" alt="" /> </a> </li> <li class="button-container"> <div class=""> </div> </li> <li class="button-container"> <div class=""> </div> </li> <li class="button-container"> <div class=""> </div> </li> <li class="button-container"> </li> </ul> </div> </div> <!-- Navbar --> <nav class="navbar navbar-expand-lg " color-on-scroll="500"> <div class=" container-fluid "> <button href="" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation"> </button> <div class="collapse navbar-collapse justify-content-end" id="navigation"> <ul class="nav navbar-nav mr-auto"> <li class="nav-item"> <a href="#" class="nav-link" data-toggle="dropdown"> </a> </li> <li class="dropdown nav-item"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown"> </a> <ul class="dropdown-menu"> </ul> </li> <li class="nav-item"> <a href="#" class="nav-link"> </a> </li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#pablo"> </a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="https://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> </div> </li> <li class="nav-item"> <a class="nav-link" href="#pablo"> </a> </li> </ul> </div> </div> </nav> <!-- End Navbar --> <div class="content"> <div class="container-fluid"> <div class="row"> <div class="col-md-4"> <div class="card "> <div class="card-header "> </div> <div class="card-body "> </div> <div class="card-footer "> <div class="legend"> </div> <hr> <div class="stats"> </div> </div> </div> </div> <div class="col-md-8"> <div class="card "> <div class="card-header "> </div> <div class="card-body "> </div> <div class="card-footer "> <div class="legend"> </div> <hr> <div class="stats"> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="card "> <div class="card-header "> </div> <div class="card-body "> </div> <div class="card-footer "> <div class="legend"> </div> <hr> <div class="stats"> </div> </div> </div> </div> <div class="col-md-6"> <div class="card card-tasks"> <div class="card-header "> </div> <div class="card-body "> <div class="table-full-width"> <table class="table"> <tbody> <tr> <td> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" value=""> </label> </div> </td> <td class="td-actions text-right"> <button type="button" rel="tooltip" title="Edit Task" class="btn btn-info btn-simple btn-link"> </button> <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-link"> </button> </td> </tr> <tr> <td> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" value="" checked> </label> </div> </td> <td class="td-actions text-right"> <button type="button" rel="tooltip" title="Edit Task" class="btn btn-info btn-simple btn-link"> </button> <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-link"> </button> </td> </tr> <tr> <td> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" value="" checked> </label> </div> </td> <td>Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit </td> <td class="td-actions text-right"> <button type="button" rel="tooltip" title="Edit Task" class="btn btn-info btn-simple btn-link"> </button> <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-link"> </button> </td> </tr> <tr> <td> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" checked> </label> </div> </td> <td class="td-actions text-right"> <button type="button" rel="tooltip" title="Edit Task" class="btn btn-info btn-simple btn-link"> </button> <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-link"> </button> </td> </tr> <tr> <td> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" value=""> </label> </div> </td> <td class="td-actions text-right"> <button type="button" rel="tooltip" title="Edit Task" class="btn btn-info btn-simple btn-link"> </button> <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-link"> </button> </td> </tr> <tr> <td> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" value="" disabled> </label> </div> </td> <td class="td-actions text-right"> <button type="button" rel="tooltip" title="Edit Task" class="btn btn-info btn-simple btn-link"> </button> <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-link"> </button> </td> </tr> </tbody> </table> </div> </div> <div class="card-footer "> <hr> <div class="stats"> </div> </div> </div> </div> </div> </div> </div> <footer class="footer"> <div class="container"> <nav> <ul class="footer-menu"> <li> <a href="#"> Home </a> </li> <li> <a href="#"> Company </a> </li> <li> <a href="#"> Portfolio </a> </li> <li> <a href="#"> Blog </a> </li> </ul> <p class="copyright text-center"> © <script> document.write(new Date().getFullYear()) </script> </p> </nav> </div> </footer> </div> </div> </body> <!-- Core JS Files --> <!-- Plugin for Switches, full documentation here: https://www.jque.re/plugins/version3/bootstrap.switch/ --> <!-- Google Maps Plugin --> <!-- Chartist Plugin --> <!-- Share Plugin --> <!-- Notifications Plugin --> <!-- Control Center for Light Bootstrap Dashboard: scripts for the example pages etc --> <!-- Light Bootstrap Dashboard DEMO methods, don't include it in your project! --> <script type="text/javascript"> $(document).ready(function() { // Javascript method's body can be found in assets/js/demos.js demo.initDashboardPageCharts(); demo.showNotification(); }); </script> </html>