The Grid in Bootstrap

Think of the Bootstrap Grid System as an invisible safety net for your website. It ensures that whether someone looks at your site on a giant monitor or a tiny phone, your content stays organized and looks professional.

The Grid in Bootstrap uses a 12-column system. Instead of measuring things in pixels, you tell Bootstrap how many of these 12 “slots” an item should take up.

The Three Main Building Blocks

To make the grid work, you must nest three specific elements inside each other:

Container: The outer box that holds everything. it adds some padding to the sides so your text doesn’t touch the very edge of the screen.
Row: A horizontal line inside the container. You can have as many rows as you want.
Column (Col): The actual “buckets” where you put your text, images, or buttons.

How the 12-Column Math Works

The magic number is always 12. You can divide these 12 columns however you like:

Half and Half: Two columns of 6 units each ($6 + 6 = 12$).
Three Equal Parts: Three columns of 4 units each ($4 + 4 + 4 = 12$).
Sidebar & Main Body: One column of 3 units (sidebar) and one of 9 units (main content) ($3 + 9 = 12$).

Making it “Responsive” (The Breakpoints)

This is the best part. You can tell Bootstrap to change the layout depending on the screen size using “Breakpoints”:

col-: For tiny screens (Phones).
col-md-: For medium screens (Tablets).
col-lg-: For large screens (Laptops/Desktops).

Real World Example: Imagine you want two boxes side-by-side on a Laptop, but stacked on top of each other on a Phone. You would use code that says: “On medium screens and up, take 6 slots. On anything smaller, take all 12 slots.”

💡 Simple Rules to Remember

Rows must stay inside Containers.
Columns must stay inside Rows.
Only Columns should hold content. (Don’t put text directly in a Row; it will look messy).
If you go over 12, the extra column will simply “wrap” and drop down to a new line.