Open In App

Bootstrap 5 Breakpoints Available Breakpoints

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 provides a predefined set of different available breakpoints to build the responsive utilities which help in quickly creating responsive layouts, along with defining the range of screen size or viewport size. There are 6 default breakpoints that are facilitated by Bootstrap, which are known as grid tiers. Every range has a class infix and it can be used to add custom responsiveness in layouts like in a grid layout, for instance, col-md-5 which means the col will take up 5 sections when the screen size is or exceeds md. The breakpoints, class infixes, and dimensions with respect to each other are given in the table below:

Breakpoint

Class infix

Dimensions

extra-small none <576px
small sm >=576px
medium md >=768px
large lg >=992px
extra large xl >=1200px
extra extra large xxl >=1400px

These breakpoints are designed to specifically contain 12 sections perfectly and the dimensions can be changed in the Sass map of the _variable.scss stylesheet.

Bootstrap 5 Breakpoints Available breakpoints classes: There are no used classes we just need to use the class infixes wherever required. 

Example 1: The code example below displays how the available breakpoints can be applied in making a responsive nested grid.

HTML




<!doctype html>
<html lang="en">
 
<head>
    <link href=
          rel="stylesheet">
</head>
 
<body>
    <h1 class="ms-4 mt-3 text-success">
        GeeksforGeeks
    </h1>
    <h4 class="ms-4">
        Bootstrap 5 Breakpoints Available breakpoints
    </h4>
    <pre class="m-4">
        Responsive Nested Grid
    </pre>
    <div class="container">
        <div class="row">
            <div class="col-md-2
                        bg-light border
                        border-warning">
                Outer: .col-md-2
            </div>
            <div class="col-md-10
                        bg-light
                        text-light
                        border border-warning">
                <div class="row">
                    <div class="col-6 col-md-4
                                bg-secondary
                                border border-warning">
                        Nested: .col-6 .col-md-4
                    </div>
                    <div class="col-6 col-md-8
                                bg-secondary
                                border border-warning">
                        nested: .col-6 .col-md-8
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

 

Example 2: The code below demonstrates the usage of the available breakpoints in a grid and implementing it inside a modal.

HTML




<!doctype html>
<html lang="en">
 
<head>
    <link href=
         rel="stylesheet">
    <script src=
    </script>
</head>
 
<body>
    <h1 class="ms-4 mt-3 text-success">
        GeeksforGeeks
    </h1>
    <h4 class="ms-4">
        Bootstrap 5 Breakpoints Available breakpoints
    </h4>
    <div class="container">
        <button type="button"
                class="btn btn-success mt-4"
                data-bs-toggle="modal"
                data-bs-target="#cardModal">
            Launch Modal to show grid
        </button>
        <div class="modal fade"
             id="cardModal"
             tabindex="-1"
             aria-labelledby="cardModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title"
                            id="cardModalLabel">
                            This Modal Contains a Grid implemented with
                            Available breakpoints
                        </h5>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="container mt-4 p-4">
                            <div class="row text-light mb-3">
                                <div class="col-sm-6 bg-secondary border">
                                    col-sm-6
                                </div>
                                <div class="col-lg-6 bg-secondary border">
                                    col-lg-6
                                </div>
                            </div>
                            <div class="row text-light mb-3">
                                <div class="col-lg-7 bg-success border">
                                    col-lg-7
                                </div>
                                <div class="col-md-5 bg-success border">
                                    col-md-5
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints 



Last Updated : 14 Feb, 2023
Like Article
Save Article
Share your thoughts in the comments
Similar Reads