Bootstrap 5 Sidebar-How to create a Responsive Bootstrap 5 Sidebar
Tags: tutorial, bootstrap5, frontend, development
Published: 2022-09-19 19:44:16

---
title: Bootstrap 5 Sidebar-How to create a Responsive Bootstrap 5 Sidebar
published: true
date: 2021-01-10 01:16:04 UTC
tags: [tutorial, Bootstrap5, frontend, development]
canonical_url: https://www.devwares.com/blog//how-to-create-a-responsive-bootstrap-5-sidebar/
---

Sometimes, there are pieces of information in a column to the right or left of the main content in a website layout. This column is known as a sidebar.

Bootstrap 5 Sidebars are a User Interface element ( usually a column to the left ) containing supplementary information, like navigation links or ads.

## Table Of Contents

- What are we building?
- Prerequisites
- What is Contrast bootstrap 5 UI?
- Creating our Bootstrap 5 Sidebar
- Conclusion
- Resources

## What we are building

In this article, we are going to walk through building a Bootstrap sidebar with Contrast. Like the image we have below:

![Bootstrap 5 Sidebar](https://www.devwares.com/blog/images/sidebar-1.gif)

## Prerequisites

To make the most of this article, it is important that you have the following:

- A basic understanding of HTML.
- A basic understanding of CSS.
- A basic understanding of JavaScript

## Understanding what Contrast Bootstrap 5 UI is ?

Contrast or Bootstrap 5 UI kit is an elegant bootstrap UI kit featuring over 2000+ essential components. Contrast helps simplify the web development process and can be integrated with any project to build mobile-first, responsive, and elegant websites and web apps.

## Adding the Contrast bootstrap 5 library CDN

We will be using the Contrast bootstrap 5 library to build out our Bootstrap 5 Sidebar. To do that we start by including the library in our project using the Bootstrap CDN.

We include the CSS CDN responsible for the Bootstrap styling in the `<head>` in our HTML file.

```
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/cdb.min.css" />

```

After including the CSS CDN links, we then include the JavaScript CDN responsible for creating dynamic components at the bottom of our project. We do this because we want our components before adding the functionality.

```
<script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/cdb.min.js"></script>

```

After adding the CDNs our HTML file should look like this

```
<!DOCTYPE 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" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/cdb.min.css" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/cdb.min.js"></script>
  </body>
</html>

```

## Creating our Bootstrap 5 Sidebar

With Contrast Bootstrap 5 UI kit we can create 2 kinds of sidebars

- Default Sidebar
- Multilevel Advanced Sidebar

## Default Sidebar

```
<div class="mx-auto r-w">
  <div class="container">
    <div class="app" style="display: flex; height: 100%; position: absolute">
      <div class="sidebar bg-dark text-white" id="sidebar-showcase" role="cdb-sidebar">
        <div class="sidebar-container">
          <div class="sidebar-header text-center">
            <a class="sidebar-toggler"><i class="fa fa-bars"></i></a>
            <a class="sidebar-brand">Contrast</a>
          </div>

          <div class="sidebar-nav">
            <div class="sidenav">
              <a class="sidebar-item">
                <i class="fa fa-th-large sidebar-icon"></i>
                <span>Dashboard</span>
              </a>
              <a class="sidebar-item">
                <i class="fa fa-sticky-note sidebar-icon"></i>
                <span>Components</span>
              </a>
            </div>

            <div class="sidenav">
              <div class="sidebar-dropdown">
                <div
                  class="sidebar-item"
                  data-toggle="collapse"
                  data-target="#collapseOne"
                  aria-expanded="true"
                  aria-controls="collapseOne"
                >
                  <i class="fa fa-th sidebar-icon"></i>
                  <span>Sidemenu</span>
                  <i class="fa fa-angle-right arrow-wrapper ml-auto"></i>
                </div>
              </div>
              <div class="sidebar-dropdown">
                <div
                  class="sidebar-item"
                  data-toggle="collapse"
                  data-target="#collapseTwo"
                  aria-expanded="true"
                  aria-controls="collapseTwo"
                >
                  <i class="fa fa-book sidebar-icon"></i>
                  <span>Sidemenu 2</span>
                  <i class="fa fa-angle-right arrow-wrapper ml-auto"></i>
                </div>
              </div>
            </div>
          </div>

          <div class="sidebar-footer">Sidebar Footer</div>
        </div>
      </div>
    </div>
  </div>
</div>

```

**Adding JavaScript for interaction**

Using JavaScript enables your project to be dynamic and allows users to interact with your components and web pages.

```
<script>
  const sidebar = document.querySelector('.sidebar');
  new CDB.Sidebar(sidebar);
</script>

<script src="../build/cdbbootstrap.js"></script>

```

In the code block above, we use the querySelector document object to select the sidebar using the sidebar class we gave it `sidebar`.

We then create a new sidebar instance from the Sidebar method we get from CDB.

Lastly, we link our project to the JavaScript file we get from the Contrast Bootstrap.

With that, we have created our dynamic Bootstrap 5 Sidebar using the Contrast UI library.

![Bootstrap 5 Sidebar](https://www.devwares.com/blog/images/bootstrap-sidebar-default.PNG).

## Multitlevel Sidebar

With the Contrast bootstrap 5 UI Multilvel Sidebar, we are able to create submenus in our sidebars, this submenus refer to menus located inside a menu.

```
<div class="app" style="display: flex; height: 100%; position: absolute">
  <div class="sidebar bg-dark text-white" id="sidebar-showcase" role="cdb-sidebar">
    <div class="sidebar-container">
      <div class="sidebar-header text-center">
        <a class="sidebar-toggler"><i class="fa fa-bars"></i></a>
        <a class="sidebar-brand">Contrast</a>
      </div>

      <div class="sidebar-nav">
        <div class="sidenav">
          <a class="sidebar-item">
            <i class="fa fa-th-large sidebar-icon"></i>
            <span>Dashboard</span>
          </a>
          <a class="sidebar-item">
            <i class="fa fa-sticky-note sidebar-icon"></i>
            <span>Components</span>
          </a>
        </div>

        <div class="sidenav">
          <div class="sidebar-dropdown">
            <div
              class="sidebar-item"
              data-toggle="collapse"
              data-target="#collapseOne"
              aria-expanded="true"
              aria-controls="collapseOne"
            >
              <i class="fa fa-th sidebar-icon"></i>
              <span>Sidemenu</span>
              <i class="fa fa-angle-right arrow-wrapper ml-auto"></i>
            </div>
            <div class="sidebar-sub-menu collapse bg-dark" id="collapseOne">
              <a class="sub-menu-item">Submenu 1</a>
              <a class="sub-menu-item">Submenu 2</a>
              <a class="sub-menu-item">Submenu 3</a>
            </div>
          </div>
          <div class="sidebar-dropdown">
            <div
              class="sidebar-item"
              data-toggle="collapse"
              data-target="#collapseTwo"
              aria-expanded="true"
              aria-controls="collapseTwo"
            >
              <i class="fa fa-book sidebar-icon"></i>
              <span>Sidemenu 2</span>
              <i class="fa fa-angle-right arrow-wrapper ml-auto"></i>
            </div>
            <div class="sidebar-sub-menu collapse bg-dark" id="collapseTwo">
              <a class="sub-menu-item">Submenu 1</a>
              <a class="sub-menu-item">Submenu 2</a>
              <a class="sub-menu-item">Submenu 3</a>
            </div>
          </div>
        </div>
      </div>

      <div class="sidebar-footer">Sidebar Footer</div>
    </div>
  </div>
</div>

```

## Adding JavaScript for interaction

```

<script>
    const sidebarNav = document.querySelector('#sidebar-nav');
    new CDB.Sidebar(sidebarNav);
</script>
<script>
    const sidebarShow = document.querySelector('#sidebar-showcase');
    new CDB.Sidebar(sidebarShow);
</script>

```

After this we have a sidebarthat looks a lot like

![Bootstrap 5 Sidebar](https://www.devwares.com/blog/images/sidebar-1.gif)

## Conclusion

This article discussed what Bootstrap 5 Sidebar is, why you would use the Bootstrap 5 Sidebar in your project, and how to create one using the Contrast bootstrap 5 UI kit.