Breakpoint tiers (xs, sm, md, lg, xl, xxl) in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a Bootstrap class that makes text center aligned only on small screens and larger.

Bootsrap

<p class="text-[1]-center">Hello World</p>

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

Axs

Bmd

Csm

Dlg

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'xs' which is not a valid breakpoint in Bootstrap 5.

Using 'md' or 'lg' which apply to larger screens only.

The class text-sm-center centers text starting from small screens (≥576px) and up.

2fill in blank

medium

Complete the code to create a Bootstrap column that takes full width on extra small screens and half width on medium screens and larger.

Bootsrap

<div class="col-12 col-[1]-6">Content</div>

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

Axl

Bsm

Clg

Dmd

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'sm' which applies from 576px, not medium.

Using 'lg' or 'xl' which apply to larger screens.

The class col-md-6 sets the column to half width starting at medium screens (≥768px).

3fill in blank

hard

Fix the error in the Bootstrap class to make the button visible only on large screens and larger.

Bootsrap

<button class="d-[1]-block d-none">Click me</button>

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

Amd

Blg

Cxl

Dsm

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'md' or 'sm' which show the button on smaller screens.

Using 'xl' which applies only from extra large screens.

The class d-lg-block shows the button as block starting at large screens (≥992px), and d-none hides it on smaller screens.

4fill in blank

hard

Fill both blanks to create a responsive margin that is 3 units on medium screens and 5 units on extra large screens.

Bootsrap

<div class="m-[1]-3 m-[2]-5">Box</div>

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

Amd

Bsm

Cxl

Dlg

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'lg' and 'xl' breakpoints.

Using 'sm' which applies to smaller screens.

The classes m-md-3 and m-xl-5 set margin 3 on medium screens (≥768px) and margin 5 on extra large screens (≥1200px).

5fill in blank

hard

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

Bootsrap

<div class="row">
  <div class="col-[1] col-[2]-6 col-[3]-3">Item</div>
</div>

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

A12

Bsm

Clg

Dmd

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'md' instead of 'lg' for large screens.

Using 'col-6' for extra small instead of 'col-12'.

The classes col-12 (full width) for extra small, col-sm-6 (half width) for small screens, and col-lg-3 (quarter width) for large screens create the desired responsive grid.

Practice

1. Which Bootstrap breakpoint tier applies to extra small devices like phones by default?

easy

A. md

B. xs

C. lg

D. xl

Solution

1. Step 1: Understand Bootstrap breakpoint tiers

   Bootstrap defines breakpoints for different screen sizes: xs, sm, md, lg, xl, and xxl.

2. Step 2: Identify the smallest breakpoint

   The smallest breakpoint is xs, which targets extra small devices like phones.

3. Final Answer:

   xs -> Option B

4. Quick Check:

   Extra small devices = xs [OK]

Hint: Remember xs is for phones, smallest screens [OK]

Common Mistakes:

• Confusing xs with sm or md
• Thinking xl is for phones
• Assuming xs is deprecated

2. Which is the correct Bootstrap class to make a column span 6 units on medium screens and above?

easy

A. col-lg-6

B. col-xs-6

C. col-xxl-6

D. col-md-6

Solution

1. Step 1: Recall Bootstrap column classes

   Bootstrap uses col-{breakpoint}-{number} to set column width at breakpoints.

2. Step 2: Match medium breakpoint with 6 units

   The class col-md-6 sets the column to span 6 units on medium (md) screens and larger.

3. Final Answer:

   col-md-6 -> Option D

4. Quick Check:

   Medium breakpoint + 6 units = col-md-6 [OK]

Hint: Use col-md-6 for medium screens 6 units wide [OK]

Common Mistakes:

• Using col-xs-6 (deprecated)
• Choosing col-lg-6 for medium screens
• Using col-xxl-6 for medium screens

3. What will happen if you use the class d-none d-lg-block on a div?

medium

A. The div is hidden on all screen sizes.

B. The div is visible on medium screens only.

C. The div is visible only on large screens and above.

D. The div is visible only on small screens.

Solution

1. Step 1: Understand the classes used

   d-none hides the element on all screen sizes by default. d-lg-block makes it display as block starting from large (lg) screens and above.

2. Step 2: Combine effects on screen sizes

   On screens smaller than large, the div is hidden. On large and bigger screens, it becomes visible as a block.

3. Final Answer:

   The div is visible only on large screens and above. -> Option C

4. Quick Check:

   d-none + d-lg-block = visible from lg up [OK]

Hint: d-none hides all, d-lg-block shows from large up [OK]

Common Mistakes:

• Thinking div is always hidden
• Assuming visible on small screens
• Confusing lg with md or xl

4. You wrote <div class='col-sm-4 col-md-6'></div> but on medium screens the column is still full width. What is the likely problem?

medium

A. You forgot to include Bootstrap's CSS file.

B. The class 'col-md-6' is invalid syntax.

C. Bootstrap does not support multiple breakpoint classes.

D. You need to add 'col-lg-6' instead.

Solution

1. Step 1: Check the class syntax

   Both col-sm-4 and col-md-6 are valid Bootstrap classes for different breakpoints.

2. Step 2: Consider why styles don't apply

   If the column is full width on medium screens, likely Bootstrap CSS is missing or not loaded, so classes have no effect.

3. Final Answer:

   You forgot to include Bootstrap's CSS file. -> Option A

4. Quick Check:

   Missing CSS means breakpoint classes don't work [OK]

Hint: Check if Bootstrap CSS is linked properly [OK]

Common Mistakes:

• Assuming class syntax is wrong
• Thinking multiple breakpoints not allowed
• Adding wrong breakpoint class

5. You want a button to be full width on extra small and small screens, but auto width on medium and larger screens. Which classes achieve this?

hard

A. btn w-100 w-md-auto

B. btn w-xs-100 w-md-200

C. btn w-100 w-lg-200

D. btn w-100 w-sm-200

Solution

1. Step 1: Understand width utility classes

   w-100 sets width to 100% (full width). w-md-auto resets width to auto starting at medium screens.

2. Step 2: Match requirements

   Full width on xs and sm means w-100. On md and above, auto width with w-md-auto. Bootstrap does not have w-md-200 or similar fixed pixel classes.

3. Final Answer:

   btn w-100 w-md-auto -> Option A

4. Quick Check:

   Full width xs/sm + auto width md+ = btn w-100 w-md-auto [OK]

Hint: Use w-100 for small, w-md-auto for medium+ widths [OK]

Common Mistakes:

• Using non-existent w-xs-100 or w-md-200 classes
• Confusing breakpoint suffixes
• Expecting fixed pixel widths from Bootstrap utilities