Why is the Bootstrap grid system 12 columns wide?

Have you ever wondered why Bootstrap, the popular JavaScript framework designed to create 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 make more logical sense?

Actually, it wouldn’t. And math is the reason why.

 

Bootstrap 5 logo

Bootstrap 5 continues to use the 12-column grid system pioneered in earlier versions.

Highly composite numbers

In mathematics, the number 12 is known as a superior highly composite number. Along with the numbers 2, 6 and 60, 12 is only one of four superior highly composite numbers below the threshold of one-hundred.

Being highly composite means a number can be divided evenly in many ways — specifically, more ways than any positive whole number that precedes it. For example, you can evenly slice the number 12 in the following ways:

  • into twelves
  • into sixths
  • into thirds
  • into quarters
  • into halves

In contrast, the number 10 can’t be cut into thirds, nor can it be evenly cut into sixths or quarters.

As it turns out, this divisibility is important in responsive web page design.

Responsive rendering

When Bootstrap renders a webpage, the JavaScript framework assesses how big the viewport is. A desktop is bigger than a tablet, and a tablet’s viewport is bigger than that of a smartphone.

Bootstrap then decides whether to lay all of the content across the page from left-to right, or to chop up the content so as to accommodate different device’s viewing windows, i.e. into halves or thirds or quarters. This responsive rendering generates a webpage that effectively uses every pixel on a 4K monitor, but also renders equally handsomely on a medium-sized Android tablet or even the much smaller iPhone 12 mini.

This same logic is behind why Tim Hortons sells donuts by the dozen and not 10 at a time. You can split a dozen donuts evenly between 2, 3, 4, 6 or 12 of your friends. You couldn’t do that with a 10-pack.

Bagels, hours and circles

The explanation as to why the 12-column Bootstrap grid exists also answers other meta-physical questions we often ask ourselves: ‘Why does an hour have 60 minutes?’ or ‘Why are there 360 degrees in a circle?’ Like the number 12, the numbers 60 and 360 are both superior highly composite numbers. The number 60 has 12 different divisors. The number 360 has 24.

So with hours being split into 60 minutes, you can be late to a Zoom call in 12 different ways. If there were 100 minutes in an hour, the number of even splits would only be 9.

Responsive 12-column grid in Bootstrap

Bootstrap uses a 12-column grid system that can update itself responsively based on screen size.

There are only 38 highly composite numbers below the one million threshold, including 120, 2520, 5040, 55440 and 720720. Such numbers rarely elbow their way into our everyday vernacular. Certainly, though, the highly composite numbers of 12, 60 and 360 are pervasive in our everyday lives. And the number 12 specifically plays a key role in modern, responsive web site design.

SearchAppArchitecture
SearchSoftwareQuality
SearchCloudComputing
SearchSecurity
SearchAWS
Close