Bootstrap for Beginners - Code a Simple Dashboard Layout

Hello Coders!

This article explains how to code a simple One-page Dashboard Layout in Bootstrap 5, using the theory from a previous article: Bootstrap - Tutorial for Beginners. The source code for the final project can be downloaded from Github and used in commercial projects or simply for eLearning activities. For newcomers, Bootstrap is a leading JS/CSS framework used to code responsive websites and apps.

Thanks for reading!

👉 Bootstrap 5 Dashboard - LIVE Demo
👉 Bootstrap 5 Dashboard - Source Code

This simple Dashboard provides also a dark-mode switcher positioned on the left sidebar (sources available on GH).

Dashboard Page Bootstrap 5 - Animated Presentation

✨ Topics

👉 Bootstrap - Short Presentation
👉 How to install and use Bootstrap
👉 Coding the navbar
👉 Coding the sidebar
👉 Main Content: cards, charts, and data tables
👉 Dark Mode
👉 Links & Resources

✨ Bootstrap Short Intro

Bootstrap is a popular JS/CSS Framework for developing responsive and mobile-first websites, that provides HTML, CSS, and JavaScript-based design templates for almost anything, including (but not limited to): typography, forms, buttons, navigation, and other components.

The primary purpose of adding Bootstrap to a project is to apply Bootstrap's choices of color, size, font, and layout to that project. Currently, Bootstrap 5 is the newest version of Bootstrap, with new components, a faster stylesheet, and more responsiveness.

For more information, feel free to access the official website and docs.

Bootstrap 5 - Cover Image

✨ How to use Bootstrap

The easier way to use Bootstrap in a new project is to include all mandatory assets from a CDN (Content Delivery Network). Let's create a new directory for our project with an index.html file, where the new HTML code will be added.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Landing Page</title>
</head>
<body>
    <!-- Page Content here --> 
</body>
</html>

To speed up our development, we can use a modern programming editor like VsCode or Atom, which comes with modules and many features like code completion and highlighting. Below is the download link for the VsCode:

👉 VsCode - download page

VsCode Editor - Cover Page

Once the VsCode is installed, we can open our project by typing code . in the working directory (where index.html is saved).

✨ Coding the `Navbar`

Go to this link and copy the first navbar that has the search bar. Let’s change both the navbar-light and bg-light to dark. We will change the search bar to something nicer, for this we’ll use Input Groups.

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
</div>

To use Bootstrap 5 icons, we will import them using CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

Copy and paste this line of code inside your <head> element.

To make the navbar more appealing, we will change the search button with an icon for a nicer layout.

Dashboard Bootstrap 5 - Navbar

To make this change we need to copy the search icon code and paste it into the button snippet.

Dashboard Bootstrap 5 Navbar - Update Button

We’re going to do the same thing to the Dropdown text. I’m using an icon of a user.

 <i class="bi bi-person-square"></i>

We have to fix the dropdown menu as well because right now it goes offscreen. Add dropdown-menu-end to dropdown-menu class. This fixes the problem.

Let’s make the navbar-brand font bolder by adding fw-bold to the navbar-brand class.

At this point, all we have is a simple navbar. Let's move forward and code the sidebar.

✨ Dashboard `Sidebar`

Bootstrap provides Offcanvas, a basic sidebar component that can be toggled via JavaScript to appear from any edge of the viewport.

Here is the code for our sidebar:

<div class="offcanvas offcanvas-start side-bar" 
     data-bs-scroll="true" 
     tabindex="-1" 
     id="offcanvas" 
     aria-labelledby="offcanvas">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvas">Sample Heading</h5>
        <button type="button" 
                class="btn-close text-reset" 
                data-bs-dismiss="offcanvas" 
                aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <p>Sample Paragraph</p>
    </div>
</div>

For a nice integration with the navbar we need to add some CSS code listed below:

/* sidebar width */
.side-bar
{
    width: var(--offcanvas-width);
}

/* sidebar links */
.sidebar-link
{
    display: flex;
    align-items: center;
}

.sidebar-link .right-icon
{
    display: inline-flex;
    transition: all ease 0.5s;
}

Dashboard Bootstrap 5 Sidebar - Mobile Collapse

✨ `Main Content`

After the sidebar, we’re going to create the main element with a class of mt-5 pt-3.

Right now our content inside the main element is overlapping with our sidebar, to fix it we need to style it. Inside our css media tag, create a new line for main.

Add this code inside it: margin-left: var(--offcanvas-width);. I’m going to make our navbar fixed to the top. To do this I need to add fixed-top class to the navbar class:

Dashboard Main Content - Restyle Navbar

Back in our index.html file, let’s start adding content to our main class. Add a container-fluid, row and a col-md-12:

Dashboard Main Content - HTML Code

The center of the page will contain three rows:

👉 Info cards
👉 Charts - Powered by Chart.js
👉 Data Tables with paginated information.

Let's break down all these containers and code the HTML and CSS for each section.

Dashboard Main Content - Content Rows.

👉 Main Content - `Cards`

Each container (cards, charts ..) will have a parent row where all the HTML code lives. Here is the basic card code for the cards section:

<div class="card text-white bg-primary mb-3" 
     style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example [.. truncated content ..]</p>
  </div>
</div>

When we use col-md-3, we can fit 4 cards next to each other because Bootstrap has a 12-column grid.

For a colorful layout, we can change the color of the cards by changing the line bg-primary to danger, warning .. etc. Here is the output:

Dashboard Main Content - Cards

👉 Main Content - `Charts`

For the charts section, we will use a 3rd party open-source JS library used to display a simple and colorful bar chart. Each chart lives into a card responsive container that uses 6 cells each.

Dashboard Main Content - Bar Charts.

To code this section, here is the HTML for the card:

<div class="card">
      <div class="card-header">Charts</div>
          <div class="card-body">
            <canvas class="chart" width="400" height="200"></canvas>
      </div>
</div>

We have to make a new folder called js. Inside it, create a new file called script.js. Inside this new file, the following code that builds the charts should be added:

const charts = document.querySelectorAll(".chart");

charts.forEach(function (chart) {
  var ctx = chart.getContext("2d");
  var myChart = new Chart(ctx, {
    type: "bar",
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [
        {
          label: "# of Votes",
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)",
          ],
          borderColor: [
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)",
          ],
          borderWidth: 1,
        },
      ],
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
        },
      },
    },
  });
});

In human language, the above JavaScript snippet identifies the cards and injects the data that is translated by the Chart.js library into colorful bar charts.

Dashboard Bar Charts - Single Card.

Of course, Chart.js should be added as a runtime dependency in the index.html file (via a distant CDN).

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.2/dist/chart.min.js"></script>

👉 Main Content - `Data Tables`

For newcomers, data tables provide access to a large amount of data using a paginated layout. Once the necessary code is finished, we should have something similar to this:

Dashboard Main Content - Data Tables.

To code this useful component, we need a new row, a card, and a card header. After that, we will create a card-body and then a table-responsive div class.

Go to this link (Bootstrap Component) and copy the whole HTML section. Paste the whole thing after your table-responsive class. Change the class=”display” to class="table data-table".

👉 Main Content `Styling`

At this point, our dashboard page has all the elements (top cards, charts, and data tables) but the layout is not yet optimized for a nice user experience. Here are the steps for a nicer layout.

Add br elements after charts and data tables sections

This action will increase the space between the rows so the users enjoy more the content provided by each section.

Dashboard Main Content - Added BR between lines

Let’s make the card borders round and give charts, data table new colors.

The CSS code that should be added to the style.css file:

/* table styling */
.card,
.card-chart,
.card-table
{
    border-radius: 10px;
}

.card-chart
{
    background: rgb(240, 240, 240);
}

.chart
{
    background: rgb(230, 230, 230);
    border-radius: 5px;
}

.card-table
{
    background: rgb(240, 240, 240);
}

We’ll make our table have the striped effect by coloring every even row:

/* striped table effect */
tr:nth-child(even)
{
    background-color: rgb(250, 250, 250);
}

The complete CSS code for all the above sections can be found on Github.

Bootstrap 5 Dashboard - CSS Style.

Now, we have a basic, minimal dashboard. How about adding a dark mode and letting users decide the color schema.

✨ `Coding the Dark Mode`

This feature aims to let the users choose how the app renders the containers: using a light or a dark background. To achieve this goal, the first thing we need to do is create two files in our js folder: dark-mode-switch.js and dark-mode-switch.min.js (open-source JS library). This will handle the switching between dark mode and light mode using the browser's local storage.

Bootstrap 5 Dashboard - Dark Mode.

The next step is to code the dark mode control switcher as a small sidebar button.

<li class="my-4">
    <hr class="dropdown-divider">
</li>
<div class="custom-control custom-switch px-3">
    <label class="custom-control-label" for="darkSwitch">
    <span class="fw-bold">
        <i class="bi bi-moon me-2"></i>Dark Mode
    </span>
    </label>
    <input type="checkbox" 
            class="custom-control-input checkbox ms-auto" 
             id="darkSwitch">
</div>

And the necessary CSS code:

/* checkbox */
input[type=checkbox]
{
    height: 0px;
    width: 0px;
    visibility: hidden;
}

label
{
    cursor: pointer;
}

Of course, we need to include the CSS code that styles the dark mode to the index.html file:

<link rel="stylesheet" href="css/dark-mode.css">

The full code for the dark-mode.css is quite short and self-explanatory:

[data-theme="dark"]
{
  background: rgb(65, 65, 65);
  color: #fff;
}

[data-theme="dark"] .bg-black {
  background-color: #fff !important;
}

[data-theme="dark"] .bg-dark {
  background-color: #222 !important;
}

[data-theme="dark"] .bg-light {
  background-color: #222 !important;
}

[data-theme="dark"] .bg-white {
  background-color: #000 !important;
}

At this point, we're pretty much done with the dark mode now, all you gotta do is go on and style the charts and tables separately.

✨ Links & Resources

Thanks for reading! Curious minds can go further with their study by accessing the resources presented below:

👉 Bootstrap Basics - a comprehensive tutorial for beginners
👉 More Free Dashboards crafted in Django, Flask, and React

Bootstrap for Beginners - Code a Simple Dashboard Layout

Learn how to code a simple Dashboard Page from scratch using Bootstrap 5 and a lightweight CSS file - The Sample can be downloaded from GH.

✨ Topics

✨ Bootstrap Short Intro

✨ How to use Bootstrap

✨ Coding the Navbar

✨ Dashboard Sidebar

✨ Main Content

👉 Main Content - Cards

👉 Main Content - Charts

👉 Main Content - Data Tables

👉 Main Content Styling

✨ Coding the Dark Mode