iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Bootstrap’s default grid lets you build responsive columns by placing column classes inside a .row, then choosing how many of the row’s 12 grid units each column should span at each breakpoint. These 29 practical arrangements cover equal columns, sidebars, responsive card grids, nested layouts, and spacing variations. They are useful patterns—not an official Bootstrap ranking or a set of 29 named templates—and the technical details below are based on the Bootstrap v5.3 documentation.
How Bootstrap columns work
Bootstrap’s default grid is mobile-first and flexbox-based. Its hierarchy is .container (or another container) → .row → column → content. The grid has 12 template columns and six default responsive tiers. A class such as .col-md-4 means the column spans four of the row’s 12 units starting at the medium breakpoint; it does not mean “four columns.” Three such columns fit evenly across a row from that tier upward.
In Bootstrap v5.3, the default breakpoint thresholds are:
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsxs: below 576pxsm: 576px and abovemd: 768px and abovelg: 992px and abovexl: 1200px and abovexxl: 1400px and above
Breakpoint classes use minimum-width behavior: a class applies at its named tier and above unless a class at a larger tier changes the layout. For example, .col-md-6 gives a column half the row width from 768px upward. Below that, it has no specified span, so the grid’s automatic sizing behavior applies. Add .col-12 when you want to explicitly specify full width below a later breakpoint.
#1 Best Overall
For a full-width section that does not need columns, you can put the content directly in a container rather than adding a redundant row and column. The Bootstrap v5.3 grid documentation covers spans, breakpoints, gutters, and grid examples.
Choose a container before tuning the columns
A container determines the maximum width available to its rows. In the Bootstrap v5.3 defaults, .container is fluid below the sm tier and uses these maximum widths at each tier:
| Breakpoint | Default container maximum width |
|---|---|
sm (576px and above) |
540px |
md (768px and above) |
720px |
lg (992px and above) |
960px |
xl (1200px and above) |
1140px |
xxl (1400px and above) |
1320px |
Use .container-fluid when the layout should remain full width at every viewport size. Responsive container variants, such as .container-lg, stay fluid until their named breakpoint and then use a maximum width. See Bootstrap’s v5.3 container documentation for the container options.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteEqual-width and auto-layout patterns
Use equal columns when the items have similar importance. Automatic .col columns divide available row space evenly; numbered spans are useful when you want a specific count or breakpoint behavior.
- Two equal auto-layout columns. Place two
.colchildren in a row. They share the available width equally and can wrap when space runs out. - Three equal auto-layout columns. Use three
.colchildren. Each receives an equal share without spelling out a numeric span. - Four equal auto-layout columns. Use four
.colchildren for compact panels or cards; check that their content remains readable at the available width. - Six equal auto-layout columns. Use six
.colchildren for short labels or small visual items, not text-heavy cards that need more room. - Explicit halves. Two
.col-6children each span six of the 12 units, producing two equal halves at all default tiers. - Two columns from medium upward. Use two
.col-md-6children. They form halves from 768px upward and stack below that threshold when each occupies a full row under the grid’s automatic sizing. - Three columns from medium upward. Use three
.col-md-4children. Each spans four units—one third of the row—from 768px upward, with the columns stacking below it. - Four cards from large upward. Use four
.col-lg-3children. Each spans three units, so the row fits four cards at 992px and above; below that tier, they return to automatic sizing. - Two items per row with row-cols. Put
.row-cols-2on the row and use.colchildren. The row utility sets two columns per row without assigning a span to every child. - Responsive card count with row-cols. Combine
.row-cols-1 .row-cols-sm-2 .row-cols-lg-3on the row, with.colchildren. This gives one item per row below 576px, two from 576px, and three from 992px.
Unequal splits and sidebar patterns
Use unequal spans when one area carries the primary content and another provides navigation, metadata, or supporting material. The numbers still describe portions of the 12-unit row.
- Two-thirds main area with a one-third sidebar. Use
.col-md-8beside.col-md-4. The main area spans eight units and the sidebar four from 768px upward; below that, both can stack. - Wide main area with a narrow sidebar. Use
.col-lg-9and.col-lg-3for a 9:3 split from 992px upward. The sidebar may be too narrow for dense navigation or long labels, so check its content at the actual container width. - Seven-to-five feature split. Pair
.col-lg-7with.col-lg-5when the primary content needs a modest lead but the secondary panel still needs substantial room. - Article with a narrow rail. Pair
.col-lg-10and.col-lg-2for an article with a slim rail from 992px upward. Use it only when the rail remains usable at the container’s width; move detailed navigation or controls elsewhere if it does not. - Centered reading column. Put a
.col-lg-8in a row and center it with an offset or auto margins. This leaves unused space on both sides while keeping the content narrower than a full row. - Asymmetric feature split. Use
.col-md-5beside.col-md-7when the first panel is secondary and the second is the focal content, or reverse them if the emphasis is opposite. - Main content with two support columns. Use
.col-lg-6plus two.col-lg-3children. The spans add up to 12, giving the main area half the row and each support area a quarter from 992px upward. - Full-width section followed by a split section. Put the first section in its own full-width row, then use a second row with
.col-md-8and.col-md-4. Separate rows make the change in content structure explicit.
Responsive layouts that change column counts
Responsive classes let a composition change at one or more breakpoints. Choose them based on when the content stops fitting—not on a device label such as “desktop.”
- Two columns on narrow screens, three at medium. Repeat
.col-6 .col-md-4for each item. Each spans half a row below 768px, then one third from 768px upward. - Full width below medium, halves from medium. Pair
.col-12 .col-md-6columns. Each occupies a full row below 768px and half a row at that tier and above. - Two columns from small, four from extra-large. Repeat
.col-sm-6 .col-xl-3. Items are half width from 576px; at 1200px they become quarter width. Below 576px, no span is specified, so the items use automatic sizing. - Wide feature with two smaller cards. Use one
.col-12 .col-lg-6and two.col-6 .col-lg-3columns. Below 992px the feature takes a full row while the two smaller cards can share the next row; from 992px, the spans form a 6:3:3 layout. - Change spans at small and large tiers. Apply classes for each tier where the proportions need to change. For example, a column can use
.col-sm-6 .col-lg-8while its companion uses.col-6 .col-lg-4; at a small tier they split evenly, then change to an 8:4 split at large. Another useful combination is.col-6 .col-sm-4for items that move from half-width to one-third width at 576px. - Full-width mobile, 8:4 from large. Pair
.col-12 .col-lg-8with.col-12 .col-lg-4. Both are explicitly full width below 992px, then form a two-thirds/one-third split.
Nested grids, gutters, and ordering
Nested rows are useful when one column contains its own independent layout. The child row divides the width of its parent column, not the full outer container. Keep the HTML structure and reading order coherent; visual rearrangement should not make keyboard or screen-reader navigation confusing.
- Two nested columns inside a wide parent. Place a nested
.rowinside a.col-md-8, then add two.col-md-6children inside the nested row. The outer row can place a sidebar beside the wide parent. - Nested card grid beside a sidebar. Use a parent
.col-md-8for a nested row with row-cols utilities and a sibling.col-md-4for the rail. This separates the card layout from the outer page split. - Unequal nested content. Inside a parent
.col-md-8, create a nested row with.col-md-4and.col-md-8children when one inner panel needs twice the width of the other. - Equal columns with wider horizontal gutters. Add
.gx-4to the row to increase horizontal spacing between columns while leaving vertical gutter settings independent. - Equal columns with vertical spacing. Use
.gy-*to control vertical gutters, or.g-*to set both horizontal and vertical gutters. Use responsive order utilities only when the resulting reading order remains sensible.
The default gutter width in the Bootstrap v5.3 grid documentation is 1.5rem, with .75rem on each side. Gutters are implemented through column padding counteracted by row margins, so custom margins or padding on rows and columns can affect alignment. The documented controls include .g-*, .gx-*, and .gy-*; see the gutter documentation for details.
Default grid versus Bootstrap’s opt-in CSS Grid
The patterns above use Bootstrap’s default flexbox grid: .row with column classes such as .col-md-6. Bootstrap v5.3 also documents a separate CSS Grid feature with classes such as .g-col-*. It is opt-in and requires Sass configuration; it is not enabled by the default grid setup. Do not mix its classes into a flexbox-grid example unless you have configured that feature. The setup is described in Bootstrap’s v5.3 CSS Grid documentation.
Technical scope
All breakpoint, container, gutter, and class behavior described here is based on Bootstrap v5.3 documentation. The documentation establishes these mechanics and examples; it does not identify an official set of 29 best layouts or rank them by performance or usability. Bootstrap’s current release status beyond the v5.3 material is not established here, so check the documentation for the version used by your project before applying these classes.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Free tools Windows power users keep installed
One-click scans. No signup required.
