Bootstrap Tutorial: Admin dashboard – lesson 10

HTML

<header>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar double-nav">

<div class="float-left">
          <a href="#" data-activates="slide-out" class="button-collapse">
            <i class="fas fa-bars"></i>
          </a>
        </div>

<div class="breadcrumb-dn mr-auto white-text">
          <p>Material Design for Bootstrap</p>
        </div>

<ul class="nav navbar-nav nav-flex-icons ml-auto">
          <li class="nav-item">
            <a class="nav-link">
              <i class="fas fa-envelope"></i>
              <span class="clearfix d-none d-sm-inline-block">Contact</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link">
              <i class="fas fa-cog"></i>
              <span class="clearfix d-none d-sm-inline-block">Settings</span>
            </a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              <i class="fas fa-user"></i>
              <span class="clearfix d-none d-sm-inline-block">Account</span>
            </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>
        </ul>

</nav>

<div id="slide-out" class="side-nav fixed sn-bg-4">
        <ul class="custom-scrollbar">
          
          <li class="logo-sn waves-effect">
            <div class=" text-center">
              <a href="#" class="pl-0">
                <img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="">
              </a>
            </div>
          </li>
          
          
          <li>
            <form class="search-form" role="search">
              <div class="form-group md-form mt-0 pt-1 waves-light">
                <input type="text" class="form-control" placeholder="Search">
              </div>
            </form>
          </li>
          
          
          <li>
            <ul class="collapsible collapsible-accordion">
              <li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-chevron-right"></i>
                  Submit blog<i class="fas fa-angle-down rotate-icon"></i></a>
                <div class="collapsible-body">
                  <ul>
                    <li><a href="#" class="waves-effect">Submit listing</a>
                    </li>
                    <li><a href="#" class="waves-effect">Registration form</a>
                    </li>
                  </ul>
                </div>
              </li>
              <li><a class="collapsible-header waves-effect arrow-r"><i class="far fa-hand-pointer"></i>
                  Instruction<i class="fas fa-angle-down rotate-icon"></i></a>
                <div class="collapsible-body">
                  <ul>
                    <li><a href="#" class="waves-effect">For bloggers</a>
                    </li>
                    <li><a href="#" class="waves-effect">For authors</a>
                    </li>
                  </ul>
                </div>
              </li>
              <li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-eye"></i> About<i class="fas fa-angle-down rotate-icon"></i></a>
                <div class="collapsible-body">
                  <ul>
                    <li><a href="#" class="waves-effect">Introduction</a>
                    </li>
                    <li><a href="#" class="waves-effect">Monthly meetings</a>
                    </li>
                  </ul>
                </div>
              </li>
              <li><a class="collapsible-header waves-effect arrow-r"><i class="far fa-envelope"></i> Contact
                  me<i class="fas fa-angle-down rotate-icon"></i></a>
                <div class="collapsible-body">
                  <ul>
                    <li><a href="#" class="waves-effect">FAQ</a>
                    </li>
                    <li><a href="#" class="waves-effect">Write a message</a>
                    </li>
                    <li><a href="#" class="waves-effect">FAQ</a>
                    </li>
                    <li><a href="#" class="waves-effect">Write a message</a>
                    </li>
                    <li><a href="#" class="waves-effect">FAQ</a>
                    </li>
                    <li><a href="#" class="waves-effect">Write a message</a>
                    </li>
                    <li><a href="#" class="waves-effect">FAQ</a>
                    </li>
                    <li><a href="#" class="waves-effect">Write a message</a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </li>
          
        </ul>
        <div class="sidenav-bg rgba-blue-strong"></div>
      </div>

</header>

<main>
      <div class="container-fluid">

<section>

<div class="modal fade" id="modalConfirmDelete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-sm modal-notify modal-danger" role="document">
              
              <div class="modal-content text-center">
                
                <div class="modal-header d-flex justify-content-center">
                  <p class="heading">Are you sure?</p>
                </div>

<div class="modal-body">

</div>

<div class="modal-footer flex-center">
                  <a href="https://mdbootstrap.com/product/material-design-for-bootstrap-pro/" class="btn btn-danger">Yes</a>
                  <a type="button" class="btn btn-outline-danger waves-effect" data-dismiss="modal">No</a>
                </div>
              </div>
              
            </div>
          </div>

</section>

<section class="card card-cascade narrower mb-5">

<div class="row">

<div class="col-md-5">

<div class="view view-cascade py-3 gradient-card-header info-color-dark">
                <h5 class="mb-0">Sales</h5>
              </div>

<div class="card-body">

<div class="row">

<div class="col-md-6 mb-4">

<p class="lead">
                      <span class="badge info-color-dark p-2">Date range</span>
                    </p>
                    <select class="mdb-select colorful-select dropdown-info">
                      <option value="" disabled>Choose time period</option>
                      <option value="1">Today</option>
                      <option value="2">Yesterday</option>
                      <option value="3">Last 7 days</option>
                      <option value="3">Last 30 days</option>
                      <option value="3">Last week</option>
                      <option value="3">Last month</option>
                    </select>

<p class="lead my-4">
                      <span class="badge info-color-dark p-2">Custom date</span>
                    </p>
                    <div class="md-form">
                      <input placeholder="Selected date" type="text" id="from" class="form-control datepicker">
                      <label for="date-picker-example">From</label>
                    </div>
                    <div class="md-form">
                      <input placeholder="Selected date" type="text" id="to" class="form-control datepicker">
                      <label for="date-picker-example">To</label>
                    </div>

</div>

<div class="col-md-6 mb-4 text-center">

<p>Total sales:
                      <strong>2000$</strong>
                      <button type="button" class="btn btn-info btn-sm p-2" data-toggle="tooltip" data-placement="top"
                        title="Total sales in the given period">
                        <i class="fas fa-question"></i>
                      </button>
                    </p>
                    <p>Average sales:
                      <strong>100$</strong>
                      <button type="button" class="btn btn-info btn-sm p-2" data-toggle="tooltip" data-placement="top"
                        title="Average daily sales in the given period">
                        <i class="fas fa-question"></i>
                      </button>
                    </p>

<span class="min-chart my-4" id="chart-sales" data-percent="76">
                      <span class="percent"></span>
                    </span>
                    <h5>
                      <span class="badge green p-2">Change
                        <i class="fas fa-arrow-circle-up ml-1"></i>
                      </span>
                      <button type="button" class="btn btn-info btn-sm p-2" data-toggle="tooltip" data-placement="top"
                        title="Percentage change compared to the same period in the past">
                        <i class="fas fa-question"></i>
                      </button>
                    </h5>

</div>

</div>

</div>

</div>

<div class="col-md-7">

<div class="view view-cascade py-3 gradient-card-header info-color-dark mb-4">

</div>

</div>

</div>

</section>

<section class="mb-5">

<div class="card p-2 mb-5">

<div class="row">

<div class="col-lg-3 col-md-12">

<select class="mdb-select colorful-select dropdown-primary mx-2">
                  <option value="" disabled selected>Bulk actions</option>
                  <option value="1">Delate</option>
                  <option value="2">Export</option>
                  <option value="3">Change segment</option>
                </select>

</div>

<div class="col-lg-3 col-md-6">

<select class="mdb-select colorful-select dropdown-primary mx-2">
                  <option value="" disabled selected>Show only</option>
                  <option value="1">All
                    <span> (2000)</span>
                  </option>
                  <option value="2">Never opened
                    <span> (200)</span>
                  </option>
                  <option value="3">Opened but unanswered
                    <span> (1800)</span>
                  </option>
                  <option value="4">Answered
                    <span> (200)</span>
                  </option>
                  <option value="5">Unsunscribed
                    <span> (50)</span>
                  </option>
                </select>

</div>

<div class="col-lg-3 col-md-6">

<select class="mdb-select colorful-select dropdown-primary mx-2">
                  <option value="" disabled selected>Filter segments</option>
                  <option value="1">Contacts in no segments
                    <span> (100)</span>
                  </option>
                  <option value="1">Segment 1
                    <span> (2000)</span>
                  </option>
                  <option value="2">Segment 2
                    <span> (1000)</span>
                  </option>
                  <option value="3">Segment 3
                    <span> (4000)</span>
                  </option>
                </select>

</div>

<div class="col-lg-3 col-md-6">

</div>

</div>

</div>

<div class="card card-cascade narrower">

<div class="view view-cascade py-3 gradient-card-header info-color-dark mx-4 d-flex justify-content-between align-items-center">

<a href="" class="white-text mx-3">Table name</a>

</div>

<div class="card-body">

<table class="table text-nowrap">
                  <thead>
                    <tr>
                      <th>
                        <input class="form-check-input" type="checkbox" id="checkbox">
                        <label for="checkbox" class="label-table form-check-label"></label>
                      </th>
                      <th>First column</th>
                      <th>Second column</th>
                      <th>Third column</th>
                      <th>Fourth column</th>
                      <th>Fifth column</th>
                      <th>Sixth column</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th scope="row">
                        <input class="form-check-input" type="checkbox" id="checkbox1">
                        <label for="checkbox1" class="label-table form-check-label"></label>
                      </th>
                      <td>Lorem Ipsum</td>
                      <td>Lorem Ipsum</td>
                      <td>Lorem Ipsum</td>
                      <td>Lorem Ipsum</td>
                      <td>Lorem Ipsum</td>
                      <td>Lorem Ipsum</td>
                    </tr>
                    <tr>
                      <th scope="row">
                        <input class="form-check-input" type="checkbox" id="checkbox2">
                        <label for="checkbox2" class="label-table form-check-label"></label>
                      </th>
                      <td>Lorem Ipsum</td>
                      <td>Lorem Ipsum</td>
                      <td>Lorem Ipsum</td>
                      <td>Lorem Ipsum</td>
                      <td>Lorem Ipsum</td>
                      <td>Lorem Ipsum</td>
                    </tr>
                    <tr>
                      <th scope="row">
                        <input class="form-check-input" type="checkbox" id="checkbox3">
                        <label for="checkbox3" class="label-table form-check-label"></label>
                      </th>
                      <td>Lorem Ipsum</td>
                      <td>Lorem Ipsum</td>
                      <td>Lorem Ipsum</td>
                      <td>Lorem Ipsum</td>
                      <td>Lorem Ipsum</td>
                      <td>Lorem Ipsum</td>
                    </tr>
                  </tbody>
                </table>

</div>

<div class="d-flex justify-content-between">

<select class="mdb-select colorful-select dropdown-primary mt-2 hidden-md-down">
                  <option value="" disabled>Rows number</option>
                  <option value="1" selected>10 rows</option>
                  <option value="2">25 rows</option>
                  <option value="3">50 rows</option>
                  <option value="4">100 rows</option>
                </select>

<nav class="mt-4">
                  <ul class="pagination pagination-circle pg-blue mb-0">

<li class="page-item disabled">
                      <a class="page-link">First</a>
                    </li>

<li class="page-item disabled">
                      <a class="page-link" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                        <span class="sr-only">Previous</span>
                      </a>
                    </li>

<li class="page-item active">
                      <a class="page-link">1</a>
                    </li>
                    <li class="page-item">
                      <a class="page-link">2</a>
                    </li>
                    <li class="page-item">
                      <a class="page-link">3</a>
                    </li>
                    <li class="page-item">
                      <a class="page-link">4</a>
                    </li>
                    <li class="page-item">
                      <a class="page-link">5</a>
                    </li>

<li class="page-item">
                      <a class="page-link" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                        <span class="sr-only">Next</span>
                      </a>
                    </li>

<li class="page-item">
                      <a class="page-link">Last</a>
                    </li>

</ul>
                </nav>

</div>

</div>

</div>

</section>

<section class="mb-5">

<div class="md-accordion accordion" id="accordionEx" role="tablist" aria-multiselectable="true">

<div class="card">

<div class="card-header" role="tab" id="headingOne">

<div class="dropdown float-left">
                  <button class="btn btn-info btn-sm m-0 mr-3 p-2 dropdown-toggle" type="button" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-pencil-alt"></i>
                  </button>
                  <div class="dropdown-menu dropdown-info">
                    <a class="dropdown-item" href="#">Add new</a>
                    <a class="dropdown-item" href="#">Rename folder</a>
                    <a class="dropdown-item" href="#">Delete folder</a>
                  </div>
                </div>

<a id="folder-1" data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne" aria-expanded="true"
                  aria-controls="collapseOne">
                  <h5 class="mt-1 mb-0">
                    <span>Folder 1</span>
                    <i class="fas fa-angle-down rotate-icon"></i>
                  </h5>
                </a>

</div>

<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
                <div class="card-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="card">

<div class="card-header" role="tab" id="headingTwo">

<div class="dropdown float-left">
                  <button class="btn btn-info btn-sm m-0 mr-3 p-2 dropdown-toggle" type="button" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-pencil-alt"></i>
                  </button>
                  <div class="dropdown-menu dropdown-info">
                    <a class="dropdown-item" href="#">Add new</a>
                    <a class="dropdown-item" href="#">Rename folder</a>
                    <a class="dropdown-item" href="#">Delete folder</a>
                  </div>
                </div>

<a id="folder-2" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo" aria-expanded="true"
                  aria-controls="collapseTwo">
                  <h5 class="mt-1 mb-0">
                    <span>Folder 2</span>
                    <i class="fas fa-angle-down rotate-icon"></i>
                  </h5>
                </a>

</div>

<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="card-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="card">

<div class="card-header" role="tab" id="headingThree">

<div class="dropdown float-left">
                  <button class="btn btn-info btn-sm m-0 mr-3 p-2 dropdown-toggle" type="button" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-pencil-alt"></i>
                  </button>
                  <div class="dropdown-menu dropdown-info">
                    <a class="dropdown-item" href="#">Add new</a>
                    <a class="dropdown-item" href="#">Rename folder</a>
                    <a class="dropdown-item" href="#">Delete folder</a>
                  </div>
                </div>

<a id="folder-3" data-toggle="collapse" data-parent="#accordionEx" href="#collapseThree" aria-expanded="true"
                  aria-controls="collapseThree">
                  <h5 class="mt-1 mb-0">
                    <span>Folder 3</span>
                    <i class="fas fa-angle-down rotate-icon"></i>
                  </h5>
                </a>
              </div>

<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="card-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>

</section>

</div>
    </main>

<footer class="page-footer font-small">

<div class="footer-copyright text-center py-3">© 2018 Copyright:
        <a href="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com</a>
      </div>

</footer>

</body>

CSS

JS

// SideNav Button Initialization
    $(".button-collapse").sideNav();
    // SideNav Scrollbar Initialization
    var sideNavScrollbar = document.querySelector('.custom-scrollbar');
    Ps.initialize(sideNavScrollbar);

// Material Select Initialization
    $(document).ready(function () {
      $('.mdb-select').material_select();
    });

// Data Picker Initialization
    $('.datepicker').pickadate();

// Tooltip Initialization
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })

// Minimalist chart
    $(function () {
      $('.min-chart#chart-sales').easyPieChart({
        barColor: "#4caf50",
        onStep: function (from, to, percent) {
          $(this.el).find('.percent').text(Math.round(percent));
        }
      });
    });

// Main chart
    var ctxL = document.getElementById("lineChart").getContext('2d');
    var myLineChart = new Chart(ctxL, {
      type: 'line',
      data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
          label: "My First dataset",
          fillColor: "#fff",
          backgroundColor: 'rgba(255, 255, 255, .3)',
          borderColor: 'rgba(255, 255, 255)',
          data: [0, 10, 5, 2, 20, 30, 45],
        }]
      },
      options: {
        legend: {
          labels: {
            fontColor: "#fff",
          }
        },
        scales: {
          xAxes: [{
            gridLines: {
              display: true,
              color: "rgba(255,255,255,.25)"
            },
            ticks: {
              fontColor: "#fff",
            },
          }],
          yAxes: [{
            display: true,
            gridLines: {
              display: true,
              color: "rgba(255,255,255,.25)"
            },
            ticks: {
              fontColor: "#fff",
            },
          }],
        }
      }
    });

$(function () {
      $('#folder-1').click(function () {
        toastr.error("Folder 1 has been clicked!", "Folder 1", {
          "positionClass": "md-toast-top-right",
        });
      });
      $('#folder-2').click(function () {
        // make it not dissappear
        toastr.info("Folder 2 has been clicked!", "Folder 2");
      });
      $('#folder-3').click(function () {
        // make it not dissappear
        toastr.info("Folder 3 has been clicked!", "Folder 3");
      });
    });