Home  >  Article  >  Web Front-end  >  Why does bootstrap have 12 columns?

Why does bootstrap have 12 columns?

(*-*)浩
(*-*)浩Original
2019-07-19 14:46:212977browse

I was asked a question today: “Have you ever wondered why Bootstrap has 12 columns by default?” I have thought about why the default is 12 columns. (Recommended learning:
Bootstrap video tutorial

)

Why does bootstrap have 12 columns? I think

is because the layout is more convenient. It is common to divide it into 2, 3 or 4 blocks, which can be easily divided.

Since we have a hypothesis, we still need to prove it.

Google search for a while.

Contrary to the question’s parenthetical, Bootstrap was always at 940px wide, and not 960px, even with the original 
16 columns. With the switch to 12 columns in Bootstrap 2, we wanted to simplify the overall grid (16 columns is right 
on the edge of enough granularity) and make it easier to get three columns.
The general meaning is that it was originally 16 columns, but later changed to 12 columns to make it easier to arrange three columns.

Okay, then the question is, why was 16 columns designed before?

Continue to Google.

16-columns has long been the go-to grid for designers and developers, but we’ve noticed a shift to 12- and 24-columns
 to offer a more flexible layout. And they’re right for doing so—gridded layouts work best with an odd number of 
 columns (you often see three columns, but four or six are not that popular).

This is a 2011 discussion in Bootstrap's github bug list. The title is asking why 16 columns were used instead of 24 columns. It turns out that there are 24 columns before the 16 columns. It probably means that 16 columns is the first choice for developers and designers, but

12 or 24 columns can be more flexible. Among them, the layout of odd columns is more common. For example, you can often see the layout of three columns.

For more technical articles related to Bootstrap, please visit the

Bootstrap Tutorial

column to learn!

The above is the detailed content of Why does bootstrap have 12 columns?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn