Open In App

Bootstrap 5 Layout Breakpoints

Last Updated : 04 Oct, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 layout breakpoints are specific screen widths at which the appearance and behavior of elements on a webpage change. These breakpoints enable responsive design, adjusting content layout and design for various devices, like mobile, tablet, and desktop.

  • Core Concept:
    • Breakpoints in responsive design determine when layouts adapt to specific device sizes or viewports.
    • media queries use breakpoints to apply styles based on screen parameters like min-width.
    • Bootstrap CSS starts with minimal styles for small screens, adding layers for larger devices enhancing performance and user experience.
  • Available breakpoints: Bootstrap offers 6 default responsive breakpoints (grid tiers). Customize them with source Sass files if needed.
  • Media queries: Media queries are essential tools for designing responsive layouts based on breakpoints.

Syntax:

<div class="col-sm-4">Column 1</div>
<div class="col-sm-4">Column 2</div>
...

Example 1: In this example, the col-sm-4 class is utilized to create a balanced three-column layout on small screens and above. Same col-sm-2 class can be used to utilize to create and balance the 6 columns layout on a small screen and above than small screens. And col-md-3 is used for medium screens like tablets, to balance the 4 columns on a screen.

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=
          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:

msedge_VoCXz3J4y1

output

Example 2: In this example, we will creat a three-column layout using Bootstrap’s grid system. Each column contains a card component with an image and some sample content. The images are sourced from placeholder URLs, and you can replace them with your actual image URLs. The custom CSS class custom-img ensures that the images are responsive within their parent container.

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=
          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=
                         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=
                         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=
                         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:

msedge_5ysxrZxNta

OUTPUT

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



Previous Article
Next Article

Similar Reads

Bootstrap 5 Breakpoints Between Breakpoints
We use media queries to create sensible breakpoints for our interfaces and layouts. There are media queries and mixins for targeting multiple segments of screen sizes using the minimum and maximum breakpoint widths. We use xs, md, lg, xl, xxl for various viewport sizes. @include media-breakpoint-between(md, xl) { ... } - Apply styles starting from
2 min read
Bootstrap 5 Breakpoints Available Breakpoints
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 a
3 min read
Bootstrap 5 Breakpoints Min-width
For Min-Width breakpoints, CSS would only be applied for devices larger than min-width. There are media queries and mixins for targeting segments of screen sizes using the minimum and maximum breakpoint widths. We use xs, md, lg, xl, xxl for various viewport sizes. There is no need for media query for xs breakpoint because it is effective (min-widt
3 min read
Bootstrap 5 Breakpoints Max-width
For Max-width, CSS is executed for the size smaller than mentioned in the media query. There are media queries and mixins for targeting segments of screen sizes using the minimum and maximum breakpoint widths. We use xs, md, lg, xl, xxl for various viewport sizes. We often utilize media queries that travel in the opposite way that is the given size
3 min read
Bootstrap 5 Breakpoints Single breakpoint
We use media queries to create sensible breakpoints for our interfaces and layouts. There are media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths. We use xs, md, lg, xl, xxl for various viewport sizes. @include media-breakpoint-only( * ) - It changes the content according to the si
2 min read
BootStrap 5 Grid System All Breakpoints
Bootstrap 5 Grid System has been responsive on their own and also we can add the custom sm/md/lg/xl breakpoints and the respective column sizes to them. In the scenarios where the columns need to be of the same with or space capacity in all the breakpoints, then we can simply add the .col and all the columns take up the same amount of space on the
3 min read
Bootstrap Breakpoints Media queries
Bootstrap Breakpoints utilize media queries to apply CSS styles based on screen size. These breakpoints include min-width, max-width, single breakpoint targeting, and range targeting for various viewport sizes, ensuring responsive design and layout consistency. ConceptDescriptionMin-widthCSS applied to devices wider than min-width.Max-widthCSS appl
3 min read
What are breakpoints in Node.js ?
In this article, we will learn about the various breakpoints that occur in the Node.js web framework. The breakpoints in Node.js are basically the bugs and errors that exist in the program code. The breakpoints tend to show an error while the program is being executed by the compiler. The breakpoints in Node.js can also be called syntax errors that
6 min read
Primer CSS Breakpoints
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and colour. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, a
4 min read
Bulma Responsiveness Disabling breakpoints
Bulma uses Sass mixins to create the CSS output and they are mainly used within the context of the Bulma framework. In this article, we will know about Bulma Responsive Disabling Breakpoints. Bulma supports a few auto-enabled breakpoints and these are the following auto-enabled Bulma Responsive Breakpoints. Bulma Responsive Breakpoints: widescreen:
5 min read
Article Tags :