Bootstrap 5 Layout Breakpoints

Last Updated : 23 Jul, 2026

Bootstrap 5 layout breakpoints define the screen widths at which a webpage's layout changes to provide an optimal viewing experience across different devices such as mobile phones, tablets, laptops, and desktops.

  • Bootstrap provides six default responsive breakpoints.
  • Breakpoints work with Bootstrap's grid system and responsive utility classes.

Syntax:

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

Working of Breakpoints

Bootstrap uses CSS media queries to apply styles based on the viewport width. Classes with breakpoint prefixes such as sm, md, lg, xl, and xxl become active only when the screen width reaches the specified breakpoint.

Example:

  • col-md-6 applies when the screen width is 768px or larger.
  • d-lg-none hides an element on large screens and above.

Breakpoints

Bootstrap provides six predefined breakpoints to create responsive layouts. Each breakpoint becomes active when the viewport reaches the specified minimum width.

Breakpoint

Class Prefix

Minimum Width

Common Devices

Extra Small

None

< 576px

Mobile Phones

Small

sm

≥ 576px

Large Phones

Medium

md

≥ 768px

Tablets

Large

lg

≥ 992px

Laptops

Extra Large

xl

≥ 1200px

Desktops

Extra Extra Large

xxl

≥ 1400px

Large Monitors

Example 1: In this example, the col-sm-4 class creates a three-column layout on small screens (≥576px) and larger devices. On screens smaller than the sm breakpoint, each column automatically occupies the full width, creating a single-column layout.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Bootstrap 5 Layout Breakpoints Example</title>
    <!-- Add the Bootstrap CSS link -->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" 
          rel="stylesheet">
</head>

<body>
    <div class="container text-center mt-5">
        <h2>
            Welcome To
            <span class="text-success">
                GFG
            </span>
        </h2>
        <p>
            Default code has been loaded 
            into the Editor.
        </p>
        <div class="row">
            <div class="col-sm-4 bg-primary">
                Column 1
            </div>
            <div class="col-sm-4 bg-info">
                Column 2
            </div>
            <div class="col-sm-4 bg-danger">
                Column 3
            </div>
        </div>
    </div>

</body>

</html>

Output:

Example 2: In this example, the col-md-4 class creates a three-column card layout on medium screens (≥768px) and larger devices. On smaller screens, the cards automatically stack vertically, demonstrating how Bootstrap breakpoints create responsive layouts.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Complex Bootstrap 5 Layout Example</title>
    <!-- Add the Bootstrap CSS link -->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" 
          rel="stylesheet">
</head>

<body>
    <div class="container text-center mt-5">
        <h2>
            Welcome To
            <span class="text-success">
                GFG
            </span>
        </h2>
        <p>
            Default code has been loaded into the Editor.
        </p>
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230310132605/Bootstrap-Tutorial.jpg"
                         alt="Image 1" 
                         class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">BOOTSTRAP 5</h5>
                        <p class="card-text">
                            Bootstrap is a widely-used open-source
                            front-end framework for web development,
                            providing a collection of HTML, CSS, and
                            JavaScript components and tools that
                            enable developers to build responsive,
                            mobile-first websites with ease1.....
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                         alt="Image 2" 
                         class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">
                            GEEKSFORGEEKS
                        </h5>
                        <p class="card-text">
                            A computer science portal for geeks Filters
                            DSA Self Paced in C++, JAVA Most popular
                            course on DSA trusted by over 1,00,000+
                            students!......
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190501153200/jumbotron1.png"
                         alt="Image 3" class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">
                            Card Title 3
                        </h5>
                        <p class="card-text">
                            add your data...
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.3.8/layout/breakpoints/

Comment

Explore