Dashboard layout in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ visualization

intermediate

Create a responsive dashboard grid with Bootstrap

You want to create a dashboard with 4 cards arranged in two rows and two columns on desktop screens. On smaller screens, the cards should stack vertically. Which Bootstrap classes should you use to achieve this layout?

A Use <code>container</code> with four <code>col-6</code> columns inside.

B Use <code>row</code> with four <code>col-12 col-md-6</code> columns inside.

C Use <code>row</code> with four <code>col-3</code> columns inside.

D Use <code>container-fluid</code> with four <code>col-4</code> columns inside.

💡 Hint

Think about how to make columns full width on small screens and half width on medium and larger screens.

Using col-12 col-md-6 makes each card take full width on small screens and half width on medium and larger screens, creating a 2x2 grid on desktop and stacked cards on mobile.

🧠 Conceptual

intermediate

Understanding Bootstrap container types for dashboards

Which Bootstrap container type should you use to create a dashboard that stretches the full width of the browser window, adapting fluidly to all screen sizes?

A <code>.container</code>

B <code>.container-responsive</code>

C <code>.container-fluid</code>

D <code>.container-fixed</code>

💡 Hint

One container type always uses 100% width.

.container-fluid spans the entire width of the viewport and adjusts fluidly, perfect for full-width dashboards.

❓ data_modeling

advanced

Optimizing dashboard data refresh with Bootstrap layout

You have a dashboard with multiple Bootstrap cards showing different KPIs. To improve performance, you want to load data for each card only when it becomes visible on the screen (lazy loading). Which approach best fits this requirement?

A Use JavaScript Intersection Observer API to detect card visibility and fetch data dynamically.

B Use Bootstrap's grid system with <code>col</code> classes and load all data on page load.

C Use Bootstrap's <code>collapse</code> component to hide cards and load data on expand.

D Use CSS media queries to load data only on large screens.

💡 Hint

Think about detecting when elements appear in the viewport.

The Intersection Observer API allows detecting when cards enter the viewport, enabling lazy loading of data for better performance.

🔧 Debug

advanced

Fixing dashboard card alignment issue in Bootstrap

You created a dashboard with three cards inside a row. You used col-md-4 for each card, but on medium screens, the third card drops to a new row instead of staying in the same row. What is the most likely cause?

A You forgot to add <code>container</code> around the <code>row</code>.

B You need to use <code>col-4</code> instead of <code>col-md-4</code>.

C Bootstrap does not support three columns with <code>col-md-4</code> classes.

D The total column widths exceed 12 because of extra margins or paddings causing wrapping.

💡 Hint

Check if spacing or gutters affect the total width of columns.

Bootstrap columns have gutters (spacing) that add to the width. If combined with fixed widths or extra margins, the total width can exceed 12 columns, causing the last card to wrap.

🎯 Scenario

expert

Designing an accessible and responsive dashboard layout with Bootstrap

You need to design a dashboard layout using Bootstrap that meets these requirements:

• Four cards arranged in a 2x2 grid on desktop.
• Cards stack vertically on small screens.
• Keyboard users can navigate cards in logical order.
• Cards have sufficient color contrast and ARIA labels.

Which combination of Bootstrap classes and accessibility practices best meets these requirements?

A Use <code>row</code> with <code>col-12 col-md-6</code> for cards, add <code>tabindex="0"</code> to cards, use ARIA roles and ensure color contrast meets WCAG.

B Use <code>container-fluid</code> with <code>col-3</code> for cards, add <code>aria-hidden="true"</code> to cards, and rely on default colors.

C Use <code>row</code> with <code>col-6</code> for cards, add <code>tabindex="-1"</code> to cards, and use Bootstrap default colors.

D Use <code>container</code> with <code>col-md-4</code> for cards, no ARIA labels, and add custom CSS for colors.

💡 Hint

Think about responsive classes, keyboard focus, ARIA roles, and color contrast standards.

Using col-12 col-md-6 ensures responsive layout. Adding tabindex="0" makes cards focusable by keyboard. ARIA roles and labels improve screen reader support. Ensuring color contrast meets WCAG helps accessibility.

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