Why Column sizing (col-1 through col-12) in Bootsrap? - Purpose & Use Cases

The Big Idea

Discover how a simple 12-part grid can save you hours of layout headaches!

The Scenario

Imagine you want to create a webpage layout with multiple sections side by side. You try to set widths by guessing pixel values for each part, like 100px for one column and 200px for another.

The Problem

When the screen size changes or you add more content, your fixed widths break the layout. You have to recalculate and rewrite all widths manually for every device size, which is slow and frustrating.

The Solution

Bootstrap's column sizing with col-1 through col-12 lets you divide the page into 12 equal parts. You pick how many parts each column takes, and the layout adjusts automatically on different screens.

Before vs After

✗ Before

div style="width:100px; float:left;" ... div style="width:200px; float:left;" ...

✓ After

<div class="col-4">...</div><div class="col-8">...</div>

What It Enables

You can build flexible, responsive layouts that adapt smoothly to any screen size without rewriting widths.

Real Life Example

On a blog page, you can have a sidebar taking 3 columns and main content taking 9 columns. On mobile, these columns stack nicely without extra work.

Key Takeaways

Manual width setting is hard to maintain and breaks on different screens.

Bootstrap columns divide space into 12 parts for easy sizing.

Layouts become flexible and responsive automatically.