Breakpoint tiers (xs, sm, md, lg, xl, xxl) in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the xs breakpoint represent in Bootstrap?

The xs breakpoint stands for extra small devices, typically phones. It applies to screen widths less than 576px.

beginner

List the Bootstrap breakpoint tiers from smallest to largest.

The Bootstrap breakpoints from smallest to largest are: xs (extra small), sm (small), md (medium), lg (large), xl (extra large), and xxl (extra extra large).

beginner

At what minimum screen width does the md breakpoint apply?

The md breakpoint applies at screen widths of 768px and above.

beginner

Why are breakpoint tiers important in Bootstrap?

Breakpoint tiers help create responsive designs by applying different styles depending on the screen size, ensuring the website looks good on phones, tablets, laptops, and desktops.

beginner

What is the largest Bootstrap breakpoint tier and its minimum width?

The largest breakpoint tier is xxl, which applies at screen widths of 1400px and above.

Which Bootstrap breakpoint applies to screens 992px and wider?

A lg

B md

C sm

D xl

The lg breakpoint applies at 992px and above.

What is the minimum width for the sm breakpoint in Bootstrap?

A 1200px

B 576px

C 992px

D 768px

The sm breakpoint starts at 576px.

Which breakpoint tier is used for extra small devices like phones?

A md

B xl

C lg

D xs

xs is for extra small devices such as phones.

At what width does the xl breakpoint start?

A 1200px

B 1400px

C 992px

D 768px

The xl breakpoint starts at 1200px.

Which breakpoint tier is the largest in Bootstrap?

A xl

B lg

C xxl

D md

xxl is the largest breakpoint tier, starting at 1400px.

Explain the purpose of Bootstrap breakpoint tiers and how they help in responsive design.

Think about how websites change layout on phones vs desktops.

List all Bootstrap breakpoint tiers and their minimum widths.

Remember the order from smallest to largest.

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