Bootstrap 12 column layout
Have you ever wondered why Bootstrap, a popular JavaScript framework designed for creating responsive web pages, uses a 12-column grid system?
After all, the entire civilized world uses the metric system. Wouldn't a base-10 bootstrap grid layout system for rows and columns make more logical sense?
Bootstrap 5 continues to use the 12-column grid system developed in previous versions.
Actually, that's not the case.and Math That's the reason.
Why does Bootstrap use 12 columns?
Bootstrap uses a 12-column layout. This is because the number 12 has more divisors than any number before or after the number 60.
Bootstrap's 12-column layout allows you to split your responsive web pages into six different ways.
- Half (12/6)
- Sars (12/4)
- Quarter (12/3)
- 6 degrees (12/2)
- 12 (12/12)
- and standalone (12/1)
That's not possible with numbers like 10, 20, and 30.
Bootstrap chose a 12-column layout because the responsive web page needed to be evenly divided in multiple ways as the device viewport changed.
Highly synthesized numbers
In mathematics, the number 12 is Excellent and highly composite numbers. Along with the numbers 2, 6, and 60, 12 is just one of four. Excellent and highly synthesized numbers below the threshold of 100.
There is highly complex This means that the number can be evenly divided in different ways. Specifically, it means that the number can be evenly divided in more ways than the positive integer that precedes it.
This divisibility is important in responsive web page design.
responsive rendering
When Bootstrap renders a web page, the JavaScript framework evaluates the size of the viewport. A desktop is larger than a tablet, and a tablet's viewport is larger than a smartphone's viewport.
Bootstrap will then decide whether to arrange all the content from left to right across the page, or to split the content to fit the display windows of different devices, i.e. in half, third, or quarter. Decide whether to divide it into
This responsive rendering produces web pages that efficiently use every pixel on a 4K monitor, but renders equally beautifully on a medium-sized Android tablet or the even smaller iPhone 12 mini.
This same logic is why Tim Hortons sells donuts in batches of 12 at a time instead of 10. You can divide the 12 donuts equally among her 2, 3, 4, 6, or her 12 friends. You can't do that with a 10-pack.
bagel, hour, circle
The explanation for why the 12-column bootstrap grid exists also answers other metaphysical questions that we often ask ourselves.
- Why are there 12 pennies in a shilling?
- Why is there 60 minutes in an hour?
- Why does a circle have 360 degrees?
- Why did Plato's perfect city have 5,040 inhabitants?
multiple divisors
Like the number 12, the numbers 60, 360, and 5,040 are all Excellent and highly composite numbers.
- The number 60 has 6 different divisors
- The number 60 contains 12.
- There are 24 in the number 360
- The number 5,040 contains 60.
So if you divide your time into 60 minutes, there are 12 ways you can be late for a Zoom call.
In contrast, if there are 100 minutes in an hour, there are only nine even divisions.
Bootstrap uses a 12-column grid system that can update responsively based on screen size.
Common composite numbers
There are only 38 highly complex numbers below the 1 million threshold, including 120, 2,520, 5,040, 55,440, and 720,720. Such numbers rarely enter our everyday language.
However, the highly complex numbers 12, 60, and 360 are pervasive in our lives, and the number 12 in particular plays an important role in modern responsive website design.
