Column Wrapping and Resetting in Bootstrap

In the design and development world, Wrapping and Resetting are those unsung heros that prevent you from tearing your hair out when something doesn’t behave as it should. The moment you realize the correlation between these two, you will be a boss and call the shots on how your content behaves in various screen sizes and interactions.

Understanding Wrapping and Resetting in the grid system in Bootstrap is kinda like figuring out a puzzle, and at its core, it’s built on 12 blocks really.

But if you have too many blocks to fit in a single row, they need somewhere else to be — and that’s what Wrapping and Resetting are all about.

1. What is Column Wrapping?

In Bootstrap, under a row you have 12 slots to put transparente. Try cramming 13 or 14 slots into a row and neither will simply disappear or overlap with the next set; they “wrap” down to another row on their own.

The Basic Rule: If the total column units ($col-x$) in a single row exceed 12 then the extra columns will push onto a new line.

A Real-Life Example:

Imagine you have three boxes. You tell Bootstrap:

Assigning a size of 8 to Box A starts the row. Following that, Box B takes 5 units, which forces a wrap. Lastly, Box C drops down to join the second line.

$8 + $5 = 13$. Since 13 is greater than 12, Box B will immediately move to a new line. Then Box C will come after Box B in that second line.

2. What is a “Reset” (Responsive Break)?

Now and then youll see text truncation looking sloppy. One box might be taller than its neighbors, causing those below it to get misaligned or gaping.

And that is what a Reset does, it lets you say “Whoa, stop there. “Let’s start this box on a new, clean line, irrespective of what was there before.

So, how do you achieve this?

It’s a special invisible separator we just call <div class=”w-100″></div>.

w-100 stands for “Width 100%.”

Use an invisible separator called w-100, which stands for “Width 100%”.

Inserting this between two columns creates a break, much like when you click the “Enter” key on your keyboard.

3. “Responding” to It (The Human Touch)

This is the money step. You desire to make sure your blog or website is going to look great on minification of a very small phone.

You can ask Bootstrap to wrap or not-wrap only on certain screen sizes like this:

On a Phone: You may want 1 column per row (Size 12).

For a Laptop: You may wish 3 on each row (Size 12)

Example Code (The “Simple” Way):

HTML

<div class="row">
 <div class="col-6 col-md-3">Box 1</div>
 <div class="col-6 col-md-3">Box 2</div>
 <div class="w-100 d-md-none"></div>
 <div class="col-6 col-md-3">Box 3</div>
 <div class="col-6 col-md-3">Box 4</div>
 </div>