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.
You need no build tools for this tutorial — one HTML file opened in a browser is enough. Every example assumes Bootstrap 5.3's stylesheet is loaded. The grid is pure CSS, so the JavaScript bundle is not needed here.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid practice</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
</head>
<body>
<!-- your grid goes here -->
</body>
</html>The viewport meta tag matters more than it looks. Without it, phones pretend to be a roughly 980px-wide desktop and zoom out, so none of your small-screen layouts ever appear. Pin a specific 5.3.x release in the URL and upgrade deliberately to the newest 5.3 patch.
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.
<div class="container">
<div class="row">
<div class="col">Left</div>
<div class="col">Right</div>
</div>
</div>The container adds side padding and a maximum width. The row is a flexbox container that allows wrapping, with small negative side margins that cancel the padding of its outer columns so everything lines up. Each column is a flex item whose padding forms half of the gutter on each side. While learning, add border to each column (class="col border") so you can see its edges, then remove it. Remember one sentence: rows contain only columns, and columns contain your content.
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.
<div class="container">
<!-- halves: 6 + 6 = 12 -->
<div class="row">
<div class="col-6">Half</div>
<div class="col-6">Half</div>
</div>
<!-- thirds: 4 + 4 + 4 = 12 -->
<div class="row">
<div class="col-4">Third</div>
<div class="col-4">Third</div>
<div class="col-4">Third</div>
</div>
<!-- two-thirds / one-third: 8 + 4 = 12 -->
<div class="row">
<div class="col-8">Main</div>
<div class="col-4">Side</div>
</div>
</div>What if the numbers do not add up? Fewer than twelve (say col-4 + col-4) leaves empty space on the right. More than twelve (say col-8 + col-6) makes the column that does not fit wrap onto a new line. Neither is an error — wrapping is exactly how a grid of cards flows onto several lines. Each unit is 100% / 12 of its parent row, so col-3 is 25% and col-6 is 50%.
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.
| Name | Class infix | Applies from |
|---|---|---|
| Extra small | none | 0px |
| Small | sm | 576px |
| Medium | md | 768px |
| Large | lg | 992px |
| Extra large | xl | 1200px |
| Extra extra large | xxl | 1400px |
Extra small has no infix: col-6 applies from 0px up, which means everywhere. Breakpoints measure the browser viewport width, not the device type — a narrow desktop window gets the phone layout.
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.
Beginners often write col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 "just in case". Because each rule applies from its breakpoint upward, that means exactly the same as col-md-6. Start with the browser narrowed to phone width, widen it slowly, and add a class only at the width where the single column starts to look stretched.
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.
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4">
<div class="col">Item</div>
<div class="col">Item</div>
<div class="col">Item</div>
<div class="col">Item</div>
<div class="col">Item</div>
</div>row-cols-* sets how many equal columns fit per line on the row itself: one on phones, two from sm, four from lg. The fifth item wraps and keeps the same width as the others, so you can output any number of items from a loop without touching their classes. For a single column that should shrink to its content — a button beside a search box, say — use col-auto next to a plain col.
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.
<div class="container">
<div class="row g-3">
<div class="col-md-8">
Main area
<div class="row">
<div class="col-6">Nested half</div>
<div class="col-6">Nested half</div>
</div>
</div>
<div class="col-md-4">Sidebar</div>
</div>
</div>The default gutter is 1.5rem. Change it on the row with g-0 to g-5, or only horizontally (gx-*) or vertically (gy-*). The vertical gap is the one beginners miss: without it, columns that stack on a phone touch each other, and g-3 on the row fixes that. To nest, put a new .row directly inside a column — no extra container. The nested row has its own twelve units, so each "Nested half" is half of two-thirds, or one-third of the page.
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.
<!-- Never stacks: three thirds even on a tiny phone -->
<div class="row">
<div class="col-4">A</div>
<div class="col-4">B</div>
<div class="col-4">C</div>
</div>
<!-- Stacks below 768px, thirds from 768px up -->
<div class="row">
<div class="col-md-4">A</div>
<div class="col-md-4">B</div>
<div class="col-md-4">C</div>
</div>Resize the browser from wide to narrow and compare. On a 360px phone each col-4 is barely 120px wide — far too narrow for text. When someone says "my columns are squashed on mobile", the cause is nearly always an unprefixed class where col-md-4 was intended. Unprefixed classes are still right for genuinely small things, such as two buttons side by side.
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.
<div class="row g-3">
<!-- phones: 12 tablets: 6 desktops: 4 -->
<div class="col-12 col-md-6 col-lg-4">Feature one</div>
<div class="col-12 col-md-6 col-lg-4">Feature two</div>
<div class="col-12 col-md-6 col-lg-4">Feature three</div>
</div>At 400px only col-12 applies, so the features stack. At 800px col-md-6 takes over: two share a line and the third wraps underneath. At 1100px col-lg-4 wins and all three sit on one line. The gap beside the third item at tablet width is a design choice, not a bug — give it col-md-12 col-lg-4 if you want it full width there.
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.
<div class="container my-4">
<div class="row g-4">
<main class="col-lg-8">Article...</main>
<aside class="col-lg-4">
<div class="p-3 bg-body-tertiary rounded">About the author</div>
</aside>
</div>
</div>The article comes first in the HTML, so it is first on phones too. The breakpoint is lg, not md, because two-thirds of a tablet makes article text too narrow. Semantic tags like <main> can carry column classes directly.
<div class="container-fluid p-3">
<div class="row g-3 mb-3">
<div class="col-md-6 col-xl-3"><div class="p-3 border rounded">Users</div></div>
<div class="col-md-6 col-xl-3"><div class="p-3 border rounded">Orders</div></div>
<div class="col-md-6 col-xl-3"><div class="p-3 border rounded">Revenue</div></div>
<div class="col-md-6 col-xl-3"><div class="p-3 border rounded">Refunds</div></div>
</div>
<div class="row g-3">
<div class="col-lg-9"><div class="p-3 border rounded">Chart</div></div>
<div class="col-lg-3"><div class="p-3 border rounded">Recent activity</div></div>
</div>
</div>Check the arithmetic per breakpoint: tiles stack on phones, go two per line from md (6 + 6), and four across from xl (3 + 3 + 3 + 3). The lower row is 9 + 3 from lg. container-fluid suits dashboards, which benefit from every pixel of width.
<!-- Wrong: no row, so no flexbox parent -->
<div class="container">
<div class="col-6">A</div>
<div class="col-6">B</div>
</div>Without a .row, the columns do not sit side by side. The reverse mistake — text directly inside a row with no column — makes content hug the edges, because the row's negative margins are no longer balanced by column padding.
<!-- Wrong: gutter vanishes -->
<div class="col bg-primary text-white">A</div>
<!-- Right: style an inner element -->
<div class="col"><div class="p-3 bg-primary text-white">A</div></div>Gutters are padding inside the columns, and a background fills padding too, so coloured columns appear to touch. Keep columns as pure layout and style a child element.
col-xs-6 does not exist in Bootstrap 5 — write col-6. hidden-xs became display utilities such as d-none d-md-block, no-gutters became g-0, and ml-*/mr-* became ms-*/me-*.class="col-6 mx-2" makes two halves wider than the row, so one wraps. Use gx-* on the row instead..row, not another container.img-fluid on images and wrap tables in <div class="table-responsive">.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.