Bootstrap 5 Grid Explained: Containers, Rows, Columns and Breakpoints

Bootstrap is still one of the most widely used CSS frameworks, especially in admin panels, agency projects and WordPress themes. The Bootstrap 5 grid is the part you will use on almost every page. Once you understand five ideas – container, row, column, breakpoint and gutter – the class names stop looking cryptic and you can build responsive layouts quickly.

This guide uses Bootstrap 5.3 (the current 5.x release line). Class names here come straight from the official documentation at getbootstrap.com.

The basic structure of the Bootstrap 5 grid

Every Bootstrap grid follows the same nesting:

1. Container – centres your content and gives it horizontal padding.
2. Row – a flex wrapper for columns. It uses negative margins to line columns up with the container edge.
3. Columns – the direct children of a row. Your content goes inside columns.

<div class="container">
  <div class="row">
    <div class="col">Chennai</div>
    <div class="col">Bengaluru</div>
    <div class="col">Hyderabad</div>
  </div>
</div>

Three .col elements share the row equally – one third each – at every screen size.

The 12-column system

Each row is divided into 12 units. You choose how many units a column spans with .col-{number}. Twelve is useful because it divides neatly into halves, thirds, quarters and sixths.

<div class="container">
  <div class="row">
    <div class="col-8">Article</div>
    <div class="col-4">Sidebar</div>
  </div>
</div>

If the numbers in a row add up to more than 12, the extra columns wrap onto a new line.

The six breakpoint tiers

This is where the grid becomes responsive. Bootstrap 5 has six tiers. Each class applies at its breakpoint and above – the grid is mobile-first.

Notice there is no xs in the class names. The smallest tier simply has no infix: .col-6 means “half width from 0px upwards”.

Combining tiers

You add several classes to one column to change its width at different sizes. Smaller tiers apply until a larger tier overrides them.

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">Product</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">Product</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">Product</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">Product</div>
  </div>
</div>

Read it as: full width on phones, half width from 576px, a third from 992px, a quarter from 1200px. On a 768px tablet, the sm rule is still active, so you see two per row.

Containers: fixed, fluid and responsive

For most content sites, .container is right. Use .container-fluid for dashboards or full-bleed sections.

Auto-layout and variable-width columns

• .col – equal share of the remaining space.
• .col-auto – as wide as its content, useful for a button next to a search input.
• Mix them: .col-3, .col, .col-3 gives a flexible centre column between two fixed ones.
• Responsive versions exist too, such as .col-md and .col-md-auto.

row-cols: set columns per row on the parent

When all items are the same width – a card grid, a gallery – it is cleaner to set the count on the row with .row-cols-* and leave each child as a plain .col.

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 g-4">
    <div class="col"><div class="card h-100">Kanchipuram silk</div></div>
    <div class="col"><div class="card h-100">Madurai cotton</div></div>
    <div class="col"><div class="card h-100">Chettinad tiles</div></div>
    <div class="col"><div class="card h-100">Thanjavur painting</div></div>
  </div>
</div>

Gutters: the space between columns

By default, columns have a gutter of 1.5rem (0.75rem on each side). Gutter classes go on the .row:

.g-0 removes gutters entirely, which is useful for edge-to-edge image galleries. Vertical gutters (gy) save you from adding margin to every card in a wrapped grid.

Offsets, ordering and alignment

• Offsets: .offset-md-2 pushes a column right by 2 of 12 units from the md breakpoint. Good for centring a narrow form: .col-md-8 .offset-md-2.
• Margin utilities: .ms-auto pushes a column to the far right.
• Order: .order-first, .order-last and .order-md-2 change visual order. Remember that screen readers follow HTML order, so use this sparingly.
• Vertical alignment: .align-items-center on the row, or .align-self-end on one column.
• Horizontal alignment: .justify-content-center or .justify-content-between on the row.

Nesting grids

You can place a new .row inside any column. The nested row again has 12 units, relative to its parent column’s width. Keep nesting shallow – two levels is usually enough. Deeply nested grids are hard to maintain and often a sign that CSS Grid or a simple Flexbox component would be cleaner.

A complete page layout example

<div class="container my-4">
  <div class="row g-4">
    <main class="col-lg-8">
      <h1>Weekend trips from Puducherry</h1>
      <p>...</p>
    </main>
    <aside class="col-lg-4">
      <h2 class="h5">Popular posts</h2>
      <ul>...</ul>
    </aside>
  </div>
</div>

Below 992px, both columns are full width and stack. From 992px, the article takes two-thirds and the sidebar one-third. Notice the semantic <main> and <aside> elements carry the grid classes directly – you do not need extra divs. See Semantic HTML for SEO.

Show and hide content at breakpoints

The grid is often paired with display utilities. They follow the same tier names: .d-none .d-md-block hides an element on small screens and shows it from 768px; .d-lg-none hides it from 992px upwards. Use this for genuinely different presentations, such as a compact filter button on mobile and a full filter panel on desktop. Avoid hiding important content on phones – mobile users need the same information, just arranged differently.

From a Figma design to Bootstrap classes

If the designer used a 12-column layout grid in Figma, translating it is straightforward. A practical routine:

1. Check the design’s layout grid settings: number of columns, gutter width and margins. A 24px gutter matches Bootstrap’s default 1.5rem.
2. For each section, count how many columns each block spans on desktop, tablet and mobile frames.
3. Write the classes mobile-first: start with the phone width, then add md and lg classes where the layout changes.
4. If the designer’s tablet frame is 768px and desktop 1440px, ask what should happen at 992px and 1200px – those are Bootstrap breakpoints the frames do not show.

Agreeing on these numbers early saves many rounds of “it looks different from the design”.

Common mistakes

• Forgetting the container, so rows touch the screen edges with negative margins causing horizontal scroll.
• Putting padding or a background directly on .col elements and wondering why gutters look wrong – put a card or inner div inside the column instead.
• Writing .col-xs-6. That was Bootstrap 3 syntax; in Bootstrap 5 it is just .col-6.
• Using .col-md-* expecting it to apply only on tablets. It applies from 768px and up unless a larger tier overrides it.
• Loading the whole framework just for the grid on a small site. Plain CSS Grid may be lighter – compare in Responsive Design Breakpoints.

Frequently asked questions

Further reading

• getbootstrap.com/docs/5.3/layout/grid
• getbootstrap.com/docs/5.3/layout/breakpoints
• getbootstrap.com/docs/5.3/layout/containers
• getbootstrap.com/docs/5.3/layout/gutters
• getbootstrap.com/docs/5.3/layout/columns