css - bootstrap number of columns based on parent columns -

css - bootstrap number of columns based on parent columns -

does know if can accomplished bootstrap mixins.

columns( number of parent)

something neat has.

in neat columns mixins works these

@mixin span-columns($span, $display: block) { ... }

where $span can 3 or 3 of 12

specifies number of columns element should span. if selector nested number of columns of parent element should passed argument well.

thanks

when understand question should read less mixins , variables.

you find mixins generate semantic grid columns in less/mixins/grid.less file of bootstrap's source code.

to generate div overspans 3 columns should utilize instance:

div.three{ .make-xs-column(3); }

notice mobile first nature of these mixins. above code xs mixin generate css code applied screen width (no media queries).

when using:

div.three{ .make-xs-column(6); .make-sm-column(3); }

you div overspan 6 columns screen width below 768 pixels (thexs grid) , 3 columns above 768 pixels, sm grid , (explicit calling larger grid mixins not needed unless want overspan difference number of columns). it's inportant start mixins smaller grids before larger grids, see also: bootstrap 3 mixin multiple make-*-column

css twitter-bootstrap twitter-bootstrap-3 sass less