No Time Dad

A blog about web development written by a busy dad

Quick Bootstrap Sidenav Example

I recently needed to create the classic two column sidenav layout using Bootstrap. This was for a dashboard of sorts that I was building. It didn’t need to be overly fancy, or responsive. I looked at the Bootstrap examples page and decided that the dashboard example was the closest layout to what I was looking for.

The dashboard example was actually too responsive and fancy for what I needed, so I stripped it down to the bare bones html shown below. It’s a really simple Bootstrap sidenav example, but it can be expanded on as needed.

For this example I’m using bootstrap@5.1.1 via cdn.

bootstrap_sidenav_example

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
    crossorigin="anonymous">
  <title>Bootstrap Sidenav Example</title>
</head>
<body>
  <div class="container-fluid">
    <div class="row vh-100">
      <nav class="col-2 bg-secondary text-white">
        Sidebar
      </nav>
      <main class="col-10 bg-light">
        Content
      </main>
    </div>
  </div>
</body>
</html>

The important elements are here:

<div class="container-fluid">
  <div class="row vh-100">
    <nav class="col-2 bg-secondary text-white">
      Sidebar
    </nav>
    <main class="col-10 bg-light">
      Content
    </main>
  </div>
</div>

The basic structure consists of a parent div that is the “container” and a child div that is a single row containing its own child divs. Those child divs are the sidebar and content sections of the page. The child divs use the Bootstrap grid system for spacing. Which makes me chuckle since their “grid” system is now actually flexbox under the hood.

I typically don’t add many classes to the container div and instead use the child divs to fine-tune the styling. I always find it easier to apply spacing or whatever other changes to the inner divs and leave the outer div as more or less constant. This makes it easier to unwind spacing changes later as needed, and can help keep each section of the page independent.

The container-fluid class sets the width to 100% via width: 100%; and added auto left and right margins via margin-left: auto; and margin-right: auto;. Unlike the Bootstrap container class which does not span the full width of the page. Most dashboards I see don’t have any margin or space on the left and right, they take up the whole width.

I initialize a row and set the height to 100% via vh-100 which is equivalent to height: 100vh; in vanilla css. If I didn’t set the view height than the sidebar and content sections would only be as tall as the content in them. Which is fine in some scenarios, but I tend to think it looks better if they fill the entire view height. Especially if either of them have a background-color that isn’t white.

The Bootstrap grid system is defined as a 12 column grid. So determining the width of the sidebar and content section is just a matter of spliting the different. Here I’ve chosen to make the sidebar col-2 and the content section the remaining 10 via col-10. It could be any variation, though. As long as it adds up to 12.

Lastly, for this Bootstrap sidenav example I changed the background-color of each section via the Bootstrap utility classes bg-light and bg-secondary. Both of which come as pre-defined utility classes in the default bootstrap css. I could’ve customized the colors, but that would require some extra build tools (like a sass compiler) that I didn’t want to bring into the project just yet.

Related Posts