How to create sidebar in bootstrap

BootstrapHow-ToBeginner · 4 min read

How to Create a Sidebar in Bootstrap: Simple Guide

To create a sidebar in Bootstrap, use a div with Bootstrap's flexbox classes like d-flex and flex-column to arrange sidebar content vertically. Combine it with vh-100 for full height and bg-light for background styling. Place your main content next to it inside a flex container for a responsive layout.

📐

Syntax

Use a container with d-flex to create a flex layout. Inside, add a sidebar div with flex-column to stack items vertically. Use vh-100 to make the sidebar full viewport height and bg-light for a light background. The main content goes in a sibling div that fills the remaining space.

html

<div class="d-flex">
  <div class="d-flex flex-column vh-100 bg-light p-3" style="width: 250px;">
    <!-- Sidebar content here -->
  </div>
  <div class="flex-grow-1 p-3">
    <!-- Main content here -->
  </div>
</div>

Output

A vertical sidebar on the left with light background and main content area on the right.

💻

Example

This example shows a simple sidebar with navigation links on the left and main content on the right. The sidebar stays full height and the layout adjusts on smaller screens.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Sidebar Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <div class="d-flex">
    <nav class="d-flex flex-column vh-100 bg-light p-3" style="width: 250px;">
      <h5>Sidebar</h5>
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a href="#" class="nav-link active" aria-current="page">Home</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Profile</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Messages</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Settings</a>
        </li>
      </ul>
    </nav>
    <main class="flex-grow-1 p-3">
      <h1>Main Content</h1>
      <p>This is the main content area next to the sidebar.</p>
    </main>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A vertical sidebar on the left with navigation links and a main content area on the right with heading and paragraph.

⚠️

Common Pitfalls

Not using vh-100 causes the sidebar to not fill the full height of the screen.
Forgetting d-flex on the container breaks the side-by-side layout.
Setting fixed widths without responsive considerations can cause overflow on small screens.
Not using semantic elements like nav for navigation reduces accessibility.

html

<!-- Wrong: Missing d-flex on container -->
<div>
  <div class="d-flex flex-column vh-100 bg-light p-3" style="width: 250px;">
    Sidebar content
  </div>
  <div class="flex-grow-1 p-3">
    Main content
  </div>
</div>

<!-- Right: Add d-flex -->
<div class="d-flex">
  <div class="d-flex flex-column vh-100 bg-light p-3" style="width: 250px;">
    Sidebar content
  </div>
  <div class="flex-grow-1 p-3">
    Main content
  </div>
</div>

Output

The first block stacks vertically (wrong), the second block shows side-by-side layout (correct).

📊

Quick Reference

Use these Bootstrap classes to build a sidebar layout:

d-flex: Creates a flex container for horizontal layout.
flex-column: Stacks sidebar items vertically.
vh-100: Makes sidebar full viewport height.
bg-light: Adds a light background color.
flex-grow-1: Makes main content fill remaining space.
p-3: Adds padding for spacing.

✅

Key Takeaways

Use d-flex on the container to create a horizontal layout with sidebar and main content.

Apply d-flex, flex-column and vh-100 to the sidebar for vertical stacking and full height.

Use semantic elements like nav for accessibility in the sidebar.

Set a fixed width on the sidebar and use flex-grow-1 on main content for responsive sizing.

Test on different screen sizes to ensure the sidebar does not cause overflow or layout issues.