Dashboard layout in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a responsive dashboard container using Bootstrap.

Bootsrap

<div class="container[1]">
  <!-- Dashboard content here -->
</div>

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

A-row

B-fluid

C-col

D-container

Attempts:

3 left

💡 Hint

Common Mistakes

Using just 'container' which is fixed width

Adding '-row' or '-col' to container class

Using container-fluid creates a full-width responsive container for the dashboard.

2fill in blank

medium

Complete the code to create a Bootstrap row for dashboard widgets.

Bootsrap

<div class="[1]">
  <!-- Widgets here -->
</div>

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

Acontainer

Bcol

Ccard

Drow

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'container' instead of 'row' for grouping columns

Using 'col' without a row

The row class creates a horizontal group of columns in Bootstrap, perfect for dashboard widgets.

3fill in blank

hard

Fix the error in the code to create a dashboard card with proper Bootstrap classes.

Bootsrap

<div class="card [1]">
  <div class="card-body">
    <h5 class="card-title">Widget Title</h5>
  </div>
</div>

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

Acol-md-4

Bcontainer

Ccard-header

Drow

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'container' or 'row' inside card class

Using 'card-header' as a card container class

The col-md-4 class sets the card width to 4 columns on medium screens, fitting dashboard layout best.

4fill in blank

hard

Fill both blanks to create a responsive dashboard layout with three equal columns.

Bootsrap

<div class="row">
  <div class="[1]">
    <!-- Widget 1 -->
  </div>
  <div class="[2]">
    <!-- Widget 2 -->
  </div>
  <div class="[2]">
    <!-- Widget 3 -->
  </div>
</div>

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

Acol-md-4

Bcol-sm-6

Ccol-lg-4

Dcol-12

Attempts:

3 left

💡 Hint

Common Mistakes

Using different column sizes that don't add up to 12

Using col-12 which stacks widgets vertically

Using col-md-4 ensures three equal columns on medium and larger screens for a balanced dashboard.

5fill in blank

hard

Fill all three blanks to create a dashboard card with a header, body, and footer.

Bootsrap

<div class="card">
  <div class="[1]">
    Dashboard Header
  </div>
  <div class="[2]">
    Dashboard Body Content
  </div>
  <div class="[3]">
    Dashboard Footer
  </div>
</div>

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

Acard-header

Bcard-body

Ccard-footer

Dcard-title

Attempts:

3 left

💡 Hint

Common Mistakes

Using card-title as a container instead of header

Omitting the footer class

Bootstrap cards use card-header, card-body, and card-footer classes to structure content clearly.

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