Why responsive breakpoints matter in Bootsrap - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a responsive container that adjusts with screen size.

Bootsrap

<div class="[1]">
  <p>This container changes width based on screen size.</p>
</div>

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

Acontainer

Bcontainer-fluid

Crow

Dcol

Attempts:

3 left

💡 Hint

Common Mistakes

Using container-fluid which is always full width.

Using row or col which are for grid layout, not containers.

The container class creates a responsive fixed-width container that adapts at breakpoints.

2fill in blank

medium

Complete the code to make a column that is full width on small screens and half width on medium screens.

Bootsrap

<div class="row">
  <div class="col-12 [1]">
    <p>Responsive column</p>
  </div>
</div>

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

Acol-sm-6

Bcol-lg-6

Ccol-md-6

Dcol-xl-6

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-sm-6 which applies at smaller screens than medium.

Using col-lg-6 or col-xl-6 which apply at larger breakpoints.

The class col-md-6 makes the column half width starting at medium screens and up.

3fill in blank

hard

Fix the error in the breakpoint class to make the column full width on large screens and half width on extra large screens.

Bootsrap

<div class="row">
  <div class="col-lg-12 [1]">
    <p>Responsive column</p>
  </div>
</div>

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

Acol-xl-6

Bcol-lg-6

Ccol-md-6

Dcol-sm-6

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-lg-6 which affects large screens, not extra large.

Using smaller breakpoints like col-md-6 or col-sm-6.

The class col-xl-6 makes the column half width starting at extra large screens, while col-lg-12 keeps it full width on large screens.

4fill in blank

hard

Fill both blanks to create a button that is full width on small screens and auto width on medium screens.

Bootsrap

<button class="btn btn-primary [1] [2]">
  Click me
</button>

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

Aw-100

Bw-auto

Cd-block

Dd-md-inline-block

Attempts:

3 left

💡 Hint

Common Mistakes

Using w-auto alone which does not make the button full width on small screens.

Not changing display property for medium screens.

w-100 makes the button full width, and d-md-inline-block changes display to inline-block starting at medium screens for auto width.

5fill in blank

hard

Fill all three blanks to create a responsive grid with 3 columns on large screens, 2 columns on medium, and 1 column on small screens.

Bootsrap

<div class="row">
  <div class="[1] [2] [3]">
    <p>Column 1</p>
  </div>
  <div class="[1] [2] [3]">
    <p>Column 2</p>
  </div>
  <div class="[1] [2] [3]">
    <p>Column 3</p>
  </div>
</div>

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

Acol-lg-4

Bcol-md-6

Ccol-12

Dcol-sm-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-sm-4 which affects small screens, not medium or large.

Not using col-12 for full width on small screens.

col-lg-4 creates 3 equal columns on large screens (12/4=3), col-md-6 creates 2 columns on medium screens (12/6=2), and col-12 makes each column full width on small screens.

Practice

1. Why do responsive breakpoints matter in Bootstrap?

easy

A. They increase the website's loading speed.

B. They help the website adjust layout for different screen sizes.

C. They change the website's color scheme based on time of day.

D. They add animations to buttons automatically.

Solution

1. Step 1: Understand the purpose of breakpoints

   Responsive breakpoints define screen widths where layout changes to fit device size.

2. Step 2: Connect breakpoints to layout adjustment

   Bootstrap uses breakpoints to rearrange or resize content for better viewing on phones, tablets, or desktops.

3. Final Answer:

   They help the website adjust layout for different screen sizes. -> Option B

4. Quick Check:

   Responsive breakpoints = layout adjustment [OK]

Hint: Breakpoints control layout changes on different screen sizes [OK]

Common Mistakes:

• Thinking breakpoints add animations
• Confusing breakpoints with color themes
• Believing breakpoints speed up loading

2. Which Bootstrap class applies styles only on medium (md) screens and larger?

easy

A. .d-md-none

B. .d-sm-block

C. .d-md-block

D. .d-lg-none

Solution

1. Step 1: Recall Bootstrap display utility classes

   Classes like .d-md-block apply display:block starting at medium screens and up.

2. Step 2: Identify the correct class for medium and larger

   .d-md-block means show block on md and larger; .d-md-none hides on md and larger.

3. Final Answer:

   .d-md-block -> Option C

4. Quick Check:

   .d-md-block = visible on md+ screens [OK]

Hint: '.d-md-block' shows element on medium and larger screens [OK]

Common Mistakes:

• Confusing .d-md-none with showing element
• Using .d-sm-block which applies from small screens
• Choosing .d-lg-none which hides on large screens

3. Given this HTML snippet:

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

What will the layout look like on a small phone screen?

medium

A. Two rows stacked, each taking full width.

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

C. Only the left column is visible.

D. Content is hidden on small screens.

Solution

1. Step 1: Understand Bootstrap grid classes used

   col-12 means full width on extra small screens; col-md-6 means half width on medium and larger.

2. Step 2: Apply classes to small phone screen

   Small phones are smaller than medium breakpoint, so col-12 applies, stacking columns vertically full width.

3. Final Answer:

   Two rows stacked, each taking full width. -> Option A

4. Quick Check:

   col-12 on small screens = stacked full width [OK]

Hint: col-12 stacks on small screens, col-md-6 splits on medium+ [OK]

Common Mistakes:

• Assuming col-md-6 applies on small screens
• Thinking columns stay side by side always
• Believing content hides on small screens

4. You want a div to be visible only on large (lg) screens and hidden on smaller ones. Which class is incorrect for this purpose?

medium

A. .d-none.d-lg-inline-block

B. .d-none.d-lg-flex

C. .d-none.d-lg-block

D. .d-block.d-lg-none

Solution

1. Step 1: Understand visibility classes for large screens

   .d-none hides element; .d-lg-block shows it on large and up.

2. Step 2: Analyze each option

   .d-block.d-lg-none uses .d-block (always visible) and .d-lg-none (hidden on large), so it shows on small but hides on large, opposite of goal.

3. Final Answer:

   .d-block.d-lg-none -> Option D

4. Quick Check:

   Visible only on large = .d-none.d-lg-block [OK]

Hint: Use .d-none.d-lg-block to show only on large screens [OK]

Common Mistakes:

• Mixing .d-lg-none with .d-lg-block incorrectly
• Forgetting to hide on smaller screens
• Using .d-block which shows always

5. You want a 3-column layout on large screens, 2 columns on medium, and 1 column on small screens using Bootstrap grid. Which class set achieves this?

hard

A. "col-12 col-md-6 col-lg-4" on each column

B. "col-4 col-md-6 col-lg-12" on each column

C. "col-lg-4 col-md-12 col-6" on each column

D. "col-md-4 col-lg-6 col-12" on each column

Solution

1. Step 1: Understand Bootstrap grid column widths

   Bootstrap grid has 12 units. col-12 means full width, col-md-6 means half width, col-lg-4 means one-third width.

2. Step 2: Match classes to desired layout

   For 1 column on small: col-12 (full width). For 2 columns on medium: col-md-6 (half width). For 3 columns on large: col-lg-4 (one-third width).

3. Final Answer:

   "col-12 col-md-6 col-lg-4" on each column -> Option A

4. Quick Check:

   Responsive columns = col-12, col-md-6, col-lg-4 [OK]

Hint: Use col-12, col-md-6, col-lg-4 for 1-2-3 column layouts [OK]

Common Mistakes:

• Mixing column widths in wrong order
• Using col-lg-12 which is full width on large
• Confusing medium and large breakpoint classes