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.