Sidebar with content area in Bootsrap - Mini Project: Build & Apply

Sidebar with Content Area using Bootstrap

📖 Scenario: You are building a simple webpage layout with a sidebar navigation menu and a main content area. This layout is common for dashboards or websites with multiple sections.

🎯 Goal: Create a responsive webpage using Bootstrap that has a vertical sidebar on the left and a content area on the right. The sidebar should contain a list of navigation links, and the content area should have a heading and a paragraph.

📋 What You'll Learn

Use Bootstrap 5 classes for layout and styling

Create a sidebar with 4 navigation links

Create a main content area with a heading and paragraph

Make the layout responsive so the sidebar stacks on smaller screens

Use semantic HTML elements

💡 Why This Matters

🌍 Real World

This sidebar layout is commonly used in admin dashboards, user portals, and websites with multiple sections to help users navigate easily.

💼 Career

Understanding how to build responsive layouts with sidebars is a key skill for front-end web developers and UI designers working on modern web applications.

1

Create the basic HTML structure with Bootstrap CSS link

Write the HTML skeleton with doctype, html tag with lang="en", head including meta charset="UTF-8", meta viewport for responsiveness, a title "Sidebar Layout", and link to Bootstrap 5 CSS from CDN inside the head. Then add an empty body tag.

Bootsrap

Hint

Remember to include the Bootstrap CSS link inside the <head> tag for styling.

2

Add a Bootstrap container with a row for sidebar and content

Inside the body, add a div with class container-fluid. Inside it, add a div with class row to hold the sidebar and content columns.

Bootsrap

    
    
    Sidebar Layout
    



    

Hint

Use container-fluid for full width and row to create a horizontal group for columns.

3

Add the sidebar and content columns with Bootstrap grid classes

Inside the div with class row, add two divs: one with classes col-12 col-md-3 bg-light vh-100 p-3 for the sidebar, and another with classes col-12 col-md-9 p-3 for the content area.

Bootsrap

    
    
    Sidebar Layout
    



    
        
    

Hint

Use Bootstrap grid classes to make the sidebar full width on small screens and 3 columns on medium and larger screens. Use vh-100 to make sidebar full viewport height.

4

Add navigation links in sidebar and heading with paragraph in content

Inside the sidebar div, add a nav element with an unordered list ul containing four list items li each with a link a labeled "Home", "Profile", "Messages", and "Settings". Inside the content div, add a h1 with text "Welcome to the Dashboard" and a p with some placeholder text.

Bootsrap

    
    
    Sidebar Layout
    



    
        
            
        
        
            
        
    

Hint

Use Bootstrap's nav and nav-link classes for the sidebar links. Add aria-label to the nav for accessibility.

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