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.