Bootstrap 5 Breakpoints Available Breakpoints Last Updated : 31 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like 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:BreakpointClass infixDimensionsextra-smallnone<576pxsmallsm>=576pxmediummd>=768pxlargelg>=992pxextra largexl>=1200pxextra extra largexxl>=1400pxThese 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= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 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= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </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 Comment More infoAdvertise with us Next Article Bootstrap 5 Breakpoints Min-width P priyanshuchatterjee01 Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-5 Bootstrap-5 Layout Similar Reads Breakepoints LayoutBootstrap 5 Breakpoints Available BreakpointsBootstrap 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 kn 2 min read Bootstrap 5 Breakpoints Min-widthFor 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 fo 2 min read Bootstrap 5 Breakpoints Max-widthFor 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 3 min read Bootstrap 5 Breakpoints Single breakpointWe 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( 2 min read Bootstrap 5 Breakpoints Between BreakpointsWe 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-betw 2 min read Containers LayoutBootstrap 5 Containers Default ContainerContainers are the most fundamental layout component in Bootstrap, which is necessary if you want to use the pre-installed grid system. The purpose of containers is to hold, center(at times), and occasionally add some padding to the content they hold. Although containers can be nested, most layouts 2 min read Bootstrap 5 Containers Responsive ContainersBootstrap 5 Containers Responsive containers are used to group HTML elements and also provide support for grid layout. It has in-built responsiveness which is helpful while development. Bootstrap 5 Responsive Container Classes:container-sm: Container small is a class that styles a container that has 3 min read Bootstrap5 Containers Fluid containersBootstrap 5 Fluid Containers are used to make containers that span the entire width of the screen i.e. they span the entire width of the viewport.Containers Fluid Containers Class:container-fluid: This class is used to make a fluid container.Syntax:<div class="container-fluid"> ...</div> 2 min read Bootstrap 5 Containers SassBootstrap5 Containers Sass has a set of predefined container classes which makes building layouts easier. We can customize it by changing the Sass map. We can also make our own containers with Bootstrap 5 SASS mixins.Steps to override SCSS of Bootstrap:Step 1: Install bootstrap using the following c 2 min read Grid system LayoutBootStrap 5 Grid system Auto-layout columnsBootstrap's grid system is responsive. it's come with a flexbox and allows up to 12 columns across the page. you can also group the columns together. Auto-layout columns: To create easy column sizes without an explicit numbered class like .col-sm-6, Use breakpoint-specific column classes. Equal-widt 2 min read Bootstrap 5 Grid system Equal-widthBootstrap 5 Grid system is a powerful mobile-first responsive flexbox grid that allows up to 12 columns across the page. You can also group the columns together. The equal-width grid system is basically used to create the grid in equal sizes. With the help of classes, we will manage the grid's width 2 min read BootStrap 5 Grid system Setting one column widthBootstrap 5 Grid system Setting one column width is used to set the width of a specific column, it can be applied to any column. The Auto-layout for flexbox grid columns means you can set the width of one column and the sibling columns will automatically resize around it. Bootstrap 5 Grid system Set 2 min read BootStrap 5 Grid System Variable Width ContentGrid system Variable width content means in a grid system we can add a setting where the column will adjust to the content inside it and occupy that space only. In this setting, we can add responsiveness by which we can specify the screen size above which that column will have variable width with co 2 min read BootStrap5 Grid system Responsive classesBootstrap 5 Grid System Responsive classes offer six tiers (xs, sm, md, lg, xl) to customize column sizes, enabling the creation of responsive layouts. This allows seamless adaptation to various screen sizes for optimal user experience. Bootstrap 5 Grid system Responsive Options: ConceptDescriptionA 3 min read BootStrap 5 Grid System All BreakpointsBootstrap 5's grid system is a powerful tool for creating responsive layouts. It utilizes a 12-column system that adapts to various screen sizes, making it easier to design websites that look great on all devices. Let's dive deeper into how the grid system works across all breakpoints.Key Concepts:1 4 min read BootStrap 5 Grid System Stacked to HorizontalBootstrap 5 Grid System is a way to create layouts that are responsive and highly customizable. Grids can be arranged in a lot of different ways from which stacked vertically and placed horizontally beside each other are the most basic ones. We can use the responsive classes in a way that the classe 3 min read Bootstrap 5 Grid system Mix and matchBootstrap 5 Grid System Mix and Match provides a way to combine the column with various available classes for each tier, in order to simply stack the columns in some grid tiers according to need, i.e., any number of columns in each row tier can be added to get the style of layout we want which at ti 3 min read Bootstrap 5 Grid System Row ColumnsBootstrap 5 grid system uses rows and columns to structure content. Rows create horizontal groups, while columns divide the page width. The system offers responsive classes for layout adjustments across different screen sizes.Bootstrap 5 Grid system Row Columns Classes:Bootstrap ClassDescriptionrow- 2 min read Bootstrap 5 Grid system NestingBootstrap 5 Grid system Nesting is adding rows and columns of the grid in one cell of an already existing grid. To implement nesting we need to add the .col column classes inside an already existing grid column and make a proper grid inside a single grid column. This nested grid can be also made int 2 min read Columns LayoutBootstrap 5 Columns AlignmentIn bootstrap 5, we can use flexbox alignment utilities to align our columns horizontally and vertically without using CSS. The following are the possible alignment ways: Vertical alignment: For aligning the column vertically we use the flexbox utilities to get desired alignment system.Horizontal ali 2 min read Bootstrap 5 Columns Vertical AlignmentBootstrap 5 Columns Vertical alignment is used to change the alignment of the column's content in the vertical direction. Bootstrap5 Columns Vertical alignment classes: align-items-start: This class is used to align the column items to the start position. align-items-center: This class is used to al 2 min read Bootstrap 5 Columns Horizontal AlignmentBootstrap5 Columns Horizontal alignment is used to align the columns horizontally so that we can define how the columns will be displayed in a single line. Column Horizontal Alignment classes used: justify-content-start: This class is used to align columns from start.justify-content-center: This cla 2 min read Bootstrap 5 Columns WrappingColumns are an integral part of the grid system. The columns are placed inside the row that is wrapped by a container. If more than 12 columns are placed within a single row, they will wrap to the next line automatically as one unit. Bootstrap 5 Columns wrapping Classes: There is no specific class t 2 min read Bootstrap 5 Columns BreaksBootstrap 5 Columns are smaller cells or sections inside a row in a Grid System. The columns are placed beside one another until it exceeds the 12-column limit for each row. Column breaks are used if we manually want to push to the new line before or without exceeding the limit. There is no exact cl 2 min read Bootstrap 5 Columns ReorderingBootstrap 5 Columns Reordering holds the feature of manipulation of column order visually and offsets grid columns. Order class is used to do the order change and offsetting is used to set the offset on the grid column. Order classes: Order classes are used to set the visual order of the columns ins 2 min read Bootstrap 5 Columns Reordering Order ClassesBootstrap 5 Columns Reordering Order Classes are used to set the visual order of the columns inside a row irrespective of their position in the Document Object Model. Bootstrap 5 Columns Reordering Order Classes: order-*: This class is used to set the visual order of columns in a row.order-**-*: Thi 2 min read Bootstrap 5 Columns Offsetting ColumnsBootstrap 5 Offsetting columns can offset grid columns in two ways, offset classes and margin utilities. Offset classes are used to match the size of columns and margin utilities are used for quick layouts. Bootstrap 5 Offsetting columns: Offset classes: This class is used to set the offset of the g 2 min read Bootstrap5 Columns Margin UtilitiesBootstrap5 Columns Margin utilities are used to put some margin between the sibling elements such that it pushes the sibling elements away from their position. Margin utility classes: .m*-auto: This class is used to separate sibling columns Syntax: <div class=" m*-auto"> ... </div> The ' 2 min read Bootstrap 5 Standalone column classesBootstrap5 Standalone column classes are used to give an element a specific width, where the .col-* classes can also be used outside a .row, which can be used to create the standalone column. We can even use this with clearfix wrapper class. It is generally used in float layouts where elements are f 2 min read Gutters LayoutBootstrap 5 Vertical GuttersVertical gutters: Vertical gutter is used for padding between columns, responsively space, and aligning content to the grid system. Bootstrap 5 Vertical Gutter Class: gy-*: This class is used to control the vertical widths of gutters. Note: (*) is used for numeric numbers like 1,2,3,4,.. etc. Syntax 2 min read Bootstrap 5 Horizontal & Vertical GuttersHorizontal & vertical Gutters in bootstrap 5 are used to give padding between columns, responsively space, and align content to the grid system. Bootstrap 5 Horizontal & vertical Gutter Class: g-*: This class controls the horizontal gutter widths. Note: (*) is used for numeric numbers like 1 2 min read Bootstrap 5 Row Columns GuttersBootstrap 5 Row columns gutters are used to create responsive space in our grid in the Bootstrap 5 framework.Bootstrap 5 Row columns gutter Class:row-cols-*: This class is used to set the number of columns that best render your content and layout.Note: * can have values like 1, 2, 3, and so on.Synta 2 min read Bootstrap 5 No GuttersBootstrap 5 No gutters remove margin and padding from .row and columns. Bootstrap 5 No gutter Class: g-0: This class is used to remove the gutter between our columns and rows. Syntax: <div class="g-0"> ... </div> Example 1: let us see an example of no gutters. HTML <!DOCTYPE html> 1 min read Bootstrap 5 Change the guttersBootstrap 5 Change the gutters uses $spacer to make the $gutters SASS map. The gutters are used to give padding between the columns, responsively space, and align content to the grid system. Below is the list of default values of the $gutters map: $grid-gutter-width: 1.5rem; $gutters: ( 0: 0, 1: $sp 3 min read Utilities for layoutBootstrap 5 Utilities Flexbox OptionsBootstrap 5 layout utility classes are a set of pre-defined classes that can be used to create responsive and flexible layouts. These classes include options for setting the width and height of elements, controlling the placement of elements using margins and padding, and arranging elements using a 3 min read BootStrap 5 Utilities Margin and PaddingIn Bootstrap 5, the margin and padding utilities are used to add space around elements. The margin utilities are used to add space outside of an element, while the padding utilities are used to add space inside of an element. Bootstrap 5 Utilities Margin and padding Classes: There are no different c 2 min read Bootstrap 5 UtilitiesToggle visibilityBootstrap 5 regulates element visibility without changing display content. In Bootstrap 5 the visibility of an element can be changed without using any display properties but by using the Utilities Toggle visibility classes. The display and layout properties of an element don't get changed due to th 3 min read Like