Coding the dashboard

The main body of the dashboard is going to hold the main portion of this project. We'll start by setting up the two-column layout, followed by inserting the sidebar with pill-based navigation. Next, we'll update the typography styles and insert pie charts. Finally, we'll customize the Bootstrap panel and table components and add a line chart for good measure.

Setting up the layout

The dashboard is going to use a two-column layout. The left column will be our sidebar navigation, and it will use the Bootstrap pill component. The right-side will hold our page content with charts, panels, and tables. If you haven't already done so, create a file named index.ejs in the root of your project and enter the layout code:

<div class="container">
  <div class="row">
    <div class="col-lg-3">
      <!-- sidebar //-->
    </div>
    <div class="col-lg-9">
      <!-- content //-->
    </div>
  </div>
</div>

This layout code is...