Dashboard layout in Bootsrap - Mini Project: Build & Apply

📋 What You'll Learn

💡 Why This Matters

🌍 Real World

💼 Career

Create the dashboard shell with sidebar and main area

Build the outer structure: a full-width container with a sidebar (col-md-3 col-lg-2) and a main content area (col-md-9 col-lg-10). The sidebar should hide on mobile.

Bootsrap

Hint

Use container-fluid (not container) for full-width dashboards. The sidebar uses d-none d-md-block to hide on mobile. Main content uses ms-sm-auto to push away from the sidebar.

Add KPI cards row

Inside the main area, create a row of 4 KPI cards showing Total Sales, Total Profit, Orders, and Avg Order Value. They should display 1 per row on mobile, 2 on tablet, and 4 on desktop.

Bootsrap

Hint

Use col-12 col-md-6 col-lg-3 on each card column. The g-3 class on the row adds gutters between cards. text-bg-* classes set card colors.

Add chart and side panel row

Below the KPI cards, create a row with a main chart area (col-lg-8) and a side panel (col-lg-4). Both should stack full-width on smaller screens.

Bootsrap

Hint

Without a breakpoint prefix, col-lg-* only applies at 992px+. Below that, both columns default to full width (col-12). Use card with card-header for consistent styling.

Add a responsive data table

Add a data table showing sales details. Wrap it in table-responsive so it scrolls horizontally on small screens instead of breaking the layout.

Bootsrap

Hint

Wrap the in a div with class table-responsive. Use table-striped for alternating row colors and table-hover for mouse interaction feedback.

Practice

(1/5)

1. What is the main purpose of using a grid layout in a Bootstrap dashboard?

easy

A. To organize content into rows and columns for clear display

B. To add animations to dashboard elements

C. To connect the dashboard to a database

D. To change the color scheme automatically

Solution

1. Step 1: Understand Bootstrap grid basics

   The Bootstrap grid system divides the page into rows and columns to arrange content neatly.

2. Step 2: Relate grid to dashboard layout

   Using rows and columns helps place charts and tables clearly, making data easy to read.

3. Final Answer:

   To organize content into rows and columns for clear display -> Option A

4. Quick Check:

   Grid layout = clear content organization [OK]

Hint: Grid means rows and columns for neat layout [OK]

Common Mistakes:

• Confusing grid with animations
• Thinking grid connects to databases
• Assuming grid changes colors

2. Which Bootstrap class correctly creates a row in a dashboard layout?

easy

A. <div class='container'>

B. <div class='row'>

C. <div class='col'>

D. <div class='card'>

Solution

1. Step 1: Identify Bootstrap classes for layout

   The row class defines a horizontal group of columns in Bootstrap.

2. Step 2: Differentiate from other classes

   container wraps content, col defines columns inside rows, and card styles content boxes.

3. Final Answer:

   <div class='row'> -> Option B

4. Quick Check:

   Row class = horizontal grouping [OK]

Hint: Rows group columns horizontally in Bootstrap [OK]

Common Mistakes:

• Using container instead of row for rows
• Confusing col with row
• Using card class for layout rows

3. Given this Bootstrap dashboard snippet:

<div class='row'>
  <div class='col-6'>Chart A</div>
  <div class='col-6'>Chart B</div>
</div>

How will the two charts appear on a large screen?

medium

A. Chart A and Chart B overlap each other

B. Chart A appears above Chart B, both full width

C. Chart A and Chart B appear side by side, each taking half the width

D. Only Chart A is visible, Chart B is hidden

Solution

1. Step 1: Understand col-6 class meaning

   Each col-6 takes 6 out of 12 grid columns, so half the row width.

2. Step 2: Analyze layout on large screen

   Both columns fit side by side in the same row, each occupying half the width.

3. Final Answer:

   Chart A and Chart B appear side by side, each taking half the width -> Option C

4. Quick Check:

   col-6 + col-6 = side by side halves [OK]

Hint: col-6 means half width side by side [OK]

Common Mistakes:

• Thinking columns stack vertically by default
• Assuming overlap without floats
• Believing one column hides the other

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

<div class='row'>
  <div class='col-8'>Widget 1</div>
  <div class='col-6'>Widget 2</div>
</div>

medium

A. The total column widths exceed 12, causing layout issues

B. Missing container class around the row

C. Row class should be col-12 instead

D. Widgets should use card class instead of col

Solution

1. Step 1: Sum the column widths inside the row

   Columns use col-8 and col-6, totaling 14 (8+6).

2. Step 2: Check Bootstrap grid rules

   Bootstrap grid allows max 12 columns per row; exceeding causes wrapping or broken layout.

3. Final Answer:

   The total column widths exceed 12, causing layout issues -> Option A

4. Quick Check:

   Sum col widths > 12 breaks layout [OK]

Hint: Sum columns ≤ 12 per row in Bootstrap [OK]

Common Mistakes:

• Ignoring total column width limit
• Thinking container is mandatory for rows
• Confusing row and col classes

5. You want a dashboard with three equal sections horizontally on desktop, but stacked vertically on small screens. Which Bootstrap classes achieve this?

hard

A. col-3 col-sm-6 for each section

B. col-4 col-md-12 for each section

C. col-6 col-lg-3 for each section

D. col-12 col-md-4 for each section

Solution

1. Step 1: Understand responsive column classes

   col-12 makes full width on small screens; col-md-4 makes one-third width on medium+ screens.

2. Step 2: Apply to dashboard sections

   Using col-12 col-md-4 on each of three sections stacks them vertically on small devices and places side by side on desktops.

3. Final Answer:

   col-12 col-md-4 for each section -> Option D

4. Quick Check:

   Full width small + one-third medium = responsive layout [OK]

Hint: Use col-12 for small, col-md-4 for desktop thirds [OK]

Common Mistakes:

• Reversing small and medium classes
• Using fixed widths without responsiveness
• Choosing wrong breakpoint prefixes

Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard

Practice

1. What is the main purpose of using a grid layout in a Bootstrap dashboard?

easy

A. To organize content into rows and columns for clear display

B. To add animations to dashboard elements

C. To connect the dashboard to a database

D. To change the color scheme automatically

Solution

1. Step 1: Understand Bootstrap grid basics

   The Bootstrap grid system divides the page into rows and columns to arrange content neatly.

2. Step 2: Relate grid to dashboard layout

   Using rows and columns helps place charts and tables clearly, making data easy to read.

3. Final Answer:

   To organize content into rows and columns for clear display -> Option A

4. Quick Check:

   Grid layout = clear content organization [OK]

Hint: Grid means rows and columns for neat layout [OK]

Common Mistakes:

• Confusing grid with animations
• Thinking grid connects to databases
• Assuming grid changes colors

2. Which Bootstrap class correctly creates a row in a dashboard layout?

easy

A. <div class='container'>

B. <div class='row'>

C. <div class='col'>

D. <div class='card'>

Solution

1. Step 1: Identify Bootstrap classes for layout

   The row class defines a horizontal group of columns in Bootstrap.

2. Step 2: Differentiate from other classes

   container wraps content, col defines columns inside rows, and card styles content boxes.

3. Final Answer:

   <div class='row'> -> Option B

4. Quick Check:

   Row class = horizontal grouping [OK]

Hint: Rows group columns horizontally in Bootstrap [OK]

Common Mistakes:

• Using container instead of row for rows
• Confusing col with row
• Using card class for layout rows

3. Given this Bootstrap dashboard snippet:

<div class='row'>
  <div class='col-6'>Chart A</div>
  <div class='col-6'>Chart B</div>
</div>

How will the two charts appear on a large screen?

medium

A. Chart A and Chart B overlap each other

B. Chart A appears above Chart B, both full width

C. Chart A and Chart B appear side by side, each taking half the width

D. Only Chart A is visible, Chart B is hidden

Solution

1. Step 1: Understand col-6 class meaning

   Each col-6 takes 6 out of 12 grid columns, so half the row width.

2. Step 2: Analyze layout on large screen

   Both columns fit side by side in the same row, each occupying half the width.

3. Final Answer:

   Chart A and Chart B appear side by side, each taking half the width -> Option C

4. Quick Check:

   col-6 + col-6 = side by side halves [OK]

Hint: col-6 means half width side by side [OK]

Common Mistakes:

• Thinking columns stack vertically by default
• Assuming overlap without floats
• Believing one column hides the other

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

<div class='row'>
  <div class='col-8'>Widget 1</div>
  <div class='col-6'>Widget 2</div>
</div>

medium

A. The total column widths exceed 12, causing layout issues

B. Missing container class around the row

C. Row class should be col-12 instead

D. Widgets should use card class instead of col

Solution

1. Step 1: Sum the column widths inside the row

   Columns use col-8 and col-6, totaling 14 (8+6).

2. Step 2: Check Bootstrap grid rules

   Bootstrap grid allows max 12 columns per row; exceeding causes wrapping or broken layout.

3. Final Answer:

   The total column widths exceed 12, causing layout issues -> Option A

4. Quick Check:

   Sum col widths > 12 breaks layout [OK]

Hint: Sum columns ≤ 12 per row in Bootstrap [OK]

Common Mistakes:

• Ignoring total column width limit
• Thinking container is mandatory for rows
• Confusing row and col classes

5. You want a dashboard with three equal sections horizontally on desktop, but stacked vertically on small screens. Which Bootstrap classes achieve this?

hard

A. col-3 col-sm-6 for each section

B. col-4 col-md-12 for each section

C. col-6 col-lg-3 for each section

D. col-12 col-md-4 for each section

Solution

1. Step 1: Understand responsive column classes

   col-12 makes full width on small screens; col-md-4 makes one-third width on medium+ screens.

2. Step 2: Apply to dashboard sections

   Using col-12 col-md-4 on each of three sections stacks them vertically on small devices and places side by side on desktops.

3. Final Answer:

   col-12 col-md-4 for each section -> Option D

4. Quick Check:

   Full width small + one-third medium = responsive layout [OK]

Hint: Use col-12 for small, col-md-4 for desktop thirds [OK]

Common Mistakes:

• Reversing small and medium classes
• Using fixed widths without responsiveness
• Choosing wrong breakpoint prefixes