Sidebar with content area in Bootsrap

Introduction

A sidebar with a content area helps organize a webpage into two parts: a menu or navigation on the side and the main content next to it. This makes it easy for users to find and read information.

When you want to show a menu or links on the side of the page.

When you want the main content to stay visible next to navigation.

When building dashboards or admin panels with many options.

When you want a clean layout that separates navigation from content.

When you want a responsive layout that adjusts on smaller screens.

Syntax

Bootsrap

<div class="d-flex">
  <nav class="sidebar bg-light p-3">
    <!-- Sidebar content here -->
  </nav>
  <main class="content flex-grow-1 p-3">
    <!-- Main content here -->
  </main>
</div>

Use d-flex on a container to create a flexible horizontal layout.

The sidebar uses fixed width or padding, and the content area uses flex-grow-1 to fill remaining space.

Examples

This example shows a sidebar with a fixed width of 250px and a vertical menu. The content area fills the rest of the space.

Bootsrap

<div class="d-flex">
  <nav class="sidebar bg-light p-3" style="width: 250px;">
    <ul class="nav flex-column">
      <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Profile</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Settings</a></li>
    </ul>
  </nav>
  <main class="content flex-grow-1 p-3">
    <h1>Welcome</h1>
    <p>This is the main content area.</p>
  </main>
</div>

This example uses flex-column flex-md-row to stack sidebar on small screens and place side by side on medium and larger screens.

Bootsrap

<div class="d-flex flex-column flex-md-row">
  <nav class="sidebar bg-light p-3" style="width: 200px;">
    <p><strong>Menu</strong></p>
    <ul class="nav flex-column">
      <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Reports</a></li>
    </ul>
  </nav>
  <main class="content flex-grow-1 p-3">
    <h2>Dashboard Content</h2>
    <p>Details and charts go here.</p>
  </main>
</div>

Sample Program

This complete example creates a sidebar on the left with a vertical menu and a main content area on the right. The sidebar stays fixed width and full height. The main content area fills the rest of the screen. The layout uses Bootstrap's flex utilities for a clean, responsive design.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Sidebar with Content Area</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    .sidebar {
      width: 220px;
      min-height: 100vh;
    }
  </style>
</head>
<body>
  <div class="d-flex">
    <nav class="sidebar bg-light p-3">
      <h5>Menu</h5>
      <ul class="nav flex-column" role="navigation" aria-label="Main menu">
        <li class="nav-item"><a href="#home" class="nav-link">Home</a></li>
        <li class="nav-item"><a href="#services" class="nav-link">Services</a></li>
        <li class="nav-item"><a href="#about" class="nav-link">About</a></li>
        <li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
      </ul>
    </nav>
    <main class="content flex-grow-1 p-4" tabindex="0">
      <h1 id="home">Welcome to Our Website</h1>
      <p>This is the main content area next to the sidebar menu.</p>
      <section id="services">
        <h2>Services</h2>
        <p>We offer web design, development, and consulting.</p>
      </section>
      <section id="about">
        <h2>About Us</h2>
        <p>Learn more about our team and mission.</p>
      </section>
      <section id="contact">
        <h2>Contact</h2>
        <p>Get in touch via email or phone.</p>
      </section>
    </main>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Important Notes

Use semantic HTML elements like <nav> for the sidebar and <main> for the content to improve accessibility.

Adding tabindex="0" to the main content allows keyboard users to focus on it easily.

Use responsive classes like flex-column flex-md-row if you want the sidebar to stack on small screens.

Summary

A sidebar with content area divides the page into navigation and main content sections.

Bootstrap's flex utilities make it easy to create side-by-side layouts.

Use semantic tags and accessibility features for better user experience.

Practice

1. What is the main purpose of using a sidebar with a content area in a webpage layout?

easy

A. To hide content from users on smaller screens

B. To separate navigation links from the main content for better organization

C. To make the page load faster by splitting content

D. To add decorative images on the side of the page

Solution

1. Step 1: Understand sidebar role

   A sidebar is typically used to hold navigation or extra information separate from main content.

2. Step 2: Identify layout purpose

   Separating navigation from content helps users find links easily and keeps content clear.

3. Final Answer:

   To separate navigation links from the main content for better organization -> Option B

4. Quick Check:

   Sidebar = Navigation separation [OK]

Hint: Sidebar divides navigation and content clearly [OK]

Common Mistakes:

• Thinking sidebar is only for decoration
• Believing sidebar speeds up page load
• Assuming sidebar hides content on small screens

2. Which Bootstrap class combination correctly creates a sidebar and content area side by side using flexbox?

easy

A. class='d-flex flex-row' on a container with sidebar and content divs

B. class='d-block flex-column' on a container with sidebar and content divs

C. class='d-flex flex-column' on a container with sidebar and content divs

D. class='d-inline flex-row' on a container with sidebar and content divs

Solution

1. Step 1: Identify flex container class

   Bootstrap uses d-flex to enable flexbox layout on a container.

2. Step 2: Choose direction for sidebar and content

   To place sidebar and content side by side, use flex-row for horizontal layout.

3. Final Answer:

   class='d-flex flex-row' on a container with sidebar and content divs -> Option A

4. Quick Check:

   Flex row = side by side layout [OK]

Hint: Use d-flex with flex-row for horizontal sidebar layout [OK]

Common Mistakes:

• Using flex-column which stacks vertically
• Using d-block which disables flexbox
• Using d-inline which is not a flex container

3. Given this HTML snippet using Bootstrap classes:

<div class='d-flex'>
  <nav class='bg-light p-3' style='width: 200px;'>Sidebar</nav>
  <main class='flex-grow-1 p-3'>Content area</main>
</div>

What will be the visual layout in the browser?

medium

A. Sidebar and content area overlap each other

B. Sidebar stacked above content area vertically

C. Sidebar hidden, only content area visible

D. Sidebar on the left with fixed width, content area fills remaining space on the right

Solution

1. Step 1: Analyze flex container behavior

   The d-flex class creates a flex container with default row direction, placing children side by side.

2. Step 2: Understand child sizing

   The nav has fixed width 200px, and main uses flex-grow-1 to fill remaining space.

3. Final Answer:

   Sidebar on the left with fixed width, content area fills remaining space on the right -> Option D

4. Quick Check:

   Fixed width sidebar + flex-grow content = side by side [OK]

Hint: Fixed width sidebar + flex-grow content = side by side [OK]

Common Mistakes:

• Assuming vertical stacking without flex-row
• Thinking sidebar disappears without display:none
• Believing elements overlap without position styles

4. Identify the error in this Bootstrap sidebar layout code:

<div class='d-flex flex-column'>
  <nav class='sidebar'>Menu</nav>
  <main class='content flex-grow-1'>Main content</main>
</div>

Why does the sidebar appear above the content instead of side by side?

medium

A. Because flex-column stacks items vertically, not horizontally

B. Because flex-grow-1 is missing on the sidebar

C. Because d-flex is missing on the container

D. Because sidebar class is not a Bootstrap class

Solution

1. Step 1: Check flex direction

   The container uses flex-column, which stacks children vertically.

2. Step 2: Understand layout effect

   Vertical stacking places sidebar above content, not side by side.

3. Final Answer:

   Because flex-column stacks items vertically, not horizontally -> Option A

4. Quick Check:

   flex-column = vertical stack [OK]

Hint: Use flex-row for side by side, not flex-column [OK]

Common Mistakes:

• Confusing flex-grow with layout direction
• Forgetting d-flex disables flexbox
• Assuming custom class affects flex direction

5. You want a sidebar that is always visible on desktop but collapses into a toggle button on small screens using Bootstrap. Which approach correctly combines sidebar layout and responsive behavior?

hard

A. Use d-inline for sidebar and d-block for content area

B. Use flex-column always and hide sidebar with CSS on small screens

C. Use d-flex flex-row for desktop layout and Bootstrap's offcanvas component for small screens

D. Use JavaScript to remove sidebar element on small screens

Solution

1. Step 1: Set desktop layout with flex

   Using d-flex flex-row places sidebar and content side by side on larger screens.

2. Step 2: Add responsive toggle with offcanvas

   Bootstrap's offcanvas component provides a sidebar that can toggle visibility on small screens.

3. Final Answer:

   Use d-flex flex-row for desktop layout and Bootstrap's offcanvas component for small screens -> Option C

4. Quick Check:

   Flex row + offcanvas = responsive sidebar [OK]

Hint: Combine flex layout with offcanvas for responsive sidebar [OK]

Common Mistakes:

• Using flex-column which stacks vertically always
• Hiding sidebar with CSS only loses accessibility
• Removing sidebar element breaks navigation