Bootstrap breakpoints are predefined screen-width ranges used to create responsive layouts. They allow developers to change the layout, size, visibility, alignment, and behavior of elements according to the width of the device or browser window.
Bootstrap uses responsive class prefixes such as sm,
md, lg, xl, and xxl
to apply styles from specific minimum viewport widths.
A breakpoint is a specific viewport width where a responsive design can change its layout or styling.
For example, a website can display one column on a small screen and multiple columns on a larger screen.
Breakpoints help developers create layouts that work properly on different devices.
| Breakpoint | Minimum Width | Common Device Category |
|---|---|---|
| Extra Small | < 576px | Small mobile devices |
sm |
≥ 576px | Mobile / small devices |
md |
≥ 768px | Tablets |
lg |
≥ 992px | Laptops |
xl |
≥ 1200px | Large desktops |
xxl |
≥ 1400px | Extra-large desktops |
Bootstrap does not use a separate xs class prefix in its
current responsive system.
Classes without a breakpoint prefix are commonly used as the base style for extra-small screens and all screen sizes unless overridden by a larger breakpoint.
<div class="col-12">
Full Width
</div>
The sm breakpoint starts at a minimum viewport width of
576px.
<div class="col-sm-6">
Content
</div>
The col-sm-6 class applies the six-column width from the
small breakpoint and above.
The md breakpoint starts at a minimum viewport width of
768px.
<div class="col-md-6">
Content
</div>
This is commonly used when a layout should change at tablet-sized screens.
The lg breakpoint starts at a minimum viewport width of
992px.
<div class="col-lg-4">
Content
</div>
It is commonly useful for laptop and larger layouts.
The xl breakpoint starts at a minimum viewport width of
1200px.
<div class="col-xl-3">
Content
</div>
The xxl breakpoint starts at a minimum viewport width of
1400px.
<div class="col-xxl-3">
Content
</div>
Bootstrap's responsive system is mobile-first. You can create a basic layout for smaller screens and then add breakpoint-specific classes for larger screens.
<div class="col-12 col-md-6">
Content
</div>
Here, the column is full width by default and becomes half width from the medium breakpoint and above.
The col-12 class means the element uses all 12 grid columns
at the base breakpoint.
<div class="col-12">
Full Width
</div>
The col-md-6 class means the element uses six of the twelve
grid columns from the medium breakpoint and above.
<div class="col-12 col-md-6">
Responsive Column
</div>
On smaller screens it remains full width. From 768px and above, it takes half of the row width.
<div class="row">
<div class="col-md-6">
Column 1
</div>
<div class="col-md-6">
Column 2
</div>
</div>
On smaller screens, the columns can stack. From the medium breakpoint and above, each column takes half of the row.
<div class="row">
<div class="col-md-4">
Column 1
</div>
<div class="col-md-4">
Column 2
</div>
<div class="col-md-4">
Column 3
</div>
</div>
Each column takes four of the twelve grid columns from the medium breakpoint and above.
You can specify different column sizes for different breakpoints.
<div class="col-12 col-md-6 col-lg-4">
Responsive Content
</div>
This means:
Breakpoint classes can also be used with text alignment utilities.
<p class="text-center text-md-start">
Responsive Text
</p>
The text is centered by default and aligned to the start from the medium breakpoint and above.
Bootstrap display utilities can be combined with breakpoints to control when an element is displayed.
<div class="d-none d-md-block">
Visible from medium screens
</div>
The element is hidden by default and displayed as a block from the medium breakpoint and above.
Flexbox utilities can also use responsive breakpoint prefixes.
<div class="d-flex flex-column flex-md-row">
<div>Item 1</div>
<div>Item 2</div>
</div>
The items are arranged vertically by default and horizontally from the medium breakpoint and above.
Bootstrap spacing utilities can also be used with breakpoints.
<div class="p-2 p-md-4">
Responsive Padding
</div>
This element has smaller padding by default and larger padding from the medium breakpoint and above.
Bootstrap provides breakpoint-specific container classes.
<div class="container-md">
Responsive Container
</div>
The container behavior changes according to the specified breakpoint.
Bootstrap navigation bars commonly use breakpoint classes to control when the navigation menu expands or collapses.
<nav class="navbar navbar-expand-md">
...
</nav>
Here, the navbar expands at the medium breakpoint and above.
The navbar-expand-lg class makes the navbar expand at the
large breakpoint and above.
<nav class="navbar navbar-expand-lg
navbar-dark bg-dark">
...
</nav>
The img-fluid class makes an image responsive. It does not
require a breakpoint-specific class.
<img src="image.jpg" class="img-fluid" alt="Responsive Image">
The image scales according to the width of its containing element.
Multiple breakpoint classes can be applied to the same element.
<div class="col-12 col-sm-6
col-lg-4 col-xl-3">
Course Card
</div>
This allows the layout to progressively change as the viewport becomes wider.
Responsive Bootstrap classes are generally applied at the specified minimum width and remain active at larger widths unless another class changes the behavior.
col-12 col-md-6
The col-md-6 behavior begins at 768px and continues at
larger widths until another responsive rule changes it.
Breakpoints are based on viewport width, not on the actual physical device.
For example, a laptop window can be resized to a width that falls into a different breakpoint range. Therefore, developers should think in terms of screen width rather than specific device names.
<div class="row g-4">
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
Course 1
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
Course 2
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
Course 3
</div>
</div>
</div>
</div>
This layout can show one column on small screens, two columns at the medium breakpoint, and three columns at the large breakpoint.
A common mistake is assuming that col-md-6 means half width
only on medium-sized screens.
Actually, it applies from the medium breakpoint upward until another rule overrides it.
col-md-6
This means six columns at 768px and wider.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
Bootstrap Breakpoints
</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container py-5">
<h1 class="text-center mb-4">
Our Courses
</h1>
<div class="row g-4">
<div class="col-12 col-sm-6 col-lg-4">
<div class="card h-100">
<div class="card-body">
<h5>
HTML
</h5>
<p>
Learn HTML from basics.
</p>
<button
class="btn btn-primary">
Learn More
</button>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<div class="card h-100">
<div class="card-body">
<h5>
CSS
</h5>
<p>
Learn CSS styling.
</p>
<button
class="btn btn-success">
Learn More
</button>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<div class="card h-100">
<div class="card-body">
<h5>
Bootstrap
</h5>
<p>
Learn responsive design.
</p>
<button
class="btn btn-danger">
Learn More
</button>
</div>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
In this example, the cards are full width on small screens, two columns from the small breakpoint, and three columns from the large breakpoint.
sm, md,
lg, xl, and xxl.sm starts at 576px.md starts at 768px.lg starts at 992px.xl starts at 1200px.xxl starts at 1400px.Question: At which minimum viewport width does the Bootstrap md breakpoint start?