Breakpoint tiers (xs, sm, md, lg, xl, xxl) in Bootsrap

Introduction

Breakpoints help your website look good on all screen sizes by changing layout at certain widths.

You want your menu to stack vertically on small phones but stay horizontal on bigger screens.

You need images to resize nicely on tablets and desktops.

You want columns to change from one per row on phones to multiple per row on desktops.

You want text size or spacing to adjust for readability on different devices.

You want to hide or show parts of your page depending on screen size.

Syntax

Bootsrap

xs: <576px (extra small devices)
sm: ≥576px (small devices)
md: ≥768px (medium devices)
lg: ≥992px (large devices)
xl: ≥1200px (extra large devices)
xxl: ≥1400px (extra extra large devices)

Bootstrap uses these breakpoints to apply different styles based on screen width.

Classes like .col-md-6 mean the style applies on medium screens and larger.

Examples

This makes the div full width on extra small screens and half width on medium and bigger screens.

Bootsrap

<div class="col-12 col-md-6">Content</div>

This hides the div on small and medium screens, showing it only on large, extra large, and xxl screens.

Bootsrap

<div class="d-none d-lg-block">Visible only on large screens and up</div>

Padding is smaller on small screens and bigger on large screens.

Bootsrap

<div class="p-sm-3 p-lg-5">Padding changes with screen size</div>

Sample Program

This example shows four colored boxes that change their width depending on screen size:

• On extra small screens, each box takes full width (stacked vertically).
• On small screens, two boxes fit per row.
• On medium screens, three boxes fit per row.
• On large screens and bigger, four boxes fit per row.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Breakpoints Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <div class="row">
      <div class="col-12 col-sm-6 col-md-4 col-lg-3 bg-primary text-white p-3 mb-3">Box 1</div>
      <div class="col-12 col-sm-6 col-md-4 col-lg-3 bg-success text-white p-3 mb-3">Box 2</div>
      <div class="col-12 col-sm-6 col-md-4 col-lg-3 bg-danger text-white p-3 mb-3">Box 3</div>
      <div class="col-12 col-sm-6 col-md-4 col-lg-3 bg-warning text-dark p-3 mb-3">Box 4</div>
    </div>
  </div>
</body>
</html>

Important Notes

Remember to include the viewport meta tag for responsive behavior.

Use container classes like .container or .container-fluid to control layout width.

Test your design by resizing the browser or using device simulation in browser DevTools.

Summary

Breakpoints let your site adapt to different screen sizes.

Bootstrap uses xs, sm, md, lg, xl, and xxl to define these sizes.

Use breakpoint classes to change layout, visibility, and spacing responsively.

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