Sidebar with content area in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

What is the output of this Bootstrap sidebar layout code?

Consider this HTML snippet using Bootstrap 5 classes for a sidebar and content area. What will you see rendered in the browser?

Bootsrap

<div class="d-flex">
  <nav class="flex-shrink-0 p-3 bg-light" style="width: 250px;" aria-label="Sidebar">
    <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>
    </ul>
  </nav>
  <main class="flex-grow-1 p-3">
    <h1>Welcome</h1>
    <p>This is the main content area.</p>
  </main>
</div>

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

B Two side-by-side sections with equal width, both containing the same links.

C A horizontal navigation bar at the top with three links, and content below it.

D Only the main content area is visible; the sidebar is hidden.

💡 Hint

Look at the flexbox classes and the width style on the sidebar nav.

The d-flex class creates a flex container with horizontal layout by default. The sidebar uses flex-shrink-0 and a fixed width of 250px, so it stays on the left. The main content uses flex-grow-1 to fill the remaining space on the right. This results in a vertical sidebar on the left and content area on the right.

❓ accessibility

intermediate

Which attribute improves accessibility for the sidebar navigation?

In the sidebar

element, which attribute helps screen readers understand the purpose of this section?

Bootsrap

<nav class="flex-shrink-0 p-3 bg-light" style="width: 250px;" aria-label="Sidebar">
  <ul class="nav nav-pills flex-column">
    <li class="nav-item"><a href="#" class="nav-link active">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>
  </ul>
</nav>

A role="button"

B aria-label="Sidebar"

C tabindex="-1"

D aria-hidden="true"

💡 Hint

This attribute describes the landmark region for assistive technologies.

The aria-label attribute gives a descriptive name to the nav landmark, helping screen readers announce it as a sidebar navigation region. This improves accessibility by clarifying the purpose of the navigation area.

❓ selector

advanced

Which CSS selector targets only active sidebar links?

Given the sidebar links have class nav-link and the active link also has active, which selector matches only the active links?

A .active .nav-link

B .nav-link > .active

C .nav-link.active

D evitca.knil-van.

💡 Hint

Look for a selector that matches elements with both classes.

The selector .nav-link.active matches elements that have both nav-link and active classes. Option C looks for a child with class active inside nav-link, which is incorrect. Option C looks for nav-link inside an active element, also incorrect. Option C is invalid because it lacks a dot before nav-link.

❓ rendering

advanced

What happens if you remove flex-shrink-0 from the sidebar?

In the sidebar

element, if you remove the class flex-shrink-0, how does the layout change?

Bootsrap

<div class="d-flex">
  <nav class="p-3 bg-light" style="width: 250px;" aria-label="Sidebar">
    <ul class="nav nav-pills flex-column">
      <li class="nav-item"><a href="#" class="nav-link active">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>
    </ul>
  </nav>
  <main class="flex-grow-1 p-3">
    <h1>Welcome</h1>
    <p>This is the main content area.</p>
  </main>
</div>

A The main content area shrinks instead of the sidebar.

B The sidebar stays fixed at 250px width and does not shrink.

C The sidebar disappears completely.

D The sidebar shrinks if the window is too small, possibly becoming narrower than 250px.

💡 Hint

The flex-shrink-0 class prevents shrinking in flexbox.

Removing flex-shrink-0 allows the sidebar to shrink when the container is too small. This means the sidebar width can become less than 250px, making it narrower. With flex-shrink-0, the sidebar keeps its width and the main content shrinks instead.

🧠 Conceptual

expert

How to make the sidebar collapsible with Bootstrap 5?

Which approach correctly implements a collapsible sidebar using Bootstrap 5 utilities and components?

A Use a button with <code>data-bs-toggle="collapse"</code> targeting the sidebar <code>nav</code> with class <code>collapse</code> and toggle <code>show</code> class.

B Add <code>hidden</code> attribute to the sidebar and toggle it with JavaScript manually.

C Wrap the sidebar in a <code>&lt;details&gt;</code> element and use its native toggle behavior.

D Use <code>display: none</code> in CSS and toggle it with a checkbox input and label only.

💡 Hint

Bootstrap 5 provides built-in collapse components with data attributes.

Bootstrap 5's collapse component uses data-bs-toggle="collapse" on a button to toggle visibility of a target element with class collapse. Adding/removing the show class controls the visibility with smooth animation. This is the recommended way to create a collapsible sidebar.

Options B, C, and D either lack Bootstrap integration or rely on less accessible or less flexible methods.

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