An example of a bootstrap grid extension that has 20 columns and five different column types.In addition to the four default types, a new ".col-xxs-" type has been added which takes priority when the viewport width is less than 400px. The generated css file is not minified and can be viewed in the github repository in example/css/grid_extension.css.
For reference.
Full width.
In this example, there are 20 column sizes. Here is the page divided into 20 sections.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
These two columns are separated by a third smaller column. One of the largest inspirations for extended bootstrap grid classes is spacing. Sometimes spaces between elements need to be smaller than a fraction of 12.
.col-md-9
.col-md-9
This column changes size with every viewport width transition. Shrink your browser window to transition through all five!
Changes width.