Why does Bootstrap only have classes for up to 12 columns? Why not more?

Question

Why am I limited to 12 columns? Why isn't by default more, for more flexibility?

Let me explain what confuses me. Let's say I want to create a simple page with a left menu, and a content on the right.

<div class="col-sm-3">Left menu</div> <!-- 258px -->
<div class="col-sm-9">Content</div> <!-- 772px -->

<div class="col-sm-4">Left menu</div> <!-- 343px -->
<div class="col-sm-8">Content</div> <!-- 687px -->

As seen in this example above, the difference between sm-3 and sm-4 is almost 100px for the menu! If I want the menu to be 300px, I can't use the grid. If I had more columns, I could be more precise than that.

Am I using the grid system the wrong way? Why is the grid divided into so few columns?

Answer 1

You can edit the amount of columns with LESS.

12 is the default because it is the most flexible grid pattern over any possible numbers up to 12.

 COLUMNS   | EVEN COLUMNS POSSIBLE
 1 column  = 1 (1x1)
 2 columns = 2 (1x2, 2x1)
 3 columns = 2 (1x3, 3x1)
 4 columns = 2 (1x4, 2x2, 4x1)
 5 columns = 2 (1x5, 5x1)
 6 columns = 4 (1x6, 2x3, 3x2, 6x1)
 7 columns = 2 (1x7, 7x1)
 8 columns = 4 (1x8, 2x4, 4x2, 8x1)
 9 columns = 3 (1x9, 3x3 9x1)
10 columns = 4 (1x10, 2x5, 5x2, 10x1)
11 columns = 2 (1x11, 11x1)

12 columns = 6 (1x12, 2x6, 3x4, 4x3, 6x2, 12x1)

Answer 2

Most versions of Bootstrap only use 12 columns to account for the following:

• Easier layout creation
• Responsive layout for mobile devices
• Proportional "blocks" to keep everything symmetrical
• Simpler "User Friendly" theme

You are correct. You are limited to a maximum width, and the width of your columns must add up to the maximum width and cannot exceed it. However, you are not forced to keep that policy on your website.

You can always override the CSS and customize the column width to any way you want!

To do this (and honor the maximum width of your website), you first need to find the number of pixels for the largest column, which is col-12. You can see that the maximum possible width is 1030px for your website.

Let's look at what you wanted:

If I want the menu to be 300px, I can't use the grid.

You can actually do that while still using the grid to a certain extent. We just need to set the menu to be 300px (like you asked) and give the rest of the space (1030px - 300px = 730px) for the main content.

So we need a box for 300px and a box for 730px.

Here's what you can use:

<div class="col-sm-3" style="width:300px;">Left menu</div> <!-- 300px -->
<div class="col-sm-9" style="width:730px;">Content</div> <!-- 730px -->

Basically, you can change your layout proportions to anything you want. The total width just needs match the rest of the website. I hope that helps.

-Dominick

Answer 3

Well, The reason is very simple and that's because it can be divided by 1, 2, 3, 4, 6, and 12. Which is also very easy to count and get your layout done.

You can use the entire available space by using col-12 to one div or element

or divide the same space into two equal divs by using the col-6 class

or you can make three equal divs by using col-4 class

or having 4 columns by using col-3 class

or even a 6 columns by using col-2 class

And even having a 12 columns layout by using col-1 class

Do you see? how easy it is to manipulate and calculate the space you desire.

Not to mention that there are other grid systems such as the 8 and 16 systems but each has its own advantages and disadvantages. But from my own perspective, I think the grid of 12 columns is the most flexible since you can have 3 equal divs which is a huge advantage in my opinion.