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?
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)
Most versions of Bootstrap only use 12 columns to account for the following:
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With