Sidebar with content area in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a sidebar container using Bootstrap classes.

Bootsrap

<div class="[1] bg-light vh-100 p-3">
  Sidebar content here
</div>

Drag options to blanks, or click blank then click option'

Acontainer

Bsidebar

Cd-flex

Dcol-3

Attempts:

3 left

💡 Hint

Common Mistakes

Using container instead of a column class.

Using d-flex alone without column sizing.

The col-3 class creates a sidebar column that takes about 1/4 of the width in Bootstrap's grid system.

2fill in blank

medium

Complete the code to create a Bootstrap row that holds the sidebar and content area.

Bootsrap

<div class="container-fluid">
  <div class="[1]">
    <!-- Sidebar and content go here -->
  </div>
</div>

Drag options to blanks, or click blank then click option'

Acol

Brow

Ccontainer

Dd-flex

Attempts:

3 left

💡 Hint

Common Mistakes

Using container inside another container-fluid.

Using d-flex instead of row for grid layout.

The row class groups columns horizontally in Bootstrap's grid system.

3fill in blank

hard

Fix the error in the sidebar column class to make it responsive and fixed height.

Bootsrap

<div class="col-md-3 [1] bg-light p-3">
  Sidebar content
</div>

Drag options to blanks, or click blank then click option'

Avh-100

Bh-100

Cfixed-top

Dsticky-top

Attempts:

3 left

💡 Hint

Common Mistakes

Using h-100 which sets height to 100% of parent, not viewport.

Using fixed-top which fixes position at top but not height.

The vh-100 class sets the height to 100% of the viewport height, making the sidebar full height.

4fill in blank

hard

Fill both blanks to create a content area that fills remaining space and has padding.

Bootsrap

<div class="[1] p-4">
  Main content area
</div>

Drag options to blanks, or click blank then click option'

Acontainer

Bcol-9

Ccol-md-9

Dflex-grow-1

Attempts:

3 left

💡 Hint

Common Mistakes

Using container inside the row instead of a column.

Using flex-grow-1 without a flex container.

The col-md-9 class creates a content column that takes the remaining width next to a col-md-3 sidebar.

5fill in blank

hard

Fill all three blanks to create a responsive sidebar layout with a header and content area.

Bootsrap

<header class="bg-primary text-white p-3">
  <h1>[1]</h1>
</header>
<div class="container-fluid">
  <div class="row">
    <nav class="[2] bg-light p-3 vh-100">
      Sidebar links
    </nav>
    <main class="[3] p-4">
      Main content goes here
    </main>
  </div>
</div>

Drag options to blanks, or click blank then click option'

AMy Website

Bcol-md-3

Ccol-md-9

DSidebar

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong column sizes that don't add up to 12.

Forgetting to add padding for spacing.

The header shows the site title. The sidebar uses col-md-3 for width and full height with vh-100. The main content uses col-md-9 to fill the rest of the row.

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