What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Bootstrap’s default grid makes responsive layouts by combining a .container, a .row, and column classes such as .col-md-4. The 29 arrangements below are practical compositions—not an official ranking or a set of named Bootstrap templates. Choose one according to how many columns your content needs at each screen size, how prominent the main content should be, and whether the narrow-screen reading order still makes sense.
How Bootstrap’s default grid works
Bootstrap v5.3’s default grid is mobile-first and flexbox-based. Its hierarchy is .container → .row → column → content, and a row is divided into 12 template columns. A class such as .col-md-4 asks an item to span four of those 12 columns at the md tier and above, unless a larger-tier class overrides it. Thus, three .col-md-4 items form thirds from medium screens upward; they do not mean “three columns on desktop” in every context. Bootstrap documents six default responsive tiers: xs below 576px, sm at 576px and above, md at 768px and above, lg at 992px and above, xl at 1200px and above, and xxl at 1400px and above. These are the Bootstrap v5.3 defaults, not guarantees for a project that customizes its Sass breakpoints. See Bootstrap’s Grid system and Breakpoints documentation.
As an Amazon Associate I earn from qualifying purchases.
In the examples, each .row belongs inside a container, and the content belongs inside columns. The snippets show the column classes and omit repeated container and content markup for readability. A full-width section that needs no columns does not need a grid wrapper. Bootstrap’s Columns documentation covers column behavior and nesting.
Equal-width columns and card grids
Use equal-width columns when the items have comparable importance. Auto-layout columns divide available row space evenly; explicit spans make a particular width clear. These patterns use the default flexbox grid.
#1 Best Overall
1. Two equal auto-layout columns
.row with two .col children. Both columns share the available row width equally. A plain .col has no breakpoint infix, so the columns remain side by side unless the design changes them with other classes.
2. Three equal auto-layout columns
.row with three .col children. This is useful for three related features or summary panels; check that text and controls remain comfortable at narrow widths.
3. Four equal auto-layout columns
.row with four .col children. Use for compact tiles or short data points, not dense cards that need substantial reading space.
4. Six equal auto-layout columns
.row with six .col children. This suits small indicators or compact labels when each item can remain legible; it is usually too tight for full cards.
5. Explicit two-column halves
Use two .col-6 children. Each occupies six of the row’s 12 columns, so the half-width split applies starting at the smallest tier instead of relying on an unqualified auto-layout column.
6. Two equal columns from medium screens
Use two .col-md-6 children. They stack below 768px, then become halves at md and above. This is a dependable arrangement for a form beside explanatory content.
7. Three equal columns from medium screens
Use three .col-md-4 children. Each spans four twelfths from 768px upward; below that, the items stack because no smaller-tier span is specified.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →8. Four cards per row from large screens
Use four .col-lg-3 children. Each is one quarter of the row from 992px upward and stacks below that tier. Choose this when desktop can show four compact cards without making the mobile view cramped.
9. Row-driven two-column cards
Set the row to .row row-cols-2 and give its children .col. The row sets two columns for its children without repeating a numeric span on each one. Bootstrap documents row columns as a convenient way to control the number of columns in a row; see Grid system.
10. Responsive row-driven cards
Use .row row-cols-1 row-cols-sm-2 row-cols-lg-3 with .col children. This yields one column below 576px, two from sm, and three from lg. It is easier to adjust the grid-wide count than to edit every child’s span.
Unequal splits and sidebars
Unequal spans establish visual priority: a larger span gives the main content more room, while a smaller one works for a compact navigation rail, metadata, or supporting panel. At a breakpoint, the spans in a row should generally total 12 if all items are to fit on one line.
11. Main content and sidebar, 8/4
Pair .col-md-8 with .col-md-4. The main area gets two-thirds of the row and the sidebar one-third from 768px upward; below that they stack. This is a common starting point for an article with related links.
12. Main content and narrow sidebar, 9/3
Pair .col-lg-9 with .col-lg-3. The sidebar occupies one quarter from 992px upward. Use it for short supporting content, and allow it to stack on smaller screens.
13. Main content and broader support area, 7/5
Pair .col-lg-7 with .col-lg-5. This gives a secondary panel more room than a conventional narrow rail—useful when both sides contain substantial material.
Rank #3
14. Article and narrow rail, 10/2
Pair .col-lg-10 with .col-lg-2. The rail receives only one-sixth of the row, so reserve it for compact items such as brief labels or a small set of links. If it needs readable paragraphs or controls, choose a wider span.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errors15. Centered reading column
Place a .col-lg-8 inside a row and center it with an offset or auto margins, such as .offset-lg-2 or .mx-auto. This leaves breathing room around a long-form text column at large widths. Keep a responsive container around the row.
16. Asymmetric feature split, 5/7
Pair .col-md-5 with .col-md-7. The second panel is wider, so put the denser copy, larger image, or primary interaction there, depending on the content’s natural reading order.
17. Main feature with two support columns
Use .col-lg-6 followed by two .col-lg-3 children. The main feature gets half the row; the two supporting items each get a quarter. Below lg, the items stack unless smaller-tier classes are added.
18. Full-width section followed by a split section
Use one row with a single .col-12 for the full-width section, then a separate row with .col-md-8 and .col-md-4 for the split. If the first section simply spans the page, it can sit directly in the container without a column wrapper.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Layouts that change across breakpoints
Responsive classes are cumulative: a class begins at its named minimum width and remains in effect at larger widths until another class overrides it. Specify the points where the composition should actually change, rather than adding a class for every tier.
19. Two columns on small screens, three from medium
Repeat .col-6 .col-md-4 for each item. Items form halves below 768px and thirds from 768px upward. This can be useful for compact catalogs, but two narrow columns may not suit cards with long titles.
20. Full width on mobile, half width from medium
Pair two .col-12 .col-md-6 items. Each takes the full row below 768px; from md, they sit side by side at half width.
21. Two columns at small, four at extra-large
Repeat .col-sm-6 .col-xl-3. Items are half-width from 576px through the tiers below xl, then quarter-width from 1200px upward. They are full width below sm.
22. Wide feature plus two smaller cards
Use one .col-12 .col-lg-6 and two .col-6 .col-lg-3 children. Below 992px, the feature takes a full row and the smaller cards share the next row. From lg, the spans total 12: six plus three plus three.
23. Mixed small and large tiers
Assign spans at both tiers when the design should change more than once. For example, use .col-6 .col-sm-6 .col-lg-8 beside .col-6 .col-sm-6 .col-lg-4, then use .col-6 .col-sm-4 for a separate group of smaller items. Bootstrap’s grid examples demonstrate combining tier-specific spans; the exact composition should follow the content rather than being treated as a prebuilt template.
24. Full-width mobile, 8/4 split from large
Use .col-12 .col-lg-8 with .col-12 .col-lg-4. Both are full-width below 992px; at lg, they become a two-thirds/one-third split.
Nested columns, gutters, and order
Nesting helps organize a sub-layout inside a larger region. A nested grid needs its own .row inside the parent column. Gutters are created through column padding counteracted by row margins, so custom padding or margins can change alignment. Bootstrap v5.3 documents a default gutter width of 1.5rem—0.75rem on each side of a column—and provides utilities to change it. See Gutters and Grid system.
Recommended Free Tools
25. Two nested columns inside a wide parent
Use a parent .col-md-8 containing a nested .row with two .col-md-6 children. The inner halves are measured against the parent column’s row, not the outer page row.
26. Nested card grid beside a sidebar
Make a row with a .col-md-8 main area and a .col-md-4 rail. Inside the main area, add a nested row using .row-cols-1 .row-cols-sm-2 and .col children for cards. The nested cards adapt independently of the outer sidebar split.
27. Unequal nested content
Inside a parent .col-md-8, add a nested row with .col-md-4 and .col-md-8. This gives an internal supporting panel a third of the parent’s available row and the main nested panel two-thirds.
28. Equal columns with wider horizontal gutters
Add .gx-4 to a row of equal columns to increase horizontal gutter spacing using Bootstrap’s spacing scale. The utility adjusts the space between columns; check the resulting alignment and usable content width at each size.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, 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 minute29. Equal columns with vertical spacing or deliberate order
Use .gy-* to set vertical gutters, or .g-* for both directions, on a row of equal columns. If you also use responsive order utilities, verify that the visual order matches a sensible reading and keyboard-navigation order. Bootstrap documents gutter utilities in Gutters and order behavior with the grid documentation.
Choose the right container and spacing
Column classes control proportions inside a row; the container controls the row’s overall measure. In Bootstrap v5.3 defaults, responsive .container widths have these maximum widths by tier. The values are framework defaults and can change if a project customizes Sass.
| Container tier | Default maximum width |
|---|---|
sm |
540px |
md |
720px |
lg |
960px |
xl |
1140px |
xxl |
1320px |
.container-fluid stays full width at all sizes. Responsive container variants, such as .container-lg, remain fluid until their named breakpoint and then use the container maximum width. For details, see Bootstrap’s Containers documentation.
- Use a responsive container for content that should stop growing at a readable maximum width.
- Use
.container-fluidwhen the layout should use the full available width. - Use
.gx-*,.gy-*, or.g-*when horizontal spacing, vertical spacing, or both need adjustment. - When changing column padding or row margins yourself, recheck the alignment at the container edges.
Default grid versus Bootstrap CSS Grid
The examples above use Bootstrap’s default flexbox grid: .row and .col-*. Bootstrap v5.3 also documents a separate CSS Grid feature with classes such as .g-col-*, but it is opt-in and requires Sass configuration. It is not interchangeable with the default grid’s classes or enabled merely by using .row. Consult CSS Grid and configure it deliberately if that feature is what your project needs.
Free tools Windows power users keep installed
One-click scans. No signup required.
Technical scope
The class behavior and configuration values in this guide are based on Bootstrap v5.3 documentation. Bootstrap’s current release status as of 2026 is not established here; check the documentation for the version used by your project before relying on a class or default value. The 29 patterns are practical combinations of documented grid mechanics, not a Bootstrap ranking, official template set, or tested comparison.
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.
