Chapter 6. Bootstrap Dashboard

In this chapter, I'm going to show you how to create a dashboard using Bootstrap. For a change, we'll make a dark-colored design and implement a number of components commonly found on a dashboard. Part of this exercise will teach you how to integrate a third-party chart library and customize it to work in Bootstrap. We'll also cover customizations of a few components that we have not used yet, such as navigation pills, panels, and tables.

Before we dive into updating our template, let's take a look at what we'll be creating:

Customizing the template

As in our other projects, we start by copying our boilerplate project to a new directory called chapter6. Open the _data.json file and insert the following code:

{
  "index": {
    "pageTitle": "Dashboard"
}

For this project, we're only creating one page template. Let's start by creating a file in the root of our project. For now, just leave the file blank; we'll fill it in a bit later: index.ejs.

Updating _layout.ejs

Next, let's update the _layout.ejs file in the root of our new project. The layout for this project will need a few more things that we haven't seen before. First of all, insert the following line of code to import the Google web font Roboto, which we'll be using for our dashboard:

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>

For this project, we're going to use a third-party chart library to draw some pie charts and line graphs. I've decided to use a library called Chartist. This library...

Setting up the Less variables

Now that we've finished our layout, it's time to move on to updating our Less variables. For this project, I'm not going to add any new colors. We're going to fall back to the colors from our original boilerplate. I want to give you a good example of how it's useful to have these stock colors for use on a project.

Background colors

Let's start by updating our background colors to use our boilerplate color values. As you'll see, I'm using @black for the primary background. This is because we're going to make this a dark colored design:

@primary-background: @black;
@secondary-background: @dark-grey;
@inverse-background: @white;

Text colors

Next, let's update our text colors and invert them to be readable on a dark background:

@primary-text: @white;
@light-text: @dark-grey;
@loud-text: @white;
@inverse-text: @white;
@heading-text: @light-grey;

Link colors

The same inverse color approach will be used to set the values for our links:

@primary-link-color: @light-grey;
@primary...

Coding the header and footer

Let's now proceed to code the header and footer for the project. The header will use the default Bootstrap navbar with some color customizations. We'll also be inserting a search form and some other text into the header. Our footer will be super basic, with only a few social media icons and a copyright statement.

Updating the header

Let's start out by creating the header, and then we'll customize it. Here's the code for the entire thing:

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bootboard-nav">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Bootstrap...

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...

Summary

This brings the sixth chapter to a close. We covered how to code your own dashboard using Bootstrap. Let's review what you learned, which is as follows—how to code a dashboard using Bootstrap; how to create a project with a dark look and feel; how to implement and customize the Chartist JavaScript library; how to customize the Bootstrap panels component, table component, nav component, and navbar component; and how to use a mobile nav outside of the default navbar.