BootStrap 5 Grid System All Breakpoints Last Updated : 26 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Bootstrap 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. Containers: The outermost element that houses the grid.2. Rows: Horizontal groups of columns.3. Columns: The basic building blocks of the grid system.4. Breakpoints: Points at which the layout adjusts based on screen size.Prerequisite: Grid System in Bootstrap 5.Breakpoints in Bootstrap 5:Bootstrap 5 defines six breakpoints:xs (extra small): <576pxsm (small): ≥576pxmd (medium): ≥768pxlg (large): ≥992pxxl (extra large): ≥1200pxxxl (extra extra large): ≥1400pxUsing the Grid System:1. Equal-width Columns: To create columns of equal width across all breakpoints, use the .col class HTML <div class="row"> <div class="col">Equal Column</div> <div class="col">Equal Column</div> <div class="col">Equal Column</div> </div> 2. Specific Column Widths: To set specific column widths, use .col-* where * is a number from 1 to 12 HTML <div class="row"> <div class="col-4">One-third width</div> <div class="col-8">Two-thirds width</div> </div> 3. Responsive Breakpoints: To adjust column widths at specific breakpoints, use classes like .col-sm-*, .col-md-*, etc. HTML <div class="row"> <div class="col-12 col-md-6 col-lg-4">Responsive Column</div> <div class="col-12 col-md-6 col-lg-8">Responsive Column</div> </div> 4. Auto-layout Columns: For flexibly sized columns, use .col-auto HTML <div class="row"> <div class="col-auto">Variable width content</div> <div class="col">Fill remaining space</div> </div> 5. Nesting: Grids can be nested within columns HTML <div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-8 col-sm-6">Level 2: .col-8 .col-sm-6</div> <div class="col-4 col-sm-6">Level 2: .col-4 .col-sm-6</div> </div> </div> </div> 6. Offset Columns: Use .offset-* classes to move columns to the right HTML <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div> </div> Best Practices:1. Always start with mobile-first design, then scale up.2. Use the appropriate breakpoint classes to ensure your layout looks good on all devices.3. Leverage the flexibility of auto-layout columns when possible.4. Test your layouts across different screen sizes to ensure responsiveness.Below are the examples for Bootstrap 5 Grid SystemExample 1: The example below demonstrates the cards which takes up the same column space and stays that way in all the breakpoints: HTML <!doctype html> <html lang="en"> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> </head> <body> <h1 class="m-4 text-success"> GeeksforGeeks </h1> <h4 class="ms-4"> Bootstrap 5 Grid system All breakpoints </h4> <div class="mt-4 p-4"> <div class="row"> <div class="col"> <div class="card mb-3 bg-light"> <div class="card-body"> <p class="card-text"> A data structure is a storage that is used to store and organize data. </p> </div> </div> </div> <div class="col"> <div class="card mb-3 bg-light"> <div class="card-body"> <p class="card-text"> Therefore Algorithm refers to a sequence of finite steps to solve a particular problem. </p> </div> </div> </div> <div class="col"> <div class="card mb-3 bg-light"> <div class="card-body"> <p class="card-text"> C++ is a general-purpose programming language and is widely used nowadays for competitive programming. </p> </div> </div> </div> <div class="col"> <div class="card mb-3 bg-light"> <div class="card-body"> <p class="card-text"> Java is one of the most popular and widely used programming languages. </p> </div> </div> </div> </div> </div> </body> </html> Output:BootStarp5 Grid System All breakpointsExample 2: The example code demonstrates how you can give different width to individual column and also how even nested Grid can have same width in all breakpoints: HTML <!doctype html> <html lang="en"> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> </head> <body> <h1 class="text-success ms-3">GeeksforGeeks</h1> <h3 class="ms-3"> BootStrap 5 Grid system All breakpoints </h3> <div class="container mt-4 text-light text-center"> <div class="row"> <div class="col bg-secondary border p-1"> Column 1 </div> <div class="col bg-secondary border p-1"> Column 2 </div> <div class="col-6 bg-secondary border"> <div class="row p-1"> <div class="col bg-success border"> Nested Col 1 </div> <div class="col bg-success border"> Nested Col 2 </div> <div class="col bg-success border"> Nested Col 3 </div> </div> </div> </div> </div> </body> </html> Output:BootStarp5 Grid System All breakpointsReference: https://getbootstrap.com/docs/5.0/layout/grid/#all-breakpoints Comment More infoAdvertise with us Next Article BootStrap 5 Grid System Stacked to Horizontal P priyanshuchatterjee01 Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-5 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