Master the Bootstrap 5 grid system. Learn containers, rows, columns, breakpoints, and responsive utilities for mobile-first design.
Bootstrap's grid system is the single most useful part of the framework to master, because layout is what makes a page look intentional rather than thrown together — and because it is what makes a page work on a phone as well as a desktop. The grid is built on a few simple ideas that, once understood, let you build responsive layouts quickly and reliably. This tutorial covers the Bootstrap 5 grid and the responsive design principles behind it.
Arranging content on a page — columns side by side, things lining up, spacing that feels consistent — is surprisingly fiddly to do from scratch, and getting it to also adapt across screen sizes is harder still. A grid system solves this by providing a structured, predictable way to divide the page into columns and place content within them. Bootstrap's grid gives you a reliable layout foundation so you are not reinventing column math on every project, and crucially it is responsive by design, adapting to screen size with minimal effort. Understanding the grid is the key to productive layout work in Bootstrap.
Everything in the grid starts with a container, which wraps your content and provides the proper alignment and padding. Bootstrap offers a fixed-width container that centers content with margins on larger screens, and a full-width container that spans the entire viewport. The container is the outermost layer of the grid structure, establishing the boundary within which rows and columns live. Choosing between a centered fixed container and a full-width one is your first layout decision, and understanding that the container sets the stage for everything inside it is the starting point for using the grid correctly.
Inside a container, layout is built from rows and columns. A row is a horizontal group that holds columns, and columns are where your content goes. The fundamental rule is that columns live inside rows, and rows live inside containers — this nesting is the structure the whole grid depends on. Bootstrap divides each row into twelve units, and you assign each column a number of those units to set its width. This twelve-column model is the heart of the grid: you compose a layout by deciding how the twelve units are shared among the columns in each row.
Bootstrap's grid is based on twelve columns per row, a number chosen because it divides cleanly into halves, thirds, quarters, and sixths. You give each column a width in these units, and the widths in a row should add up to twelve to fill it. Two columns of six units each make two equal halves; three columns of four units make thirds; a column of eight beside one of four makes a two-thirds and one-third split. Understanding that you are distributing twelve units across the columns in each row is the single most important concept in the grid, and it makes composing any layout a matter of simple arithmetic.
What makes the grid responsive is breakpoints — screen-size thresholds at which the layout can change. Bootstrap defines a set of breakpoints from small phones up to large desktops, and you can specify different column widths at different breakpoints. This is the mechanism by which a layout adapts: columns can sit side by side on a wide screen and stack vertically on a narrow one, simply by giving them different widths at different breakpoints. Understanding breakpoints is what turns the grid from a static layout tool into a responsive one that serves every device appropriately.
You apply responsive behavior through column classes that include a breakpoint, telling Bootstrap "at this screen size and up, make this column this many units wide." A column might be full width on phones and half width on tablets and larger, achieved by combining classes for different breakpoints. The framework applies each rule from its breakpoint upward, so you typically design for the smallest screen first and add wider-screen behavior on top. This combining of breakpoint-specific widths on a single column is how you express a layout that reflows gracefully across the full range of device sizes.
Bootstrap's grid is mobile-first, meaning you define the layout for small screens as the default and then layer on changes for larger screens. This reflects how responsive design is best approached: start with the constrained mobile view where you must prioritize what matters, then progressively enhance the layout as more space becomes available. Designing mobile-first rather than shrinking a desktop layout down tends to produce cleaner, more focused interfaces, because it forces you to decide what is essential first. Embracing the mobile-first mindset that the grid is built around leads to layouts that work well everywhere, not just on the large screen you happen to develop on.
Beyond specifying exact widths, the grid offers convenient auto-layout options. You can let columns size themselves equally to share a row automatically without assigning specific units, which is handy when you just want a set of equal columns. You can also let a column size to its content while others fill the remaining space. These options reduce the arithmetic for common cases — equal columns are a frequent need — and make the grid faster to work with. Knowing that you do not always have to count units, and that the grid can distribute space automatically, makes building straightforward layouts even quicker.
Two refinements round out practical grid use. Gutters are the spacing between columns, and Bootstrap provides control over them so you can tighten or loosen the gaps to suit your design. Nesting means placing a row of columns inside an existing column, letting you build more complex layouts with sub-divisions — a column that itself contains a grid. Together, gutter control and nesting give you the flexibility to handle layouts more intricate than a single row of columns, while staying within the same consistent twelve-unit system you already understand.
The grid handles structure, and Bootstrap's utility classes handle the finer adjustments — spacing, alignment, display, and visibility. You can align columns within a row, control spacing around elements, and even show or hide content at particular breakpoints. These utilities complement the grid, letting you fine-tune a layout without writing custom CSS. Understanding that the grid provides the skeleton and utilities provide the adjustments lets you build polished, responsive pages quickly, composing structure and refinement from Bootstrap's building blocks rather than hand-writing styles for every tweak.
The most useful habit for working with the grid is to think of every row as twelve units to distribute. Want two equal columns? Six and six. Three equal columns? Four, four, and four. A wide main area with a narrow sidebar? Eight and four, or nine and three. Once you internalize this, designing a layout becomes a quick mental calculation of how to split twelve units among your columns. This simple arithmetic is the entire conceptual core of the grid, and developers who think fluently in twelves build layouts rapidly, because every arrangement reduces to deciding how the row's twelve units are shared.
The defining responsive behavior is that columns stack vertically on narrow screens and sit side by side on wider ones. By default, without a breakpoint specified, columns stack on the smallest screens and only arrange horizontally once you tell them to at a chosen breakpoint. This is the mobile-first model in action: content is readable in a single column on a phone, then spreads into a multi-column layout when there is room. Understanding that stacking is the default and horizontal arrangement is something you opt into at larger sizes is the key to predicting how your layout will behave across devices.
The grid's flexibility comes from setting different widths at different breakpoints on the same column. A column might be full width on phones, half width on tablets, and a third on desktops, expressed by combining classes for each breakpoint. Bootstrap applies each rule from its breakpoint upward, so you layer behavior from small screens to large. This lets a single layout reflow intelligently across the whole range of devices, giving each screen size an appropriate arrangement. Mastering this combination is what separates a layout that merely works on one screen from one that is genuinely responsive across all of them.
Beyond column widths, you often need to control how content aligns within rows and columns — vertically centering items, pushing content to one side, distributing space evenly. Bootstrap provides alignment utilities that work with the grid to handle these adjustments without custom CSS. Vertical alignment of columns of different heights, horizontal positioning within a row, and spacing distribution are all handled through these classes. Knowing that the grid handles the column structure while alignment utilities handle positioning within it lets you achieve polished layouts where everything lines up as intended, which is often what makes a page feel professionally finished rather than slightly off.
Most real pages are combinations of a few familiar patterns the grid handles naturally: a main content area beside a sidebar, a row of equal cards, a centered content column with margins on either side, a header spanning full width above a multi-column body. Each of these is just a matter of distributing the twelve units appropriately and choosing where columns stack on small screens. Recognizing that complex-looking pages decompose into these simple grid patterns makes building them approachable — you identify the pattern, assign the units, decide the responsive stacking, and the grid produces a layout that works everywhere.
Bootstrap's grid is the most valuable part of the framework to master, because it makes responsive layout fast and reliable. It rests on a few clear ideas: a container wraps your content, rows hold columns, and each row is divided into twelve units that you distribute among its columns. Responsiveness comes from breakpoints — you give columns different widths at different screen sizes, designing mobile-first so the layout reflows gracefully from phone to desktop. Auto-layout options handle equal columns without arithmetic, gutters control spacing, nesting enables complex structures, and utility classes fine-tune alignment and spacing. Internalize the twelve-unit model and the mobile-first, breakpoint-driven approach, and you can build clean, responsive layouts quickly for any screen — which is exactly what makes the grid the cornerstone of productive work in Bootstrap.