Bootstrap for Beginners - Code a Simple Dashboard Layout
Tags: webdev, beginners, bootstrap, tutorial
Published: 2022-05-16 18:09:13

---
title: Bootstrap for Beginners - Code a Simple Dashboard Layout
published: true
description: 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.
tags: webdev, beginners, bootstrap, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tb88ix4z4s78st0vu07w.jpg
canonical_url: https://blog.appseed.us/bootstrap-for-beginners-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](https://blog.appseed.us/bootstrap-for-beginners-with-examples/). 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](https://sample-bootstrap-dashboard.appseed-srv1.com/) - LIVE Demo
- 👉 [Bootstrap 5 Dashboard](https://github.com/app-generator/sample-bootstrap-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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2viau28wllsmryjx0nt.gif)

---

## ✨ 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](https://getbootstrap.com/) and [docs](https://getbootstrap.com/docs/5.2/getting-started/introduction/).

---

![Bootstrap 5 - Cover Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0wj1s0wd2igiqwgb203.png)

---

## ✨ 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
<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](https://code.visualstudio.com/Download) - download page

---

![VsCode Editor - Cover Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yji3iozftv8jbeolt9rj.png)

---

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](https://getbootstrap.com/docs/5.1/components/navbar/) 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.

```html
<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`:

```html
<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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/elkffmc40py6gew8gqye.png)

---

To make this change we need to copy the [search icon](https://icons.getbootstrap.com/icons/search/) code and paste it into the button snippet.

---

![Dashboard Bootstrap 5 Navbar - Update Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fsvft5fnurqxojx6wi6.png)

---

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

```html
 <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:

```html
<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:

```css
/* 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w92me94inviby6f3mbhv.gif)

---

## ✨ `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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezq4r372kfg2xvkx6gbt.png)

---

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1y5r6ztqy2ed4e3ebric.png)

---

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.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xcwd46r2wob0yaq8wmc8.png)

--- 

### 👉 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:

```html
<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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1swcgbd0kkzivj9wb6ys.png)

---

### 👉 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.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rhp04dyjh0rt56kluxe.png)

---

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

```html
<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:

```javascript
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.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgrsh8cngaom7kzqt9gn.png)

---

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

```html
<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.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ex81yf5zk8d0j0dwozq4.png)

---

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](https://datatables.net/examples/data_sources/dom.html) (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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzudhfzriub1kw9j5f5i.png) 
 
---

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

```css
/* 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:

```css
/* 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](https://github.com/app-generator/sample-bootstrap-dashboard/blob/main/css/style.css) - 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.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsc0gr9i9tdvnxvr4wii.gif)

---

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

```html
<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:

```css
/* 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:

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

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

```css
[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](https://blog.appseed.us/bootstrap-for-beginners-with-examples/) - a comprehensive tutorial for beginners
- 👉 More [Free Dashboards](https://appseed.us/admin-dashboards/open-source) crafted in Django, Flask, and [React](https://appseed.us/apps/react)