Foundation style block mesh in Bootstrap 3?

Question

In Zurb Foundation 3+, they have a “block mesh” CSS construct, which is an unordered list where you can specify the number of elements in a row.

Here is their paperwork on it.

I cannot do this in Bootstrap 3; there are only columns. I would like to be able to re-display a repeating element (like LI) as a responsive grid, where I can specify how many breakpoints there are, like in Foundation.

I suppose I can minimize it myself, but I wanted to see if anyone has any suggestions or if something happened earlier.

Answer 1

I also want this to be a feature in BS3. You will need to create your own solution.

My typical workaround is similar to how Foundation does, using percentages to determine the width, nth-child selector, and field adjustments.

[class*="block-grid-"] { display: block; padding: 0; margin: 0 -0.55556rem; } [class*="block-grid-"] > li { display: block; height: auto; float: left; padding: 0 0.55556rem 1.11111rem; } .small-block-grid-3 > li { width: 33.33333%; list-style: none; } .small-block-grid-3 > li:nth-of-type(1n) { clear: none; } .small-block-grid-3 > li:nth-of-type(3n+1) { clear: both; } 

Answer 2

Fast and dirty LESS file for generating block grids (from 1 to @grid-columns ) in Bootstrap 3. Still you need to create sensitive classes (for example, block-grid-sm-3 block-grid-lg-6 ).

 // Bootstrap variables and mixisn @import "bootstrap/less/variables.less"; @import "bootstrap/less/mixins.less"; .block-grid () { padding: 0; & > li { display: block; float: left; list-style: none; } } .make-block-grid (@columns, @spacing: @grid-gutter-width) when (@columns > 0) { .block-grid-@ {columns} { &:extend(.clearfix all); .block-grid(); margin: 0 ( -@spacing / 2); > li { width: 100% / @columns; padding: 0 (@spacing / 2) @spacing; &:nth-of-type(1n) { clear: none; } &:nth-of-type(@{columns}n+1) { clear: both; } } } .make-block-grid(@columns - 1) } .make-block-grid(@grid-columns); 

Answer 3

Here is a tip from giveo's answer:

 .make-block-grid(@class, @columns: @grid-columns, @spacing: @grid-gutter-width) when (@columns > 0) { .block-grid-@ {class} -@ {columns} { .clearfix; padding: 0; margin: 0 ( -@spacing / 2); & > li { display: block; float: left; width: 100% / @columns; padding: 0 (@spacing / 2) @spacing; list-style: none; &:nth-of-type(1n) { clear: none; } &:nth-of-type(@{columns}n+1) { clear: both; } } } .make-block-grid(@class, @columns - 1); } .make-block-grid(xs); @media (min-width: @screen-sm-min) { .make-block-grid(sm); } @media (min-width: @screen-md-min) { .make-block-grid(md); } @media (min-width: @screen-lg-min) { .make-block-grid(lg); } 

Answer 4

This css works for me:

 class*="block-grid-"] { display: block; padding: 0; margin: 0 -0.625rem; *zoom: 1; } [class*="block-grid-"]:before, [class*="block-grid-"]:after { content: " "; display: table; } [class*="block-grid-"]:after { clear: both; } [class*="block-grid-"] > li { display: inline; height: auto; float: left; padding: 0 0.625rem 1.25rem; } @media only screen { .small-block-grid-1 > li { width: 100%; padding: 0 0.625rem 1.25rem; } .small-block-grid-1 > li:nth-of-type(n) { clear: none; } .small-block-grid-1 > li:nth-of-type(1n+1) { clear: both; } .small-block-grid-2 > li { width: 50%; padding: 0 0.625rem 1.25rem; } .small-block-grid-2 > li:nth-of-type(n) { clear: none; } .small-block-grid-2 > li:nth-of-type(2n+1) { clear: both; } .small-block-grid-3 > li { width: 33.33333%; padding: 0 0.625rem 1.25rem; } .small-block-grid-3 > li:nth-of-type(n) { clear: none; } .small-block-grid-3 > li:nth-of-type(3n+1) { clear: both; } .small-block-grid-4 > li { width: 25%; padding: 0 0.625rem 1.25rem; } .small-block-grid-4 > li:nth-of-type(n) { clear: none; } .small-block-grid-4 > li:nth-of-type(4n+1) { clear: both; } .small-block-grid-5 > li { width: 20%; padding: 0 0.625rem 1.25rem; } .small-block-grid-5 > li:nth-of-type(n) { clear: none; } .small-block-grid-5 > li:nth-of-type(5n+1) { clear: both; } .small-block-grid-6 > li { width: 16.66667%; padding: 0 0.625rem 1.25rem; } .small-block-grid-6 > li:nth-of-type(n) { clear: none; } .small-block-grid-6 > li:nth-of-type(6n+1) { clear: both; } .small-block-grid-7 > li { width: 14.28571%; padding: 0 0.625rem 1.25rem; } .small-block-grid-7 > li:nth-of-type(n) { clear: none; } .small-block-grid-7 > li:nth-of-type(7n+1) { clear: both; } .small-block-grid-8 > li { width: 12.5%; padding: 0 0.625rem 1.25rem; } .small-block-grid-8 > li:nth-of-type(n) { clear: none; } .small-block-grid-8 > li:nth-of-type(8n+1) { clear: both; } .small-block-grid-9 > li { width: 11.11111%; padding: 0 0.625rem 1.25rem; } .small-block-grid-9 > li:nth-of-type(n) { clear: none; } .small-block-grid-9 > li:nth-of-type(9n+1) { clear: both; } .small-block-grid-10 > li { width: 10%; padding: 0 0.625rem 1.25rem; } .small-block-grid-10 > li:nth-of-type(n) { clear: none; } .small-block-grid-10 > li:nth-of-type(10n+1) { clear: both; } .small-block-grid-11 > li { width: 9.09091%; padding: 0 0.625rem 1.25rem; } .small-block-grid-11 > li:nth-of-type(n) { clear: none; } .small-block-grid-11 > li:nth-of-type(11n+1) { clear: both; } .small-block-grid-12 > li { width: 8.33333%; padding: 0 0.625rem 1.25rem; } .small-block-grid-12 > li:nth-of-type(n) { clear: none; } .small-block-grid-12 > li:nth-of-type(12n+1) { clear: both; } } @media only screen and (min-width: 40.063em) { .medium-block-grid-1 > li { width: 100%; padding: 0 0.625rem 1.25rem; } .medium-block-grid-1 > li:nth-of-type(n) { clear: none; } .medium-block-grid-1 > li:nth-of-type(1n+1) { clear: both; } .medium-block-grid-2 > li { width: 50%; padding: 0 0.625rem 1.25rem; } .medium-block-grid-2 > li:nth-of-type(n) { clear: none; } .medium-block-grid-2 > li:nth-of-type(2n+1) { clear: both; } .medium-block-grid-3 > li { width: 33.33333%; padding: 0 0.625rem 1.25rem; } .medium-block-grid-3 > li:nth-of-type(n) { clear: none; } .medium-block-grid-3 > li:nth-of-type(3n+1) { clear: both; } .medium-block-grid-4 > li { width: 25%; padding: 0 0.625rem 1.25rem; } .medium-block-grid-4 > li:nth-of-type(n) { clear: none; } .medium-block-grid-4 > li:nth-of-type(4n+1) { clear: both; } .medium-block-grid-5 > li { width: 20%; padding: 0 0.625rem 1.25rem; } .medium-block-grid-5 > li:nth-of-type(n) { clear: none; } .medium-block-grid-5 > li:nth-of-type(5n+1) { clear: both; } .medium-block-grid-6 > li { width: 16.66667%; padding: 0 0.625rem 1.25rem; } .medium-block-grid-6 > li:nth-of-type(n) { clear: none; } .medium-block-grid-6 > li:nth-of-type(6n+1) { clear: both; } .medium-block-grid-7 > li { width: 14.28571%; padding: 0 0.625rem 1.25rem; } .medium-block-grid-7 > li:nth-of-type(n) { clear: none; } .medium-block-grid-7 > li:nth-of-type(7n+1) { clear: both; } .medium-block-grid-8 > li { width: 12.5%; padding: 0 0.625rem 1.25rem; } .medium-block-grid-8 > li:nth-of-type(n) { clear: none; } .medium-block-grid-8 > li:nth-of-type(8n+1) { clear: both; } .medium-block-grid-9 > li { width: 11.11111%; padding: 0 0.625rem 1.25rem; } .medium-block-grid-9 > li:nth-of-type(n) { clear: none; } .medium-block-grid-9 > li:nth-of-type(9n+1) { clear: both; } .medium-block-grid-10 > li { width: 10%; padding: 0 0.625rem 1.25rem; } .medium-block-grid-10 > li:nth-of-type(n) { clear: none; } .medium-block-grid-10 > li:nth-of-type(10n+1) { clear: both; } .medium-block-grid-11 > li { width: 9.09091%; padding: 0 0.625rem 1.25rem; } .medium-block-grid-11 > li:nth-of-type(n) { clear: none; } .medium-block-grid-11 > li:nth-of-type(11n+1) { clear: both; } .medium-block-grid-12 > li { width: 8.33333%; padding: 0 0.625rem 1.25rem; } .medium-block-grid-12 > li:nth-of-type(n) { clear: none; } .medium-block-grid-12 > li:nth-of-type(12n+1) { clear: both; } } @media only screen and (min-width: 64.063em) { .large-block-grid-1 > li { width: 100%; padding: 0 0.625rem 1.25rem; } .large-block-grid-1 > li:nth-of-type(n) { clear: none; } .large-block-grid-1 > li:nth-of-type(1n+1) { clear: both; } .large-block-grid-2 > li { width: 50%; padding: 0 0.625rem 1.25rem; } .large-block-grid-2 > li:nth-of-type(n) { clear: none; } .large-block-grid-2 > li:nth-of-type(2n+1) { clear: both; } .large-block-grid-3 > li { width: 33.33333%; padding: 0 0.625rem 1.25rem; } .large-block-grid-3 > li:nth-of-type(n) { clear: none; } .large-block-grid-3 > li:nth-of-type(3n+1) { clear: both; } .large-block-grid-4 > li { width: 25%; padding: 0 0.625rem 1.25rem; } .large-block-grid-4 > li:nth-of-type(n) { clear: none; } .large-block-grid-4 > li:nth-of-type(4n+1) { clear: both; } .large-block-grid-5 > li { width: 20%; padding: 0 0.625rem 1.25rem; } .large-block-grid-5 > li:nth-of-type(n) { clear: none; } .large-block-grid-5 > li:nth-of-type(5n+1) { clear: both; } .large-block-grid-6 > li { width: 16.66667%; padding: 0 0.625rem 1.25rem; } .large-block-grid-6 > li:nth-of-type(n) { clear: none; } .large-block-grid-6 > li:nth-of-type(6n+1) { clear: both; } .large-block-grid-7 > li { width: 14.28571%; padding: 0 0.625rem 1.25rem; } .large-block-grid-7 > li:nth-of-type(n) { clear: none; } .large-block-grid-7 > li:nth-of-type(7n+1) { clear: both; } .large-block-grid-8 > li { width: 12.5%; padding: 0 0.625rem 1.25rem; } .large-block-grid-8 > li:nth-of-type(n) { clear: none; } .large-block-grid-8 > li:nth-of-type(8n+1) { clear: both; } .large-block-grid-9 > li { width: 11.11111%; padding: 0 0.625rem 1.25rem; } .large-block-grid-9 > li:nth-of-type(n) { clear: none; } .large-block-grid-9 > li:nth-of-type(9n+1) { clear: both; } .large-block-grid-10 > li { width: 10%; padding: 0 0.625rem 1.25rem; } .large-block-grid-10 > li:nth-of-type(n) { clear: none; } .large-block-grid-10 > li:nth-of-type(10n+1) { clear: both; } .large-block-grid-11 > li { width: 9.09091%; padding: 0 0.625rem 1.25rem; } .large-block-grid-11 > li:nth-of-type(n) { clear: none; } .large-block-grid-11 > li:nth-of-type(11n+1) { clear: both; } .large-block-grid-12 > li { width: 8.33333%; padding: 0 0.625rem 1.25rem; } .large-block-grid-12 > li:nth-of-type(n) { clear: none; } .large-block-grid-12 > li:nth-of-type(12n+1) { clear: both; } } 

 <ul class="small-block-grid-2 large-block-grid-4"> <li><img src="../assets/img/examples/comet-th.jpg"></li> <li><img src="../assets/img/examples/launch-th.jpg"></li> <li><img src="../assets/img/examples/space-th.jpg"></li> <li><img src="../assets/img/examples/spacewalk-th.jpg"></li> </ul>