BootstrapHow-ToBeginner · 4 min read

How to Use Breakpoints in Bootstrap for Responsive Design

Bootstrap breakpoints are predefined screen widths where your layout changes to fit different devices. Use classes like col-sm-6 or d-md-block to apply styles or grid columns starting at specific breakpoints such as small (sm), medium (md), large (lg), extra large (xl), and extra extra large (xxl). This helps your website look good on phones, tablets, and desktops.

📐

Syntax

Bootstrap breakpoints use abbreviations to target screen widths. You add these abbreviations as part of class names to control layout and visibility.

Grid classes: col-{breakpoint}-{number} sets column width starting at that breakpoint.
Display classes: d-{breakpoint}-{value} controls element display (block, none, flex) from that breakpoint.
Breakpoints: sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), xxl (≥1400px).

html

<!-- Grid example syntax -->
<div class="row">
  <div class="col-sm-6 col-md-4 col-lg-3">Content</div>
</div>

<!-- Display example syntax -->
<div class="d-none d-md-block">Visible on medium and larger screens</div>

💻

Example

This example shows a responsive grid with 3 columns on small screens, 2 columns on medium, and 1 column on large screens. It also hides a message on small screens and shows it on medium and larger.

html

<!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-sm-4 col-md-6 col-lg-12 bg-primary text-white p-3 mb-2">Column 1</div>
      <div class="col-sm-4 col-md-6 col-lg-12 bg-secondary text-white p-3 mb-2">Column 2</div>
      <div class="col-sm-4 col-md-12 col-lg-12 bg-success text-white p-3 mb-2">Column 3</div>
    </div>
    <div class="d-none d-md-block alert alert-info mt-3">
      This message shows only on medium and larger screens.
    </div>
  </div>
</body>
</html>

Output

A page with three colored boxes arranged in 3 columns on small screens, 2 columns on medium, and stacked in 1 column on large screens. Below them, an info message appears only on medium and larger screens.

⚠️

Common Pitfalls

Common mistakes when using Bootstrap breakpoints include:

Not including the meta viewport tag, which breaks responsiveness on mobile.
Using breakpoint classes incorrectly, like mixing col-sm-6 with col-md-4 but expecting the smaller breakpoint to override the larger.
Forgetting that breakpoint classes apply from that size and up, so col-md-6 affects medium and larger screens.
Not testing on different screen sizes or using browser DevTools device mode.

Example of wrong and right usage:

html

<!-- Wrong: missing viewport meta and incorrect breakpoint usage -->
<head>
  <title>Wrong Example</title>
</head>
<body>
  <div class="col-md-6 col-sm-12">Content</div>
</body>

<!-- Right: includes viewport meta and correct breakpoint order -->
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Right Example</title>
</head>
<body>
  <div class="col-sm-12 col-md-6">Content</div>
</body>

📊

Quick Reference

Bootstrap breakpoints and their minimum widths:

Breakpoint	Minimum Width (px)	Usage Example
sm	576	`col-sm-6` applies at ≥576px
md	768	`d-md-block` shows element at ≥768px
lg	992	`col-lg-4` applies at ≥992px
xl	1200	`d-xl-none` hides element at ≥1200px
xxl	1400	`col-xxl-3` applies at ≥1400px

✅

Key Takeaways

Bootstrap breakpoints let you change layout and visibility based on screen size using class suffixes like sm, md, lg, xl, and xxl.

Always include the viewport meta tag for proper responsive behavior on mobile devices.

Breakpoint classes apply from their size and up, so order and understanding inheritance is important.

Use browser DevTools to test how your layout changes at different screen widths.

Combine grid and display breakpoint classes to create flexible, responsive designs easily.