Column sizing (col-1 through col-12) in Bootsrap - Performance & Optimization

Performance: Column sizing (col-1 through col-12)

MEDIUM IMPACT

This affects the page's layout calculation and paint performance by controlling how columns are sized and arranged in the grid.

Creating a responsive grid layout with fixed column widths

Bootsrap

<div class="row">
  <div class="col-6">Left half</div>
  <div class="col-6">Right half</div>
</div>

Fewer columns reduce DOM nodes and layout recalculations, improving rendering speed and reducing layout shifts.

📈 Performance Gaintriggers 2 reflows, simpler layout, better CLS

Creating a responsive grid layout with fixed column widths

Bootsrap

<div class="row">
  <div class="col-1">1</div>
  <div class="col-1">2</div>
  <div class="col-1">3</div>
  <div class="col-1">4</div>
  <div class="col-1">5</div>
  <div class="col-1">6</div>
  <div class="col-1">7</div>
  <div class="col-1">8</div>
  <div class="col-1">9</div>
  <div class="col-1">10</div>
  <div class="col-1">11</div>
  <div class="col-1">12</div>
</div>

Using many small fixed columns increases the number of DOM nodes and triggers multiple layout calculations, slowing rendering.

📉 Performance Costtriggers 12 reflows, increases layout complexity linearly with columns

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Many col-1 columns (12)	High (12 nodes)	12 reflows	High paint cost	[X] Bad
Few combined columns (e.g., col-6 + col-6)	Low (2 nodes)	2 reflows	Low paint cost	[OK] Good

Rendering Pipeline

Column sizing affects the browser's layout and paint stages by defining widths of grid items, which determines how space is allocated and rendered.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout stage is most expensive due to recalculations for each column width

Core Web Vital Affected

CLS

This affects the page's layout calculation and paint performance by controlling how columns are sized and arranged in the grid.

Optimization Tips

1Avoid using many small fixed columns (like col-1) in a single row.

2Combine columns into fewer larger ones (like col-6 or col-4) to reduce layout complexity.

3Test layout shifts with DevTools Performance to ensure stable rendering.

Performance Quiz - 3 Questions

What is the main performance cost of using many col-1 Bootstrap columns in a row?

A Increased JavaScript execution time

B Multiple layout recalculations increasing reflows

C More network requests for CSS files

D Slower image loading

DevTools: Performance

How to check: Open DevTools > Performance tab > Record while loading or resizing page > Look for Layout and Recalculate Style events

What to look for: High number of layout recalculations and long layout times indicate costly column sizing patterns