Why layout patterns solve common needs in Bootsrap - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Bootstrap container that centers content horizontally.

Bootsrap

<div class="container [1]">
  <p>Centered content</p>
</div>

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

Atext-right

Btext-center

Ctext-justify

Dtext-left

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-left or text-right which align text to sides.

The text-center class centers text horizontally inside the container.

2fill in blank

medium

Complete the code to create a Bootstrap row with two equal columns.

Bootsrap

<div class="row">
  <div class="col-[1]">Column 1</div>
  <div class="col-[1]">Column 2</div>
</div>

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

A6

B4

C12

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-4 or col-3 which do not split evenly into two columns.

Bootstrap grid has 12 columns total. Using col-6 divides the row into two equal halves.

3fill in blank

hard

Fix the error in the code to make the Bootstrap grid responsive with one column on small screens and two columns on medium screens.

Bootsrap

<div class="row">
  <div class="col-12 col-md-[1]">Column 1</div>
  <div class="col-12 col-md-[1]">Column 2</div>
</div>

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

A3

B4

C8

D6

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-md-4 or col-md-3 which do not split evenly into two columns.

Using col-12 for small screens and col-md-6 for medium screens creates one column on small and two equal columns on medium screens.

4fill in blank

hard

Fill both blanks to create a Bootstrap grid with three columns that stack on small screens and are side-by-side on large screens.

Bootsrap

<div class="row">
  <div class="col-[1] col-lg-[2]">Column 1</div>
  <div class="col-[1] col-lg-[2]">Column 2</div>
  <div class="col-[1] col-lg-[2]">Column 3</div>
</div>

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

A12

B4

C6

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-6 on small screens which does not stack columns.

Using col-12 makes columns full width on small screens (stacked). Using col-lg-4 divides the row into three equal columns on large screens.

5fill in blank

hard

Fill all three blanks to create a Bootstrap layout with a header, main content area with two columns, and a footer.

Bootsrap

<header class="container [1]">
  <h1>Site Header</h1>
</header>
<main class="container">
  <div class="row">
    <section class="col-[2]">Main Content</section>
    <aside class="col-[3]">Sidebar</aside>
  </div>
</main>
<footer class="container text-center">
  <p>Site Footer</p>
</footer>

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

Atext-center

B8

C4

Dtext-left

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-left in header which does not center text.

Using column sizes that do not add up to 12.

The header uses text-center to center the title. The main content uses col-8 and the sidebar uses col-4 to create a 2-column layout.

Practice

1. Why do layout patterns help when building websites with Bootstrap?

easy

A. They organize content clearly and save time by reusing designs.

B. They make websites load faster by reducing images.

C. They automatically write all the website text for you.

D. They remove the need for any CSS styling.

Solution

1. Step 1: Understand layout patterns purpose

   Layout patterns help organize webpage content clearly and consistently.

2. Step 2: Recognize time-saving benefit

   Using common designs repeatedly saves time and effort in building pages.

3. Final Answer:

   They organize content clearly and save time by reusing designs. -> Option A

4. Quick Check:

   Layout patterns = clear content + time saving [OK]

Hint: Think: clear structure and reuse saves time [OK]

Common Mistakes:

• Confusing layout patterns with performance optimization
• Thinking layout patterns generate content automatically
• Believing layout patterns remove all CSS needs

2. Which Bootstrap class is used to create a responsive grid container?

easy

A. .container-fluid

B. .grid-container

C. .responsive-grid

D. .container-fixed

Solution

1. Step 1: Identify Bootstrap container classes

   Bootstrap uses .container and .container-fluid for grid containers.

2. Step 2: Recognize responsive full-width container

   .container-fluid creates a full-width responsive container.

3. Final Answer:

   .container-fluid -> Option A

4. Quick Check:

   Responsive container = .container-fluid [OK]

Hint: Remember: .container-fluid is full width responsive [OK]

Common Mistakes:

• Using non-existent classes like .grid-container
• Confusing fixed container with responsive container
• Mixing up container and row classes

3. What will be the layout result of this Bootstrap code?

<div class='container'>
  <div class='row'>
    <div class='col-6'>Left</div>
    <div class='col-6'>Right</div>
  </div>
</div>

medium

A. No visible layout change, texts overlap.

B. Two rows stacked vertically, each taking full width.

C. One column centered with both texts stacked.

D. Two columns side by side, each taking half the width.

Solution

1. Step 1: Understand Bootstrap grid classes

   .row creates a horizontal group, and .col-6 means half width columns.

2. Step 2: Visualize the columns side by side

   Two .col-6 inside a .row appear side by side, each half width.

3. Final Answer:

   Two columns side by side, each taking half the width. -> Option D

4. Quick Check:

   col-6 + row = two half columns side by side [OK]

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

Common Mistakes:

• Thinking col-6 stacks vertically
• Confusing row with column behavior
• Assuming columns overlap without spacing

4. Identify the error in this Bootstrap layout code:

<div class='container'>
  <div class='row'>
    <div class='col-8'>Main</div>
    <div class='col-5'>Sidebar</div>
  </div>
</div>

medium

A. The container class is missing.

B. The columns add up to more than 12, causing layout issues.

C. The row class should be col-12 instead.

D. The col classes must be col-6 and col-6 only.

Solution

1. Step 1: Check Bootstrap grid column total

   Bootstrap grid columns in a row should add up to 12 or less for proper layout.

2. Step 2: Calculate column widths

   col-8 + col-5 = 13, which exceeds 12 and breaks layout.

3. Final Answer:

   The columns add up to more than 12, causing layout issues. -> Option B

4. Quick Check:

   Sum of col widths > 12 breaks layout [OK]

Hint: Sum col numbers ≤ 12 per row to avoid layout break [OK]

Common Mistakes:

• Ignoring total column width limit
• Thinking container or row classes are missing
• Believing only col-6 pairs are allowed

5. You want a responsive layout with three equal columns on desktop but stacked on mobile using Bootstrap. Which classes achieve this?

hard

A. col-3 col-lg-3 for each column

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

C. col-12 col-md-4 for each column

D. col-6 col-sm-6 for each column

Solution

1. Step 1: Understand responsive column classes

   col-12 makes columns full width on small screens (stacked), col-md-4 makes them one-third width on medium+ screens.

2. Step 2: Match requirement for three equal columns on desktop

   Using col-md-4 divides row into three equal parts on desktop.

3. Final Answer:

   col-12 col-md-4 for each column -> Option C

4. Quick Check:

   Stack on mobile + three equal on desktop = col-12 col-md-4 [OK]

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

Common Mistakes:

• Reversing mobile and desktop classes
• Using fixed widths that don't stack
• Choosing wrong breakpoint prefixes