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

Bootsrapmarkup~5 mins

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

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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>

OutputSuccess

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.